@roomle/embedding-lib 4.44.0 → 5.1.0-alpha.1

package/docs/examples/roomle-configurator-api.es.min.js

@@ -1,586 +0,0 @@
-console.error('DO NOT USE THIS FILE FOR PRODUCTION CODE!');
-console.error('THIS FILE IS ONLY HERE TO SHOWCASE THE EXAMPLES!');
-console.error('ALWAYS USE THE LATES VERSION OF THIS LIB!');
-class MessageHandler {
-  constructor(side, incomingMessageBus, outgoingMessageBus, messageExecution) {
-    this._outgoingMessageBus = null;
-    this._execMessage = null;
-    this._side = side;
-    this._incomingMessageBus = incomingMessageBus;
-    this._outgoingMessageBus = outgoingMessageBus;
-    this._execMessage = messageExecution;
-    this._incomingMessageBus.addEventListener('message', this._handleMessage.bind(this));
-  }
-  setOutgoingMessageBus(outgoingMessageBus) {
-    this._outgoingMessageBus = outgoingMessageBus;
-  }
-  setMessageExecution(fun) {
-    this._execMessage = fun;
-  }
-  sendMessage(message, args = []) {
-    return new Promise((resolve, reject) => {
-      const messageChannel = new MessageChannel();
-      messageChannel.port1.onmessage = (event) => {
-        if (!event || !event.data) {
-          messageChannel.port1.close();
-          messageChannel.port2.close();
-          return reject(new Error(this._side + ' received message but response can not be interpreted'));
-        }
-        let response;
-        try {
-          response = JSON.parse(event.data);
-        }
-        catch (e) {
-          messageChannel.port1.close();
-          messageChannel.port2.close();
-          this._prepareError(e);
-          return reject(e);
-        }
-        if (response.error) {
-          reject(response.error);
-        }
-        else if (response.result !== undefined) {
-          resolve(response.result);
-        }
-        else {
-          resolve();
-        }
-        messageChannel.port1.close();
-        messageChannel.port2.close();
-      };
-      let command = '';
-      try {
-        command = JSON.stringify({ message, args });
-      }
-      catch (e) {
-        return reject(new Error(this._side + ': can not create command because it is not JSON.stringify able'));
-      }
-      if (!this._outgoingMessageBus) {
-        return reject(new Error(this._side + ': outgoing bus not set yet'));
-      }
-      this._outgoingMessageBus.postMessage(command, '*', [messageChannel.port2]);
-    });
-  }
-  _handleMessage(event) {
-    // check if MessageEvent has a port set --> hope this clears confusion about https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging
-    const receiver = (event.ports && Array.isArray(event.ports) && event.ports.length > 0) ? event.ports[0] : null;
-    if (event.data && receiver) {
-      try {
-        const command = JSON.parse(event.data);
-        if (!this._execMessage) {
-          return receiver.postMessage(JSON.stringify({ error: this._side + ' is not ready to handle messages' }));
-        }
-        if (!Array.isArray(command.args)) {
-          command.args = [command.args];
-        }
-        const execResult = this._execMessage(command, event);
-        if (execResult === undefined) {
-          return; // do nothing because execMessage did not know what to do. Probably a message from another iframe was intercepted
-        }
-        execResult.then((data = {}) => {
-          // tslint:disable-next-line:no-unnecessary-initializer
-          let error = undefined;
-          // tslint:disable-next-line:no-unnecessary-initializer
-          let result = undefined;
-          if (typeof data === 'object' && data !== null) {
-            error = data.error;
-            result = data.result;
-          }
-          if (error) {
-            receiver.postMessage(JSON.stringify({ error }));
-          }
-          else if (result !== undefined) {
-            receiver.postMessage(JSON.stringify({ result }));
-          }
-          else {
-            receiver.postMessage(JSON.stringify({ result: data }));
-          }
-        }, (error) => {
-          receiver.postMessage(JSON.stringify({ error: this._prepareError(error) }));
-        });
-      }
-      catch (error) {
-        receiver.postMessage(JSON.stringify({ error: this._prepareError(error) }));
-      }
-    }
-  }
-  _prepareError(e) {
-    if (typeof e === 'string') {
-      const error = this._side + ': ' + e;
-      console.error(error);
-      return error;
-    }
-    e.message = this._side + ': ' + e.message;
-    console.error(e);
-    return e.message;
-  }
-}
-
-const NAMESPACE_SEPARATOR = '.';
-const HANDSHAKE_MESSAGES = {
-  REQUEST_BOOT: 'requestBoot',
-  SETUP: 'setup',
-  WEBSITE_READY: 'websiteReady',
-};
-const getConfiguratorSettings = async (configuratorId, initData) => {
-  if (typeof configuratorId !== 'string') {
-    throw new Error('Configurator ID is not a string type: "' + (typeof configuratorId) + '"');
-  }
-  const server = initData.customApiUrl ? initData.customApiUrl : 'https://api.roomle.com/v2';
-  const currentTenant = initData.overrideTenant || 9;
-  const url = server + '/configurators/' + configuratorId;
-  const apiKey = 'roomle_portal_v2';
-  const token = '03-' + window.btoa((new Date()).toISOString() + ';anonymous;' + apiKey);
-  const createHeaders = () => {
-    const headers = {
-      apiKey,
-      currentTenant,
-      locale: 'en',
-      language: 'en',
-      device: 1,
-      token,
-      platform: 'web',
-    };
-    return new Headers(headers);
-  };
-  const request = new Request(url, {
-    method: 'GET',
-    headers: createHeaders(),
-    mode: 'cors',
-    cache: 'default',
-  });
-  const response = await fetch(request);
-  const { configurator } = await response.json();
-  return configurator;
-};
-
-const isInIframe = () => {
-  try {
-    return window.self !== window.top;
-  }
-  catch (e) {
-    return true;
-  }
-};
-
-const NAMES_FOR_LOCALHOST = [
-  '127.0.0.1',
-  'localhost',
-  '0.0.0.0',
-];
-const getHostname = () => {
-  const isIframe = isInIframe();
-  let url = window.location.href;
-  if (isIframe) {
-    if (!document.referrer) {
-      return null;
-    }
-    url = document.referrer;
-  }
-  const { hostname } = new URL(url);
-  return hostname;
-};
-const isDemoHostname = (hostname) => {
-  if (NAMES_FOR_LOCALHOST.includes(hostname)) {
-    return true;
-  }
-  if (hostname.endsWith('roomle.com')) {
-    return true;
-  }
-  // exception for CI builds
-  if (hostname.endsWith('gitlab.io') || hostname.endsWith('gitlab.com')) {
-    return true;
-  }
-  return false;
-};
-
-/**
- * Recursively merge properties of two objects.
- * If a property exists in both it, property of obj2 is used.
- * Returns a new object (copy)
- * @param obj1
- * @param obj2
- */
-const deepMergeCopy = (obj1, obj2) => {
-  const result = JSON.parse(JSON.stringify(obj1));
-  return deepMerge(result, obj2);
-};
-/**
- * Recursively merge properties of two objects.
- * If a property exists in both it, property of obj2 is used.
- * Warning: This returns obj1 and not a copy!
- * @param obj1
- * @param obj2
- */
-const deepMerge = (obj1, obj2) => {
-  // tslint:disable-next-line
-  for (const p in obj2) {
-    try {
-      // Property in destination object set; update its value.
-      if (obj2[p].constructor === Object) {
-        obj1[p] = deepMerge(obj1[p], obj2[p]);
-      }
-      else {
-        obj1[p] = obj2[p];
-      }
-    }
-    catch (e) {
-      // Property in destination object not set; create it and set its value.
-      obj1[p] = obj2[p];
-    }
-  }
-  return obj1;
-};
-
-const BROWSER_LANGUAGE_PROPERTY_KEYS_KNOWN = ['language', 'browserLanguage', 'userLanguage', 'systemLanguage'];
-const getLanguage = (lang = null) => {
-  const navigator = window.navigator;
-  if (lang) {
-    return lang.substr(0, 2);
-  }
-  if (Array.isArray(navigator.languages) && navigator.languages.length > 0) {
-    return navigator.languages[0].substr(0, 2);
-  }
-  for (let i = 0, length = BROWSER_LANGUAGE_PROPERTY_KEYS_KNOWN.length; i < length; i++) {
-    const language = navigator[BROWSER_LANGUAGE_PROPERTY_KEYS_KNOWN[i]];
-    if (language) {
-      return language.substr(0, 2);
-    }
-  }
-  return 'en';
-};
-
-const CONFIGURATOR_IDLE = '(idle)';
-const castAndFixInitData = (initData) => {
-  castInitData(initData);
-  if (initData === null || initData === void 0 ? void 0 : initData.customApiUrl) {
-    initData.customApiUrl = decodeURIComponent(initData.customApiUrl);
-  }
-  if (initData.shareUrl) {
-    initData.deeplink = initData.shareUrl.replace(LEGACY_SHARE_PLACEHOLDER, SHARE_PLACEHOLDER);
-  }
-  return initData;
-};
-const castInitData = (obj) => {
-  if (!obj) {
-    return;
-  }
-  const keys = Object.keys(obj);
-  for (const key of keys) {
-    const value = obj[key];
-    // need to type-check for null because typeof null evaluates to object
-    // see here why this is like it is: https://2ality.com/2013/10/typeof-null.html
-    if (!Array.isArray(value) && typeof value === 'object' && value !== null) {
-      return castInitData(value);
-    }
-    if (Array.isArray(value)) {
-      for (const entry of value) {
-        castInitData(entry);
-      }
-      return;
-    }
-    if (value === 'true' || value === 'false') {
-      obj[key] = value === 'true';
-    }
-  }
-};
-const mergeInitData = (configuratorSettings, currentInitData) => {
-  currentInitData.configuratorId = configuratorSettings.id;
-  const remoteInitData = configuratorSettings.settings || {};
-  // This is a performance optimization so we do not need to fetch
-  // configurator settings twice
-  if (!currentInitData.overrideTenant && configuratorSettings.tenant) {
-    // use as any because we send tenant id as string but SDK requires to send a number
-    // casting to number could become a problem when we change tenant IDs to something
-    // random instead of a integer which is incremented
-    currentInitData.overrideTenant = configuratorSettings.tenant;
-  }
-  return deepMergeCopy(remoteInitData, currentInitData);
-};
-const getFallbackInitData = () => {
-  const fallbackInitData = {};
-  if (!fallbackInitData.locale) {
-    fallbackInitData.locale = getLanguage();
-  }
-  if (fallbackInitData.id === CONFIGURATOR_IDLE) {
-    delete fallbackInitData.id;
-  }
-  const hostname = getHostname();
-  if (hostname && isDemoHostname(hostname)) {
-    fallbackInitData.configuratorId = 'demoConfigurator';
-  }
-  fallbackInitData.customApiUrl = 'https://www.roomle.com/api/v2';
-  fallbackInitData.emails = false;
-  return fallbackInitData;
-};
-const LEGACY_SHARE_PLACEHOLDER = '<CONF_ID>';
-const SHARE_PLACEHOLDER = '#CONFIGURATIONID#';
-
-// see why: so#/58065241/10800831
-const isAndroid = () => /(android)/i.test(navigator.userAgent);
-
-const setDefaultBehaviour = (object, callbackName, defaultBehaviour) => {
-  let customBehaviour = null;
-  Object.defineProperty(object, callbackName, {
-    get() {
-      return customBehaviour || defaultBehaviour;
-    },
-    set(data) {
-      if (!(data === null || data === void 0 ? void 0 : data.mute)) {
-        console.warn('You override Roomle defined behaviour. To disalbe this warning pass in an object with the following properties');
-        console.warn('{ mute: true, value: () => void }');
-        customBehaviour = data;
-      }
-      else {
-        customBehaviour = data.value;
-      }
-    },
-  });
-};
-const calcVh = () => (window.innerHeight * 0.01) + 'px'; // needed because of URL bar in android, inspired by: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-const setCustomProp = (element) => {
-  if (!element) {
-    return;
-  }
-  // Needed to wait for the next run loop otherwise data is wrong
-  setTimeout(() => element.style.setProperty(RML_CUSTOM_PROPERTY_HEIGHT, calcVh()), 0);
-};
-const RML_STYLES_ID = 'rml-styles';
-const RML_ANIMATION_DELAY = 450;
-const RML_CUSTOM_PROPERTY_HEIGHT = '--rml-full-height';
-const RML_CSS_CLASSES = {
-  CONTAINER: 'rml-container',
-  FILL: 'rml-fill',
-  POSITION: 'rml-pos',
-  TRANSITION: 'rml-transition',
-  ANDROID_HEIGHT: 'rml-android-height',
-  OVERFLOW_HIDDEN: 'rml-overflow-hidden',
-};
-const globalSetupDone = new Map();
-class RoomleEmbeddingApi {
-  constructor(settings, container, initData, waitForIframe) {
-    this.ui = {
-      callbacks: null,
-    };
-    this.extended = {
-      callbacks: null,
-    };
-    this.analytics = {
-      callbacks: {},
-    };
-    this.global = {
-      callbacks: {},
-    };
-    this._initData = {};
-    if (!settings || typeof settings.id !== 'string') {
-      throw new Error('Please provide a correct configuratorId, you get the correct ID from your Roomle Contact Person');
-    }
-    if (globalSetupDone.has(container)) {
-      throw new Error('There is already an instance on this DOM element');
-    }
-    const stylesAlreadyAdded = !!document.getElementById(RML_STYLES_ID);
-    if (!stylesAlreadyAdded) {
-      const zIndex = initData.zIndex || 9999999;
-      const styles = document.createElement('style');
-      styles.type = 'text/css';
-      styles.id = RML_STYLES_ID;
-      const cssTransition = 'transition:all ease-in-out ' + RML_ANIMATION_DELAY + 'ms;';
-      const cssTransitionForAllBrowsers = ['-webkit-', '-o-'].reduce((acc, browser) => acc += browser + cssTransition, '') + cssTransition;
-      const vh = calcVh();
-      styles.innerHTML = `
-        .${RML_CSS_CLASSES.CONTAINER}{${RML_CUSTOM_PROPERTY_HEIGHT}:${vh};}
-        .${RML_CSS_CLASSES.POSITION}{position:fixed;top:0;left:0;z-index:${zIndex};opacity:0}
-        .${RML_CSS_CLASSES.TRANSITION}{${cssTransitionForAllBrowsers}}
-        .${RML_CSS_CLASSES.FILL}{width:100%;height:100%;opacity:1}
-        .${RML_CSS_CLASSES.ANDROID_HEIGHT}{height:calc(var(${RML_CUSTOM_PROPERTY_HEIGHT},1vh)*100)}
-        .${RML_CSS_CLASSES.OVERFLOW_HIDDEN}{overflow:hidden}
-      `;
-      document.head.appendChild(styles);
-    }
-    this._onResize = this._onResize.bind(this);
-    if (isAndroid()) {
-      window.addEventListener('resize', this._onResize);
-    }
-    this._container = container;
-    this._initData = initData;
-    this._configuratorSettings = settings;
-    const iframe = this._createIframe();
-    this._onUseFullPage = this._onUseFullPage.bind(this);
-    this._executeMessage = this._executeMessage.bind(this);
-    this._onBackToWebsite = this._onBackToWebsite.bind(this);
-    this._messageHandler = new MessageHandler('website', window, null, this._executeMessage);
-    this._waitForIframe = waitForIframe;
-    this._container.appendChild(iframe);
-    this._iframe = iframe;
-    globalSetupDone.set(container, true);
-  }
-  static createPlanner(configuratorId, container, initData) {
-    return this._create(configuratorId, container, initData);
-  }
-  /**
-   * Method to create a new instance of a Roomle Configurator
-   * @param configuratorId the id which identifies your configurator, you will get this ID from your Roomle Contact Person
-   * @param container DOM container in which the configurator should be placed
-   * @param initData settings with which the configurator should be started
-   */
-  static createConfigurator(configuratorId, container, initData) {
-    return this._create(configuratorId, container, initData);
-  }
-  /**
-   * Method to create a new instance of a Roomle Configurator
-   * @deprecated please use "createConfigurator"
-   * @param configuratorId the id which identifies your configurator, you will get this ID from your Roomle Contact Person
-   * @param container DOM container in which the configurator should be placed
-   * @param initData settings with which the configurator should be started
-   */
-  static create(configuratorId, container, initData) {
-    return this._create(configuratorId, container, initData);
-  }
-  /**
-   * Method to create a new instance of a Roomle Viewer
-   * @param configuratorId the id which identifies your configurator, you will get this ID from your Roomle Contact Person
-   * @param container DOM container in which the configurator should be placed
-   * @param initData settings with which the configurator should be started
-   */
-  static createViewer(configuratorId, container, initData) {
-    return this._create(configuratorId, container, initData);
-  }
-  static _create(configuratorId, container, initData) {
-    return new Promise(async (resolve, reject) => {
-      try {
-        const fallbackInitData = deepMerge(getFallbackInitData(), castAndFixInitData(initData));
-        if (!fallbackInitData.featureFlags) {
-          fallbackInitData.featureFlags = {};
-        }
-        if (typeof fallbackInitData.featureFlags.realPartList !== 'boolean') {
-          fallbackInitData.featureFlags.realPartList = true;
-        }
-        if (typeof fallbackInitData.featureFlags.globalCallbacks !== 'boolean') {
-          fallbackInitData.featureFlags.globalCallbacks = true;
-        }
-        const configuratorSettings = await getConfiguratorSettings(configuratorId, fallbackInitData);
-        initData = mergeInitData(configuratorSettings, fallbackInitData);
-        return new this(configuratorSettings, container, initData, resolve);
-      }
-      catch (e) {
-        return reject(e);
-      }
-    });
-  }
-  teardown() {
-    if (this._container) {
-      globalSetupDone.delete(this._container);
-    }
-    const iframe = this._container.querySelector('iframe');
-    if (iframe) {
-      this._container.removeChild(iframe);
-    }
-    window.removeEventListener('resize', this._onResize);
-  }
-  _createIframe() {
-    var _a;
-    const iframe = document.createElement('iframe');
-    let url = ((_a = this._configuratorSettings) === null || _a === void 0 ? void 0 : _a.url) || 'https://www.roomle.com/t/cp/';
-    if (this._initData.useLocalRoomle) {
-      url = location.href.replace('embedding.html', '');
-    }
-    if (location.href.includes('roomle.gitlab.io')) {
-      url = location.href.replace('embedding.html', 'index.html');
-    }
-    if (this._initData.overrideServerUrl) {
-      url = this._initData.overrideServerUrl;
-    }
-    iframe.src = url;
-    iframe.classList.add(RML_CSS_CLASSES.CONTAINER);
-    iframe.classList.add(RML_CSS_CLASSES.FILL);
-    return iframe;
-  }
-  _onResize() {
-    setCustomProp(this._iframe);
-  }
-  _onUseFullPage() {
-    this._iframe.classList.add(RML_CSS_CLASSES.POSITION);
-    document.documentElement.classList.add(RML_CSS_CLASSES.OVERFLOW_HIDDEN);
-    window.document.body.classList.add(RML_CSS_CLASSES.OVERFLOW_HIDDEN);
-    if (isAndroid()) {
-      setCustomProp(this._iframe);
-      this._iframe.classList.add(RML_CSS_CLASSES.ANDROID_HEIGHT);
-    }
-  }
-  _onBackToWebsite() {
-    this._iframe.classList.remove(RML_CSS_CLASSES.POSITION);
-    this._iframe.classList.remove(RML_CSS_CLASSES.ANDROID_HEIGHT);
-    document.documentElement.classList.remove(RML_CSS_CLASSES.OVERFLOW_HIDDEN);
-    window.document.body.classList.remove(RML_CSS_CLASSES.OVERFLOW_HIDDEN);
-  }
-  _executeMessage({ message, args }, event) {
-    var _a;
-    if (!event.source) {
-      // @ts-ignore
-      return; // no source? just wait ;-)
-    }
-    if (event.source !== ((_a = this._iframe) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
-      // @ts-ignore
-      return; // need to wait since response is not for the current iframe;
-    }
-    if (message === HANDSHAKE_MESSAGES.REQUEST_BOOT) {
-      this._messageHandler.setOutgoingMessageBus(event.source);
-      return Promise.resolve({ result: this._initData });
-    }
-    if (message === HANDSHAKE_MESSAGES.SETUP) {
-      const { methods, callbacks } = args[0];
-      methods.forEach((method) => {
-        const namespaces = method.split(NAMESPACE_SEPARATOR);
-        const object = namespaces[0];
-        const methodName = namespaces[1];
-        if (!this[object]) {
-          this[object] = {};
-        }
-        this[object][methodName] = function () {
-          // @todo -- this was the fix that values are passed to caller, e.g.: interface.extended.getParametersOfRootComponent
-          // most of the things we need for a meaningful test are not available in JEST (since it runs in node). We should
-          // write a Cypress test for it
-          return this._messageHandler.sendMessage(method, [...arguments]);
-        }.bind(this);
-      });
-      callbacks.forEach((callback) => {
-        const namespaces = callback.split(NAMESPACE_SEPARATOR);
-        const object = namespaces[0];
-        const callbacksName = namespaces[1];
-        const eventName = namespaces[2];
-        if (!this[object]) {
-          this[object] = {};
-        }
-        if (!this[object][callbacksName]) {
-          this[object][callbacksName] = {};
-        }
-        // @ts-ignore
-        this[object][callbacksName][eventName] = () => undefined;
-      });
-      setDefaultBehaviour(this.ui.callbacks, 'onUseFullPage', this._onUseFullPage);
-      setDefaultBehaviour(this.ui.callbacks, 'onBackToWebsite', this._onBackToWebsite);
-      this._waitForIframe(this);
-      setTimeout(() => this._messageHandler.sendMessage(HANDSHAKE_MESSAGES.WEBSITE_READY), 0); // Run it after the promise is resolved so everyone can subscribe
-      return Promise.resolve({ result: null });
-    }
-    const messageNamespaces = message.split(NAMESPACE_SEPARATOR);
-    const namespace = messageNamespaces[0];
-    const objectOfAction = messageNamespaces[1];
-    const methodOfAction = (messageNamespaces.length === 3) ? messageNamespaces[2] : null;
-    if (methodOfAction) {
-      if (this[namespace][objectOfAction][methodOfAction]) {
-        const result = this[namespace][objectOfAction][methodOfAction](...args);
-        if (result instanceof Promise) {
-          return result.then((data) => ({ result: data }));
-        }
-        else if (result !== undefined) {
-          return Promise.resolve({ result });
-        }
-        return Promise.resolve({ result: null });
-      }
-    }
-    return Promise.reject('Message "' + message + '" is unkown');
-  }
-}
-
-export { RoomleEmbeddingApi as default };

package/docs/hsp.md

@@ -1,61 +0,0 @@
-# Api for embedding the Roomle Planner
-
-This README outlines the details of including the Roomle Planner to your website.
-
-## How to add the embedding API to your project
-
-You only need to add the code which sits in `dist/roomle-embedding-api.js` to your project. We recommend doing this
-by a package manager like [npm](https://www.npmjs.com/), [yarn](https://yarnpkg.com/lang/en/) or similar tools and a build pipe.
-Common tools to setup a build pipe for example are [gulp](https://gulpjs.com/), [webpack](https://webpack.js.org/),
-[grunt](https://gruntjs.com/) and many more. Every release gets a git tag so that you can specify an exact version in your
-package manager. Locking to a certain version helps you to deliver a stable product with the features you need.
-
-## API description
-
-There is an auto generated API description which is available here: [doc/api.md](doc/api.md) But no one likes to read
-documentation so maybe it's enough to checkout the "help your self section".
-
-### Give me some code to copy&paste
-
-This is only a snipped to get you started! Please adjust to your needs and don't use it in production! Also this code will
-only work in the newest browser. So use the ES version you need for your users. e.g. replace `async/await` with `Promise.then`.
-Never use the direct link to the Roomle JS library since it is always the latest one you have no chance to rely on a certain
-version.
-
-```html
-    <!DOCTYPE html>
-    <html>
-        <head>
-            <meta charset="utf-8">
-            <meta http-equiv="X-UA-Compatible" content="IE=edge">
-            <title>Roomle Planner</title>
-            <meta name="description" content="">
-            <meta name="viewport" content="width=device-width, initial-scale=1">
-            <style>
-                body {
-                    margin: 0;
-                    padding: 0;
-                    overflow: hidden;
-                }
-                #planner-container {
-                    width:100%;
-                    height:100vh;
-                }
-            </style>
-        </head>
-
-        <body>
-            <div id="planner-container"></div>
-            <script src="https://www.roomle.com/t/embedding/roomle-embedding-api.js"></script>
-            <script>
-            document.addEventListener('DOMContentLoaded', async function () {
-                try {
-                    await RoomleEmbedding.initPlanner('8a701c314b4ae57f014b539159a01517');
-                } catch(error) {
-                    console.error(error);
-                }
-            });
-            </script>
-        </body>
-    </html>
-```