A Yaplet telepítése

A JavaScript-kódrészlet az univerzális módszer a Yaplet bármely weboldalhoz való hozzáadásához. Illeszd be egyszer, és a widget minden oldalon megjelenik. Az összes platformspecifikus útmutató (Shopify, WordPress, Webflow stb.) végső soron ugyanezt a kódrészletet tölteti be – tehát ha kíváncsi vagy, mit csinál pontosan a script, ez a referencia-cikk.

Telepítés egy adott platformra?

Ha az oldalad az alábbi platformok egyikén fut, használd a hozzá tartozó dedikált útmutatót — mindegyik végigvezet az adott platformra vonatkozó pontos lépéseken. Bármely más oldalon kövesd az alábbi univerzális kódrészlet-utasításokat.

• Telepítés Shopify-áruházba
• Telepítés WordPress-oldalra
• Telepítés WooCommerce-áruházba
• Telepítés Webflow-oldalra

1. Keresd meg a widget ID-det

Minden Yaplet-munkaterületnek egy vagy több widgetje van, mindegyiknek egyedi azonosítóval. Lépj be a Yaplet irányítópultodba, kattints a Widgetek menüpontra az oldalsávon (a Platform eszközök alatt), majd válaszd ki azt a widgetet, amelyiket telepíteni szeretnéd. A Widget ID az oldal tetején látható.

2. Másold ki a kódrészletet

A widget oldalán kattints a jobb felső sarokban lévő Beágyazás gombra. Egy ablak nyílik meg a kész beágyazási kóddal — a Widget ID már bele van töltve. Másold ki.

A kódrészlet így néz ki (a YOUR_WIDGET_ID helyén a saját azonosítód szerepel):

<script>
!function (Yaplet, t, i) {
  if (!(Yaplet = window.Yaplet = window.Yaplet || []).invoked) {
    var widgetId = "YOUR_WIDGET_ID";
    for (window.YapletActions = [], Yaplet.invoked = !0,
      Yaplet.methods = ["identify","setEnvironment","setTags",
        "attachCustomData","setCustomData","removeCustomData",
        "clearCustomData","registerCustomAction","trackEvent","log",
        "preFillForm","showSurvey","sendSilentCrashReport",
        "startFeedbackFlow","startBot","setAppBuildNumber",
        "setAppVersionCode","setApiUrl","setFrameUrl","isOpened",
        "open","close","on","setLanguage","setOfflineMode",
        "initialize","disableConsoleLogOverwrite","logEvent","hide",
        "enableShortcuts","showFeedbackButton","destroy","getIdentity",
        "isUserIdentified","clearIdentity","openConversations",
        "openConversation","openHelpCenterCollection",
        "openHelpCenterArticle","openHelpCenter","searchHelpCenter",
        "openNewsArticle","openChecklists","startChecklist","openNews",
        "openFeatureRequests","isLiveMode","setFlowConfig"],
      Yaplet.f = function (e) {
        return function () {
          var t = Array.prototype.slice.call(arguments);
          window.YapletActions.push({ e: e, a: t });
        }
      }, t = 0; t < Yaplet.methods.length; t++)
        Yaplet[i = Yaplet.methods[t]] = Yaplet.f(i);
    Yaplet.load = function (id) {
      var t = document.getElementsByTagName("head")[0],
          i = document.createElement("script");
      i.type = "text/javascript"; i.async = !0;
      i.src = "https://yaplet.com/api/sdk/loader?widgetId=" + encodeURIComponent(id);
      t.appendChild(i);
    };
    Yaplet.load(widgetId);
    Yaplet.initialize(widgetId);
  }
}();
</script>

3. Illeszd be a weboldaladba

Illeszd be a kódrészletet közvetlenül a záró </body> tag elé minden olyan oldalon, ahol meg szeretnéd jeleníteni a widgetet. A legtöbb oldalnak van közös lábléc-sablona vagy layout-fájlja, ahol elég egyszer hozzáadni.

Ha JavaScript-keretrendszert használsz, íme a lehetséges elhelyezési módok:

• Sima HTML / statikus oldalak — illeszd be közvetlenül a HTML-fájlba a </body> elé.
• React / Next.js — add hozzá a gyökér layout-fájlhoz (app/layout.tsx vagy pages/_document.tsx), vagy töltsd be egy legfelső szintű useEffect-ben.
• Vue / Nuxt — helyezd el az app.vue-ban, vagy konfiguráld a nuxt.config.ts-ben az app.head.script opcióval.
• Google Tag Manager — adj hozzá egy Egyéni HTML taget a kódrészlettel, és állítsd be, hogy minden oldalon fusson.

4. Ellenőrizd a működést

Töltsd újra az oldaladat. A widget indítógombjának meg kell jelennie az oldal jobb alsó sarkában. Kattints rá, és ellenőrizd, hogy a widget megfelelően nyílik meg.

Ha az indítógomb nem jelenik meg, nézd meg a telepítés ellenőrzésével foglalkozó cikket – ott találsz lépésről lépésre haladó ellenőrzőlistát és gyakori megoldásokat.

Hogyan működik a kódrészlet

A kódrészlet három dolgot csinál:

1. Létrehoz egy globális window.Yaplet sort, így a Yaplet.identify()-t és más metódusokat az SDK letöltése előtt is meghívhatod.
2. Aszinkron módon betölti a Yaplet SDK-t a yaplet.com-ról – ez soha nem akadályozza az oldal renderelését.
3. Meghívja a Yaplet.initialize(widgetId) függvényt a widget elindításához.

Maga az SDK a widget felhasználói felületét az embed.yaplet.com-ról tölti be, egy iframe-ben, így nem befolyásolhatja az oldalad stílusait vagy scriptjeit.

Mi a következő lépés?

Ha a widget már megjelenik az oldaladon, azonosítsd a bejelentkezett felhasználóidat, hogy nevük, e-mail-címük és beszélgetési előzményeik munkameneteken át megmaradjanak: Azonosítsd a bejelentkezett felhasználóidat egyedi adatokkal.