Vložení apple tlačítka na web

Na této stránce se dozvíte, jakým způsobem si můžete tlačítko apple vložit přímo na vaše stránky.

Zabudování do stránek - Obecně

Jediné, co je potřeba, je vložit do konkrétní stránky webu, tedy např. mezi značky <body> a </body>, následující kód:

Příklad kódu pro vložení:

<script type="text/javascript">
 //mluvii parametry - companyGUID a nazev balicku   
  const mluviiServer = "//app.mluvii.com/widget/OOWidget.js";
  const widgetGuid = "295b1064-cf5b-4a5d-9e05-e7a74f86ae5e";
  let widgetName = "demoCenter";
  //Apple bussiness id a intent - intent se pouziva na routovani
  const appleBussinessID = "3bedd748-b390-411e-a770-394efa46f72e";
  let appleIntent = "mluvii";

  // Umisteni a velikost apple widgetu
  const iconScale = 1.5;
  const marginBottom = 20;
  const marginRight = 20;   
  // Barva widgetu a barva pozadi widgetu
  const widgetColor = "#ffffff";
  const widgetBackgroundColor = "#75B6BC";
  // Pokud neni apple business chat podporovan na zarizeni, nahraji mluvii widget
  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);
    })();
      // Pokud je apple business chat podporovan na zarizeni, nahraji apple widget s parametry, ktere byly nastaveny vyse
  } 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);
  }
// Otevri chat - pokud je na strance mluvii widget, pouziji ho. Pokud neni, udelam redirect na 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>

Na webu můžete mít současně mluvii i apple tlačítko. V tom případě je apple tlačítko zobrazeno pouze na zařízeních od Applu. Klientům přistupujícím z ostatních zařízení (desktopy a mobilní zařízení s operačním systémem Android) je zobrazeno běžné mluvii tlačítko.

Hodnotu parametru widgetGuid naleznete ve scriptu konkrétního balíčku (widgetu). Ve scriptu je obsažen také název balíčku (widgetu), který dosadíte do proměnné widgetName.

Zabudování do stránek - detailněji

Podrobné informace týkající se tlačítka pro Apple Business Chat najdete v oficiální Apple dokumentaci.

Pro zobrazení apple tlačítka na jakémkoli webu je klíčová javascript knihovna Business Chat, bez které se neobejdete. Pro její volání je nutné použít následující script:

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

Script se automaticky načte v okamžiku načtení stránek v prohlížeči. Vyhledá všechna dostupná tlačítka a konvertuje je do podoby Business chat tlačítek, přičemž využije konfigurace, kterou definujete v <div>, což je dále podrobně popsáno v oficiální Apple dokumentaci.

Tento krátký script je nutné umístit na webové stránce buď v hlavičce mezi tagy <head> a </head>, případně hned za </body> element na konci stránky.

V případě zájmu o vyzkoušení nového kanálu Apple Business Chat neváhejte kontaktovat svého obchodního zástupce, případně zašlete e-mail na helpdesk@mluvii.com.

results matching ""

    No results matching ""