Widget beágyazása

Adja hozzá AI csevegőrobotját bármely weboldalhoz másodpercek alatt a egyszerű beágyazó kóddal.

Gyors kezdés

Adja hozzá ezt a kódot a záró </body> címke elé:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

Ennyi az egész! A csevegőrobot mostantól élő a weboldalán.

A chatbot azonosítójának megtalálása

1. Menjen a chatbot beállításaihoz
2. Navigáljon az Embed fülre
3. Másolja ki a beágyazó kódot (tartalmazza az azonosítót)

A widget testreszabása

A widget megjelenését és viselkedését a vezérlőpulton állíthatja be — nem a beágyazó kódban. Menjen a Dashboard → Chatbots → [your chatbot] → Widget oldalra a következők beállításához:

• Pozíció — jobb alsó, bal alsó vagy inline
• Színek — elsődleges, háttér- és szövegszínek, valamint a keret lekerekítése
• Méret — a widget szélessége és magassága

Ha azt szeretné, hogy a chat automatikusan megnyíljon egy konfigurálható késleltetés után, kapcsolja be az Auto-Open funkciót ugyanazon beállítási oldal Behavior fülén.

A változtatások automatikusan érvénybe lépnek a weboldalán — nincs szükség a beágyazó kód frissítésére. Lásd a Widget Customization útmutatót az összes elérhető opcióért.

A widget nyelvét automatikusan a látogató böngészőjének nyelve alapján észleli, azokat a nyelveket figyelembe véve, amelyeket a chatbot Languages füljén engedélyez.

GYIK widget

Megjelenítheti a gyakran ismételt kérdéseket akkordonként bármely oldalon:

<div id="chatreact-faq"></div>
<script 
  src="https://www.chatreact.ai/embed/faq-widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  async
></script>

A GYIK widget a chatbotban közzétett GYIK-eket jeleníti meg. A színek és a stílus (elsődleges, háttér- és szövegszínek, keret lekerekítése) a Dashboard → FAQs → Settings menüpontban állíthatók be.

GYIK widget opciók

Kategória szűrő példa

<script
  src="https://www.chatreact.ai/embed/faq-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-categories="shipping,returns"
  async
></script>

Mobil optimalizáció

A chat widget teljesen optimalizált mobil eszközökre:

• Teljes szélességű elrendezés kis képernyőkön
• Felcsúszó animáció megnyitáskor
• iOS billentyűzet kezelése (a widget igazodik a képernyőn megjelenő billentyűzethez)
• Safe-area támogatás iPhone notch és home indicator esetén
• Nagyobb érintési célok jobb használhatóságért
• Bemeneti betűméret megakadályozza az iOS automatikus nagyítást

Platform-specifikus útmutatók

WordPress

Ajánlott: Használja a hivatalos ChatReact WordPress Plugin bővítményt a legegyszerűbb integrációhoz Gutenberg blokkokkal, Elementor widgetekkel és shortcode-okkal.

Alternatíva: Manuális beágyazás egy "Header/Footer Scripts" bővítményen keresztül:

1. Telepítsen bármilyen "Header/Footer Scripts" bővítményt
2. Adja hozzá a beágyazó kódot a footer részhez
3. Mentse és publikálja

Shopify

Ajánlott: ChatReact Shopify App

Telepítse a ChatReact alkalmazást a Shopify App Store-ból a legegyszerűbb integrációért:

1. Telepítse a ChatReact alkalmazást a Shopify admin felületén
2. Adja meg a Chatbot ID-t az alkalmazás beállításaiban
3. A chat widget automatikusan megjelenik a boltján
4. Kezelje a widget hozzárendeléseket oldalanként, vagy engedélyezze mindenhol

Az alkalmazás Form és FAQ widgeteket is támogat App Blocks-ként a Theme Editorban.

Alternatíva: Manuális beágyazás

1. Nyissa meg az Online Store → Themes → Edit Code menüpontot
2. Nyissa meg a theme.liquid fájlt
3. Adja hozzá a kódot a </body> elé
4. Mentse el

Webflow

1. Menjen a Project Settings → Custom Code
2. Adja hozzá a Footer Code-hoz
3. Publisholja az oldalt

Next.js / React

Használja a Script komponenst:

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script 
        src="https://www.chatreact.ai/embed/widget.js"
        data-chatbot-id="YOUR_CHATBOT_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue.js

Adja hozzá a fő App.vue-hoz vagy a layouthoz:

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://www.chatreact.ai/embed/widget.js';
  script.dataset.chatbotId = 'YOUR_CHATBOT_ID';
  script.async = true;
  document.body.appendChild(script);
});
</script>

JavaScript API

Programozottan is kommunikálhat a widgettel:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

// Toggle open/closed
ChatReact.toggle();

// Start a fresh conversation
ChatReact.newChat();

// Remove the widget from the page entirely
// (useful in single-page apps, e.g. on route changes)
ChatReact.destroy();

Tesztelés

Előnézeti mód

A beágyazás előtt:

1. Használja a Preview funkciót a vezérlőpulton
2. Teszteljen különböző forgatókönyveket
3. Ellenőrizze, hogy a válaszok pontosak

Hibaelhárítás

A widget nem jelenik meg

1. Ellenőrizze a böngésző konzolját hibákért
2. Győződjön meg róla, hogy a chatbot azonosító helyes
3. Ellenőrizze, hogy a chatbot aktív (nincs letiltva)
4. Ellenőrizze, hogy nem zavarják-e reklámblokkolók
5. Ellenőrizze a fiók használatát — a widget szünetel, ha a havi limitet elérte

Gyorsítótár & optimalizációs bővítmények

Néhány gyorsítótár- vagy script-optimalizáló bővítmény átírhatja a script URL-eket, ami megállíthatja a widget betöltődését. Ha ez történik, adjon meg egy explict API URL-t a script tagben:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-api-url="https://www.chatreact.ai"
  async
></script>

Ugyanez az attribútum működik a FAQ és form widget scriptjeinél is.

Stílusütközések

Ha az oldal CSS-e ütközik:

• A widget a saját konténeréhez szabja a stílusokat és magas prioritású szabályokat használ az ütközések ellen
• Ellenőrizze azokat a z-index értékeket, amelyek átfedhetik a widgetet
• Kerülje a széles körű !important szabályokat az oldal CSS-ében, amelyek általános elemekre vonatkoznak

Teljesítmény

A widget minimális hatásra lett tervezve:

• Aszinkron módon töltődik — soha nem blokkolja az oldal megjelenését
• Kisméretű: kb. 30 KB tömörített átvitel

Következő lépések

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — ágyazza be az önálló űrlapokat a form widgettel