A Yaplet telepítése Shopify-áruházba

A Shopify lehetővé teszi a téma kódjának közvetlen szerkesztését, így a Yaplet widgetet az összes oldalra feltehetod a beágyazási script fő layout-fájlba való beillesztésével. Nem szükséges appot telepíteni — csak egy másolás-beillesztés a témaszerkesztőben.

1. Szerezd meg a beágyazási kódot

Lépj be a Yaplet dashboardra, és menj a Márka → (a márkád) → Chat widget → Telepítés útvonalra. A script ott van kiírva a fülre, a Widget ID-ddel már kitöltve — másold ki a kódblokkból. Nincs Widgetek lista, nincs Beágyazás gomb és nincs felugró ablak.

Ha még nem hoztál létre widgetet, először olvasd el ezt: A Yaplet telepítése JavaScript-kódrészlettel.

2. Nyisd meg a témakód-szerkesztőt

A Shopify adminban menj az Online áruház → Témák menüpontra. Keresd meg az aktív témádat, kattints a mellette lévő hárompontos menüre (…), és válaszd a Kód szerkesztése opciót.

3. Nyisd meg a theme.liquid fájlt

A kódszerkesztő bal oldali sávjában nyisd meg a Layout mappát, és kattints a theme.liquid fájlra. Ez az a fősablon, amely az áruházad minden oldalát körbefogja.

4. Illeszd be a beágyazási scriptet

Görgess a theme.liquid aljára, és keresd meg a záró </body> taget. Illeszd be a Yaplet beágyazási kódot közvetlenül e tag elé, majd kattints a Mentés gombra.

5. Ellenőrizd, hogy a widget megjelenik-e

Nyisd meg az áruházadat egy új böngészőfülön, és töltsd újra az oldalt. A Yaplet indítógombjának meg kell jelennie az oldal jobb alsó sarkában. Kattints rá az ellenőrzéshez.

Részletesebb ellenőrzésért lásd: Telepítés ellenőrzése.

Hibaelhárítás

• A widget nem jelenik meg mentés után — A Shopify agresszívan gyorsítótárazza az oldalakat. Nyisd meg az áruházadat inkognito módban, vagy fűzd hozzá a ?nocache=1 paramétert az URL-hez a gyorsítótár megkerüléséhez.
• A script egy kommentblokkon belül van — Ellenőrizd, hogy a kód nem egy {%- comment -%} blokkon belül van-e, vagy a záró </body> tag után.
• Több layout-fájl — Egyes témák további layout-fájlokat is használnak (pl. customers/account.liquid). Ha a widget a fiókoldalakon is kell, ott is add hozzá.
• Content Security Policy hibák — Ha a böngészőkonzol CSP-hibákat mutat, lehet, hogy engedélyezni kell a yaplet.com és az embed.yaplet.com doméneket az áruházad CSP-konfigurációjában.

Bejelentkezett vásárlók azonosítása

Ha az áruházadban vannak vásárlói fiókok, átadhatod a Shopify vásárlói adatait a Yapletnek, hogy a csapatod valódi neveket lásson a „Látogató 1234” helyett. A vásárló azonosításához aláírás kell, amely igazolja, hogy az azonosító tényleg az övé — enélkül bárki kiadhatná magát az egyik vásárlódnak, ezért az aláíratlan hívásokat elutasítjuk. A Shopify a Liquid sablonokat a saját szerverein rendereli, és van beépített hmac_sha256 szűrője, így a témád külön alkalmazás nélkül elő tudja állítani ezt az aláírást.

Az azonosítási kulcsodat a Yaplet vezérlőpultjában találod: Márka → (a márkád) → Chat widget → Telepítés → Személyazonosság ellenőrzése — a Titkos kulcs megjelenítése gombbal teheted láthatóvá. Illeszd be az alábbi kódrészletbe, majd add hozzá a blokkot egy Liquid feltétel belsejébe:

{% if customer %}
<script>
  Yaplet.identify("{{ customer.id }}", {
    name: "{{ customer.name }}",
    email: "{{ customer.email }}",
  }, "{{ customer.id | append: '' | hmac_sha256: 'paste-your-secret-here' }}");
</script>
{% endif %}

Ezt a blokkot közvetlenül a fő Yaplet beágyazási script után helyezd el, még a </body> előtt.

Miért biztonságos ez: a Liquid a Shopify szerverein fut, így a látogatókhoz csak a kész aláírás jut el — maga a kulcs soha. Arra viszont figyelj, hogy aki szerkesztheti a témád kódját, az a kulcsot is elolvashatja; ha valaha kiszivárogna, cseréld le ugyanabban a vezérlőpult-szekcióban, és frissítsd a kódrészletet.