A WooCommerce-boltok WordPressen futnak, ezért a Yapletet is a WordPress módján teszed fel: a hivatalos Yaplet Live Chat bővítménnyel (csak a widget azonosítóját kell megadnod), vagy a kód beillesztésével az ingyenes WPCode bővítménnyel. Mindkettő a bolt minden oldalára felteszi a chatet. A menüpontokat a magyar nyelvű WordPress felirataival írjuk.
A lehetőség: a Yaplet Live Chat bővítmény (ajánlott)
Ez ugyanaz a bővítmény, mint bármelyik WordPress-oldalon. A teljes útmutató: A Yaplet telepítése WordPress-oldalra.
1. Telepítsd a bővítményt
A WordPress adminban menj a Bővítmények → Bővítmény hozzáadása menüpontra, és keress rá: Yaplet. A Yaplet Live Chat kártyán („Szerző: IG Services LLC”, ez a Yaplet mögött álló cég) kattints a Telepítés, majd a Bekapcsolás gombra.
2. Add meg a widget azonosítódat
Menj a Beállítások → Yaplet menüpontra, és illeszd be a widget azonosítódat a Widget ID mezőbe. A Yapletben a Márka → (a márkád) → Chat widget → Telepítés útvonalon találod. Ha a fül megkérdezi, min fut a weboldalad, válaszd a WordPress / WooCommerce lehetőséget: ekkor a widget azonosítódat mutatja, egy másolás gombbal. Egyébként az ott látható kódban a widgetId értéke az azonosító, és az oldal webcímének utolsó része is ez.
3. Mentsd, és nézd meg
Kattints a Módosítások mentése gombra, majd nyisd meg a boltodat egy új fülön. A Yaplet chat gombja megjelenik a jobb alsó sarokban.
A bővítmény egyelőre nem rögzíti a munkamenet-visszajátszást. Ha bekapcsoltad a Yapletben (Chat widget → Funkciók), a B lehetőséget használd.
B lehetőség: a kód beillesztése WPCode-dal
Akkor válaszd, ha már használod a WPCode-ot, vagy ha munkamenet-visszajátszást használsz.
1. Telepítsd a WPCode-ot
Menj a Bővítmények → Bővítmény hozzáadása menüpontra, keress rá a WPCode bővítményre („WPCode – Insert Headers and Footers” néven szerepel), telepítsd és kapcsold be.
2. Illeszd be a Yaplet kódot
Másold ki a kódot a Yapletben a Márka → (a márkád) → Chat widget → Telepítés helyről. Ha a fül megkérdezi, min fut a weboldalad, válaszd a Más weboldal lehetőséget. A beillesztett kódnak egy <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>. A WordPressben menj a Code Snippets → Header & Footer menüpontra (a WPCode menüi magyar WordPressben is angolul jelennek meg), illeszd be a kódot a Footer mezőbe, és kattints a Save Changes gombra.
3. Ellenőrizd
Frissítsd a boltodat. A chat gomb minden oldalon megjelenik.
Bejelentkezett vásárlók azonosítása
Add át a WooCommerce vásárlói adatait a Yapletnek, hogy a csapatod valódi neveket és rendelési értékeket lásson az inboxban. 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 állíthatná magáról, hogy az egyik vásárlód, ezért az aláírás nélküli hívásokat elutasítjuk. A WordPress a te szervereden fut, így elő tudja állítani ezt az aláírást.
Először vedd fel az azonosítási kulcsodat a wp-config.php fájlba. A kulcsot 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 gomb mögött:
define('YAPLET_IDENTITY_SECRET', 'ide-masold-a-kulcsot');Ezután add hozzá ezt a témád functions.php fájljához vagy egy egyéni bővítményhez:
add_action('wp_footer', function () {
if (is_user_logged_in()) {
$user = wp_get_current_user();
$customer = new WC_Customer($user->ID);
$user_hash = hash_hmac('sha256', (string) $user->ID, YAPLET_IDENTITY_SECRET);
echo '<script>';
echo 'Yaplet.identify("' . esc_js($user->ID) . '", {';
echo ' name: "' . esc_js($user->display_name) . '",';
echo ' email: "' . esc_js($user->user_email) . '",';
echo ' value: ' . floatval($customer->get_total_spent()) . ',';
echo '}, "' . esc_js($user_hash) . '");';
echo '</script>';
}
});A kulcsot tartsd a wp-config.php fájlban – soha ne másold be témafájlba vagy bárhová, ahonnan a böngésző letöltheti.
Hibaelhárítás
- Két chat gomb látszik — Ne használd egyszerre a Yaplet bővítményt és a WPCode-dal beillesztett kódot; csak az egyiket tartsd meg.
- Gyorsítótár-problémák — Telepítés után töröld a WordPress-gyorsítótárat, a WooCommerce tranziens adatait és a CDN-gyorsítótárat is.
- Konfliktusok más chat-bővítményekkel — Ha korábban másik chat-bővítményt használtál, deaktiváld azt a Yaplet telepítése előtt, hogy elkerüld az indítógomb-konfliktusokat.
Mi a következő lépés?
Ellenőrizd, hogy a widget megfelelően töltődik-e be az áruházadban: Telepítés ellenőrzése.