Configuration file: widgeton.config.js

import template from "__TEMPLATE__";
export default {
  // Widget container selector.
  // Where to put the widget on the page.
  // Any valid css selector is allowed.
  // default: "body"
  containerSelector: `body`,
  // Widget URL.
  // Use template variables to embed properties from script tag in URL.
  // E.g. https://example.com/?license=${data-license};
  widgetUrl: template`https://chatscope.io/widgeton-beta/chat-widget`,
  // Add the widget origin here if you want to interface with the page by postMessage.
  // If the widget uses different domains, add each domain you want to be able to interface with.
  allowedOrigins: [],
  // This class will be added to main widget div element
  className: ``,
  // Attribute name of the of the <script /> tag from which loader will get the name of the api object
  // The api object with the name taken from this attribute will be added to the window object when the api is ready
  apiObjectNameAttribute: `data-api-object`,
  //
  apiObjectDefaultName: `widgetApi`,
  // Attribute name of the of the <script /> tag from which loader will get the name of the onApiReady message
  // onApiReady message will be sent when api is ready for use via postMessage to the window object of the page where the loader code resides
  onApiReadyMessageNameAttribute: `data-api-ready-message`,
  //
  onApiReadyDefaultMessage: `widget-api-ready`,
  // Attribute name of the of the <script /> tag from which loader will get the name of the onload message
  // onLoad message will be sent when iframe is loaded via postMessage to the window object of the page where the loader code resides
  onLoadMessageNameAttribute: `data-api-onload-message`,
  //
  onLoadDefaultMessage: `widget-loaded`,
  scriptAttributes: [],
  //
  silentFail: false,
  // Styles to be added to the main widget element
  style: {
    boxSizing: `border-box`,
    height: `647px`,
    width: `400px`,
    position: `absolute`,
    top: `40px`,
    right: `40px`,
  },
  // The styles to be added to the widget iframe
  iframeStyle: {
    boxSizing: `border-box`,
    position: `absolute`,
    left: `0`,
    top: `0`,
    width: `100%`,
    height: `100%`,
    border: `0`,
    margin: `0`,
    padding: `0`,
  },
  // The mediaQueries to be added to the main window
  mediaQueries: [
    "(min-width:576px)",
    "(min-width:768px)",
    "(min-width:992px)",
    "(min-width:1200px)",
    "(min-width:1400px)",
  ],
  //
  initFunction: ({ attributes }) => {
    // Return true to allow initialization to continue
    // or false to break initialization
    return true;
  },
  // Add default api to loader
  defaultApi: true,
  //
  customApi: ({ widget, window, defaultApi }) => {
    return {
      onMessage: (evt) => {
        console.log("CUSTOM API, received message", evt);
      },
      api: {
        log: (str) => {
          console.log(str);
        },
        send: (msg) => {
          defaultApi.postMessage(msg);
        },
      },
    };
  },
};