Beágyazás

Egy <script> sor a weboldalad HTML-jébe. Kompatibilis minden modern böngészővel és bármilyen weboldalkészítő platformmal. Az alábbi tabok mutatják a platform-specifikus lépéseket.

Videó — 3:42
Beágyazás Shopify-ra — első kézből
Hamarosan

Az univerzális kód

Minden platformnál ugyanaz a script — csak a beillesztés helye különbözik. A saját tenant-azonosítód a portál „Beágyazás” fülén látszik; az alábbi példában YOUR-TENANT szerepel helyőrzőként.

<script src="https://api.replyo.hu/widget.js"
        data-tenant="YOUR-TENANT"
        defer></script>
Ahova rakd Legjobb a </body> tag előtt, vagy a <head>-ben defer attribútummal — így nem blokkolja az oldal megjelenítését. A defer-t a sniplet már tartalmazza, hagyd meg.

Platform-specifikus útmutató

Bármilyen HTML weboldal

  1. Nyisd meg az oldalad fő HTML fájlját (általában index.html) — vagy a téma theme.liquid-ját, ha framework van rajta.
  2. Keresd meg a záró </body> taget.
  3. Közvetlenül elé illeszd be:
<script src="https://api.replyo.hu/widget.js"
        data-tenant="YOUR-TENANT"
        defer></script>

Mentsd, deploy-old, kész. Pár másodperc múlva megjelenik a chat-ikon a jobb alsó sarokban.

Shopify (Online Store 2.0)

  1. Bejelentkezel a Shopify admin felületre.
  2. Online Store → Themes → Customize → Theme actions → Edit code
  3. A bal oldali fájllistában keresd meg: layout/theme.liquid
  4. Görgess le a </body> taghez (az oldal alja közelében).
  5. Közvetlenül elé illeszd be a snippetet:
<script src="https://api.replyo.hu/widget.js"
        data-tenant="YOUR-TENANT"
        defer></script>
  1. Kattints a Save gombra.
  2. Nyisd meg az áruházad új lapon — a chat ikonnak meg kell jelennie pár másodperc múlva.
App Store alternatíva A Shopify App Store-ban hivatalos „Replyo Chat” app is elérhető, ha nem szeretnél kódot szerkeszteni. Beállítás 1 kattintással, és automatikus frissítés.
Egyedi domain A bot domain-zárt — csak a regisztrált myshop.com domain-ről fogad kérést. Ha shopify.com aldomain-en is futtatnád (pl. fejlesztés alatt), add hozzá a portálon a „Beágyazás → Engedélyezett domainek” listához.

WooCommerce / WordPress

Két lehetőség — a hivatalos plugin az ajánlott, de manuálisan is megy.

A. Hivatalos plugin (ajánlott)

  1. WordPress admin → Plugins → Add New
  2. Keress rá: Replyo Chat, telepítsd és aktiváld.
  3. Settings → Replyo, illeszd be a tenant-azonosítód.
  4. Mentés. Kész.

B. Manuális (Code Snippets plugin)

  1. Telepítsd a Code Snippets plugint (ingyenes).
  2. Snippets → Add New, paste:
add_action('wp_footer', function () {
  echo '<script src="https://api.replyo.hu/widget.js" data-tenant="YOUR-TENANT" defer></script>';
});

Save & Activate. A snippet a footer-be illeszti a script-et minden oldalon.

C. Direkt téma-szerkesztés

Appearance → Theme File Editor → footer.php. Közvetlenül a <?php wp_footer(); ?> elé illeszd a snippetet.

Wix

A Wix nem enged HTML-t a body alá, de van „Custom Code” funkció.

  1. Wix Editor → Settings (a bal felső menüben) → Custom Code
  2. + Add Custom Code
  3. Add Code mezőbe paste-old:
<script src="https://api.replyo.hu/widget.js"
        data-tenant="YOUR-TENANT"
        defer></script>
  1. Add Code to Pages: All Pages
  2. Place Code in: Body — end
  3. Apply → Publish
Wix korlátozás A Custom Code csak az élő (publikált) oldalon fut, a Wix Editor preview-jában NEM. Ha tesztelni szeretnéd, publikálj egy „dev” fiók-oldalt először.

Webflow

  1. Webflow Designer → Project Settings (jobb felső) → Custom Code
  2. Görgess a Footer Code mezőhöz.
  3. Paste-old:
<script src="https://api.replyo.hu/widget.js"
        data-tenant="YOUR-TENANT"
        defer></script>
  1. Save Changes.
  2. A változás éles publish után érvényes — bal felső Publish gomb → Publish to selected domains.
Csak egyetlen oldalra? Ha egy konkrét oldalra (pl. Pricing) szeretnéd csak betölteni a botot, akkor az oldal beállítások (Page Settings → Inside <head> Tag) mezejébe is rakhatod.

WordPress (sima, plugin nélkül)

Lásd a WooCommerce tabot — ugyanaz a folyamat (a WooCommerce egy WordPress plugin, a kódbeillesztés azonos).

Ellenőrzés — működik-e

  1. Nyisd meg az oldaladat privát böngészőben (incognito), hogy ne a cache-elt verziót lásd.
  2. A jobb alsó sarokban kell látnod egy chat-ikont kb. 1–2 másodperccel az oldal betöltése után.
  3. Nyisd meg, írd be: „Sziasztok, mit kínáltok?” — a bot 2–5 másodperc alatt válaszol.
  4. A portálon a Beszélgetések fülön azonnal megjelenik a session.

Hibaelhárítás

Nem jelenik meg a chat-ikon

„Domain not allowed” hibaüzenet

A bot domain-zárt anti-abuse miatt. A portál Beágyazás → Engedélyezett domainek listájához add hozzá az oldalad domain-jét (pl. shop.example.com). Subdomain-eket és www.-prefix-et automatikusan elfogadjuk.

A bot „még nem áll készen” üzenetet ad

Az első crawl tart. 24 óra alatt élesedik az új fiók. Próbáld újra holnap, vagy nézd meg az admin-felületen a Tudásbázis fül státuszát.

Mobilon más, mint desktopon

A bot mindkét fajta nézethez optimalizált, de ha valami eltérés van, írd meg a info@replyo.hu címre az URL-t — pillanatok alatt megnézzük.

Haladó beállítások

Egyedi nyitógomb

Ha a saját egyedi CTA-d (pl. „Beszélj velünk!”) gombbal akarod indítani a chatet:

<button onclick="window.ReplyoOpen && window.ReplyoOpen()">
  Beszélj velünk!
</button>

Page-specifikus prompt

Ha a chat tudja, melyik oldalon van a látogató, jobb választ tud adni. Add hozzá a script TAG elé:

<script>
  window.ReplyoConfig = { pageContext: "Termékoldal — Caffè Frei Mexico 250g" };
</script>
<script src="https://api.replyo.hu/widget.js" data-tenant="YOUR-TENANT" defer></script>

Programatikus consent reset

Ha a látogatónak felkínálsz egy „Privacy settings” gombot, ami visszavonja a chat-konkret consent-et:

window.ReplyoResetConsent && window.ReplyoResetConsent();

Eseménykövetés (analytics)

A widget három custom event-et dispatch-el, ezt bármilyen analytics platformhoz be tudod kötni:

window.addEventListener('replyo:lead-captured', function (ev) {
  // ev.detail = { email, phone, name, source }
  gtag('event', 'lead', { event_category: 'chat' });
});

Készen vagy a beágyazással? Tovább: Testreszabás →