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. Nyisd meg a Telepítés fület

A dashboard bal oldali menüjében menj a Márka → (a márkád) → Chat widget → Telepítés útvonalra. Az oldalsávban már nincs Widgetek menüpont, és nincs widgetlista sem, amiből választani kellene — egy márkához legfeljebb egy chat widget tartozik, és ez az. Ha új neked ez a menü, itt magyarázzuk el: mi az a márka a Yapletben.

A Widget ID sehol nem jelenik meg külön mezőként. Az a widgetId érték a fülön látható scriptben, és egyben az oldal saját webcímének utolsó része is (/dashboard/widgets/<widget azonosító>). Több platformútmutató is kéri, ezért érdemes tudni, hol bújik meg.

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

A script közvetlenül a Telepítés fülön jelenik meg, a widget azonosítóddal már kitöltve. Másold ki a kódblokkból — nincs Beágyazás gomb és nincs felugró ablak. Közvetlenül alatta a Személyazonosság ellenőrzése panel található, amire később lesz szükséged, ha azt szeretnéd, hogy a bejelentkezett felhasználóid néven jelenjenek meg, ne névtelen látogatóként.

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",
        "showSurvey","sendSilentCrashReport","startFeedbackFlow",
        "startBot","setAppBuildNumber","setAppVersionCode","setApiUrl",
        "setFrameUrl","isOpened","open","close","on","setLanguage",
        "setOfflineMode","initialize","disableConsoleLogOverwrite",
        "logEvent","hide","enableShortcuts","showFeedbackButton",
        "destroy","getIdentity","isUserIdentified","clearIdentity",
        "openConversation","openHelpCenterCollection",
        "openHelpCenterArticle","openNewsArticle","isLiveMode",
        "setFlowConfig","setAdminUrl","setWSApiUrl"],
      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 — pontosan ezt mondja a Telepítés fül is. 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.