Widget Embedding

Adja hozzá az AI chatbotját bármely weboldalhoz másodpercek alatt egyszerű beágyazó kódunkkal.

Gyors kezdés

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

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

Ennyi! A chatbotja most már elérhető az Ön weboldalán.

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

1. Lépjen a chatbot beállításaihoz
2. Lépjen az Embed fülre
3. Másolja ki az embed kódot (tartalmazza az azonosítót)

Vagy találja meg az azonosítót a dashboard URL-jében: /dashboard/company/chatbots/[CHATBOT_ID]

Widget beállítások

Testreszabhatja a widgetet data attributes használatával:

Alapvető opciók

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

Color Overrides

Felülírja a dashboard beállításait inline színekkel:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

FAQ Widget

Jelenítse meg a FAQ-kat accordionké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"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

A FAQ widget a chatbotjából közzétett gyakran ismételt kérdéseket (FAQ) mutatja.

FAQ 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 teljes mértékben optimalizált mobileszközökre:

• Teljes szélességű elrendezés kis képernyőkön
• Felcsúszó animáció megnyitáskor
• iOS billentyűzetkezelés (a widget alkalmazkodik a képernyő-billentyűzethez)
• Biztonságos terület támogatás iPhone bevágáshoz és home indikátorhoz
• Nagyobb érintési felületek a jobb használhatóságért
• Beviteli betűméret megakadályozza az iOS automatikus nagyítást

Platform-specifikus útmutatók

WordPress

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

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

1. Telepítsen bármilyen „Header/Footer Scripts” bővítményt
2. Adja hozzá az embed kódot a footer szekcióhoz
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óhoz:

1. Telepítse a ChatReact alkalmazást a Shopify admin panelben
2. Adja meg a Chatbot ID-t az alkalmazás beállításaiban
3. A chat widget automatikusan megjelenik az áruház felületé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 Blockként a Theme Editorban.

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

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

Webflow

1. Menjen a Project Settings → Custom Code
2. Adja hozzá a Footer Code-hoz
3. Publikálja 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 fájlhoz vagy a layoutjához:

<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

Lépjen kapcsolatba a widgettel programozottan:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

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

// Send a message
ChatReact.sendMessage('Hello!');

// Set user data
ChatReact.setUser({
  name: 'John Doe',
  email: '[email protected]'
});

Tesztelés

Preview Mode

Éles beágyazás előtt:

1. Használja a dashboardon található Preview funkciót
2. Tesztelje különböző forgatókönyveket
3. Ellenőrizze, hogy a válaszok pontosak

Helyi fejlesztés

Helyi teszteléshez használjon localhost URL-eket:

<script 
  src="http://localhost:3000/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

Hibakeresés

A Widget Nem Jelenik Meg

1. Nézze meg a böngésző konzolját hibák után
2. Ellenőrizze, hogy a chatbot ID helyes-e
3. Győződjön meg róla, hogy a chatbot aktív (nincs letiltva)
4. Ellenőrizze, hogy nem zavarják-e reklámblokkolók

Stílusütközések

Ha az oldal CSS-e ütközik:

• A Widget shadow DOM-ot használ az izolációhoz
• Ellenőrizze a z-index értékeket
• Ügyeljen rá, hogy ne legyenek !important felülírások

Teljesítmény

A Widgetet minimális hatásra tervezték:

• Lazy loaded
• < 50KB total size
• Nem blokkoló
• Aggresszíven cache-elve

Következő lépések

• WordPress bővítmény →
• Shopify integráció →
• GYIK kezelése →