Telepítés
Add hozzá a Yaplet widgetet bármely weboldalhoz egyetlen kódrészlettel, vagy kövesd a platform-specifikus útmutatót WooCommerce-hez, Shopify-hoz, WordPress-hez és népszerű JavaScript keretrendszerekhez.
Beágyazási kód
A widget hozzáadása az oldaladhoz egyetlen script taget igényel. Illeszd be közvetlenül a záró </body> tag fölé minden oldalon, ahol a widgetet meg szeretnéd jeleníteni.
Keresd meg a beágyazási kódodat
A Yaplet vezérlőpultodon menj a Márka → Chat widget menüpontra, és nyisd meg a Telepítés fület. A fül előbb megkérdezheti, min fut a weboldalad: válaszd ki a platformodat, vagy ha nincs a listában, a Más weboldal lehetőséget, és a fül abban a formában mutatja a kódot, ahogy az adott platformnak kell. Az ott látható kódrészletben már benne van a widgeted azonosítója, a másolás gomb pedig a vágólapodra teszi.
Add hozzá az oldaladhoz
Illeszd be a kódrészletet a weboldalad HTML-jébe, közvetlenül a záró </body> tag fölé:
<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>
<script> sorral kell kezdődnie és egy </script> sorral kell végződnie; ha amit kimásoltál, ehelyett így kezdődik: !function (Yaplet, akkor írd be elé egy új sorba, hogy <script>, utána pedig egy új sorba, hogy </script>. Ha inkább erről az oldalról másolod a kódrészletet, cseréld ki a YOUR_WIDGET_ID értéket a Telepítés fülön látható azonosítóra.Ellenőrizd, hogy működik-e
Töltsd újra a weboldaladat. A jobb alsó sarokban látnod kell a Yaplet indítógombot. Kattints rá a widget megnyitásához és ellenőrizd, hogy minden megfelelően betöltődik.
Yaplet.identify() hívásokat elutasítjuk, ha nem tartalmazzák a felhasználó azonosítójának a szervereden aláírt hashét. Az ehhez tartozó titkos kulcs ugyanazon a Telepítés fülön van, a Személyazonosság ellenőrzése részben. Állítsd be, mielőtt élesíted az identify() hívást, különben a bejelentkezett felhasználóid névtelenek maradnak a beérkezett üzenetek között.Keretrendszer-specifikus telepítés
Ha JavaScript keretrendszert használsz, add hozzá ugyanazt a script taget az alkalmazásod vázához vagy layout komponenséhez:
Illeszd be a beágyazási kódot közvetlenül a HTML fájlodba a </body> elé.
Add hozzá a script taget a gyökér layout fájlodhoz (app/layout.tsx vagy pages/_document.tsx), vagy töltsd be egy useEffect hookkal a legfelső szintű komponensedben.
Helyezd el a scriptet az app.vue-ban vagy a nuxt.config.ts-ben az app.head.script opción keresztül.
Platform útmutatók
Konkrét platformokhoz kövesd a lépésről lépésre haladó útmutatókat:
WordPress
Telepítsd a hivatalos Yaplet Live Chat bővítményt, és add meg a widget azonosítódat — nem kell kódot beillesztened.
WooCommerce
Használd ugyanazt a Yaplet Live Chat bővítményt a boltodon, vagy illeszd be a kódot WPCode-dal.