Vkládání widgetu

Přidejte svého AI chatbota na libovolné webové stránky během několika sekund pomocí našeho jednoduchého embed kódu.

Rychlý start

Vložte tento kód před uzavírací značku </body>:

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

Hotovo! Váš chatbot je nyní nasazen na vašich webových stránkách.

Jak najít ID vašeho chatbota

1. Přejděte do nastavení vašeho chatbota
2. Přejděte na záložku Embed
3. Zkopírujte embed kód (obsahuje vaše ID)

Nebo najděte ID v URL vašeho dashboardu: /dashboard/company/chatbots/[CHATBOT_ID]

Widget Options

Přizpůsobte widget pomocí data attributes:

Basic Options

<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

Přepište nastavení dashboardu pomocí inline barev:

<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

Zobrazte FAQ jako akordeon na libovolné stránce:

<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>

Widget FAQ zobrazuje publikované často kladené dotazy (FAQ) z vašeho chatbota.

Možnosti FAQ widgetu

Příklad filtru kategorií

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

Optimalizace pro mobilní zařízení

Chat widget je plně optimalizován pro mobilní zařízení:

• Rozložení na celou šířku na malých obrazovkách
• Animace vysunutí při otevření
• Zpracování klávesnice iOS (widget se přizpůsobí klávesnici na obrazovce)
• Podpora bezpečné oblasti pro výřez a indikátor domů na iPhone
• Větší dotykové cíle pro lepší použitelnost
• Velikost písma vstupu zabraňuje automatickému přiblížení iOS

Průvodci pro konkrétní platformy

WordPress

Doporučeno: Použijte oficiální ChatReact WordPress plugin pro nejjednodušší integraci s bloky Gutenberg, widgety Elementor a shortcody.

Alternativa: Ruční vložení pomocí pluginu „Header/Footer Scripts":

1. Nainstalujte libovolný plugin „Header/Footer Scripts"
2. Přidejte embed code do sekce footer
3. Uložte a publikujte

Shopify

Doporučeno: ChatReact Shopify App

Nainstalujte aplikaci ChatReact z Shopify App Store pro nejjednodušší integraci:

1. Nainstalujte aplikaci ChatReact ve svém Shopify adminu
2. Zadejte ID chatbota do nastavení aplikace
3. Chat widget se automaticky zobrazí na vašem obchodě
4. Spravujte přiřazení widgetu pro jednotlivé stránky nebo povolte všude

Aplikace také podporuje widgety Form a FAQ jako App Blocks v Theme Editoru.

Alternativa: Ruční vložení

1. Přejděte na Online Store → Themes → Edit Code
2. Otevřete theme.liquid
3. Přidejte kód před </body>
4. Uložte

Webflow

1. Přejděte na Project Settings → Custom Code
2. Přidejte do Footer Code
3. Publish site

Next.js / React

Use the Script component:

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

Přidejte do vašeho hlavního App.vue nebo layoutu:

<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

Ovládejte widget programově:

// 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]'
});

Testování

Režim náhledu

Před vložením do provozu:

1. Použijte funkci Preview ve vašem dashboardu
2. Otestujte různé scénáře
3. Ověřte, že odpovědi jsou přesné

Lokální vývoj

Pro lokální testování používejte URL adresy localhost:

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

Řešení problémů

Widget se nezobrazuje

1. Zkontrolujte konzoli prohlížeče kvůli chybám
2. Ověřte, že je správné chatbot ID
3. Ujistěte se, že je chatbot aktivní (není deaktivován)
4. Zkontrolujte, zda nepřekáží adblockery

Konflikty stylů

Pokud se CSS vašeho webu dostává do konfliktu:

• Widget používá shadow DOM pro izolaci
• Zkontrolujte hodnoty z-index
• Ujistěte se, že nejsou použity přepisy !important

Výkon

Widget je navržen pro minimální dopad:

• Lazy loaded
• < 50KB celková velikost
• Non-blocking
• Cached aggressively

Další kroky

• WordPress Plugin →
• Shopify integrace →
• Správa FAQ →