Adding the Apple widget to your website

This page will tell you how to add the Apple button directly to your website.

Embedding in pages - general

All you need to do is paste the following code into a specific web page, i.e. between the tags <body> and </body>:

Example of the embeded code:

<script type="text/javascript">
 //mluvii parameters - a companyGUID and a widget name   
  const mluviiServer = "//app.mluvii.com/widget/OOWidget.js";
  const widgetGuid = "295b1064-cf5b-4a5d-9e05-e7a74f86ae5e";
  let widgetName = "demoCenter";
  //Apple bussiness id a intent - the intent is used for routing purposes
  const appleBussinessID = "3bedd748-b390-411e-a770-394efa46f72e";
  let appleIntent = "mluvii";

  // Apple widget location and size
  const iconScale = 1.5;
  const marginBottom = 20;
  const marginRight = 20;   
  // Widget color and a background color
  const widgetColor = "#ffffff";
  const widgetBackgroundColor = "#75B6BC";
  // If the apple business chat is not supported on the device mluvii widget is loaded
  if (!window.appleBusinessChat.isSupported()) {
    (function () {
        var scr = document.createElement('script');
        scr.type = 'text/javascript';
        scr.charset = 'UTF-8';
        scr.async = true;
        scr.src = mluviiServer;
        scr.$owidgetOnLoad = function (owidget) {
        if (!owidget.isSupported) { return; }
        owidget.init(widgetGuid, widgetName);
        owidget.connectToServer();
        };
        var ffs = document.getElementsByTagName('script')[0];
        ffs.parentNode.insertBefore(scr, ffs);
    })();
      // If the apple widget is supported on the device load the apple widget with parameters which were set above
  } else {
    let parentElem = document.createElement('div');
    parentElem.style.cssText = 'position: fixed; bottom: '+marginBottom+'px; right: '+marginRight+'px; width: '+(45*iconScale)+'px; height: '+(45*iconScale)+'px; float: right; z-index: 9999;';
    let elem = document.createElement('div');
    elem.className += 'apple-business-chat-message-container';
    elem.setAttribute('data-apple-business-id', appleBussinessID);
    elem.setAttribute('data-apple-business-intent-id', appleIntent);
    elem.setAttribute('data-apple-icon-scale', iconScale.toString());
    elem.setAttribute('data-apple-icon-color', widgetColor);
    elem.setAttribute('data-apple-icon-background-color', widgetBackgroundColor);
    parentElem.appendChild(elem);
    document.body.appendChild(parentElem);
  }
// Open chat - if the mluvii widget instance is located on the website use it. If it's not do redirect on apple business chat
let openChatBasedOnDevice = () => {
  if($owidget){
    $owidget.openChat();
  } else{
    const url = 'https://bcrw.apple.com/urn:biz:'+appleBussinessID+'?biz-intent-id='+appleIntent;
    window.location.href = url;
  }

};
</script>

You can have the mluvii widget and the Apple widget on your website at the same time. In that case, the Apple widget is only displayed on Apple devices. Clients accessing from other devices (desktops and Android devices) are shown the normal mluvii widget.

You can find the value of the widgetGuid parameter in the script of a specific widget. The script also contains the name of the widget, which you insert into the widgetName variable.

Embedding in pages - detailed

For detailed information about the Apple Business Chat widget, see the official Apple documentation.

To display the Apple button on any website, the JavaScript library Business Chat is key, as you cannot do without it. The following script must be used to call it:

<script src="https://static.cdn-apple.com/businesschat/start-chat-button/2/index.js"></script>

The script is automatically loaded when the pages are loaded in the browser. It searches for all available buttons and converts them into Business chat buttons, using the configuration you define in <div>, which is described in detail in the official Apple documentation.

This short script must be added to the web page either in the header between the tags <head> and </head>, or just after the </body> element at the bottom of the page.

If you are interested in trying out the new Apple Business Chat channel, do not hesitate to contact your sales representative, or send an e-mail to helpdesk@mluvii.com.

results matching ""

    No results matching ""