Vkládání widgetu

Přidejte svého AI chatbota na libovolnou webovou stránku během sekund pomocí našeho jednoduchého vložitelného kódu.

Rychlý start

Přidejte tento kód před zavírací značku </body>:

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

To je vše! Váš chatbot je nyní na webu aktivní.

Kde najít ID chatbota

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

Přizpůsobení widgetu

Vzhled a chování widgetu jsou konfigurovány v dashboardu — nikoli ve vloženém kódu. Přejděte na Dashboard → Chatbots → [your chatbot] → Widget, kde upravíte:

• Pozice — bottom-right, bottom-left nebo inline
• Barvy — primární, pozadí a barvy textu, plus poloměr ohraničení
• Velikost — šířka a výška widgetu

Chcete-li otevřít chat automaticky po nastavitelném zpoždění, povolte Auto-Open v záložce Behavior na stejné stránce nastavení.

Změny se na vašem webu projeví automaticky — není třeba aktualizovat vložený kód. Viz průvodce Widget Customization pro všechny dostupné možnosti.

Jazyk widgetu se automaticky detekuje z prohlížeče každého návštěvníka, na základě jazyků, které povolíte v záložce Languages vašeho chatbota.

FAQ widget

Zobrazte často kladené dotazy 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"
  async
></script>

FAQ widget zobrazuje publikované FAQ z vašeho chatbota. Barvy a stylování (primární, pozadí a barvy textu, poloměr ohraničení) se konfigurují v Dashboard → FAQs → Settings.

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

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

Platformně-specifické návody

WordPress

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

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

1. Nainstalujte libovolný plugin "Header/Footer Scripts"
2. Přidejte vložený kód do sekce footer
3. Uložte a publikujte

Shopify

Doporučeno: ChatReact Shopify App

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

1. Nainstalujte aplikaci ChatReact ve vašem Shopify adminu
2. Zadejte vaše Chatbot ID v nastavení aplikace
3. Chat widget se automaticky zobrazí na vašem obchodě
4. Spravujte přiřazení widgetu podle stránek nebo jej povolte všude

Aplikace také podporuje Form a FAQ widgety 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 do Project Settings → Custom Code
2. Přidejte do Footer Code
3. Publikujte web

Next.js / React

Použijte komponentu Script:

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 souboru App.vue nebo do 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

Interagujte s widgetem programově:

// 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();

Testování

Režim náhledu

Před vložením do ostrého provozu:

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

Řešení problémů

Widget se nezobrazuje

1. Zkontrolujte konzoli prohlížeče pro chyby
2. Ověřte, že je ID chatbota správné
3. Ujistěte se, že je chatbot aktivní (není deaktivovaný)
4. Zkontrolujte, zda adblokery nezasahují
5. Zkontrolujte využití vašeho plánu — widget se pozastaví, když dosáhnete měsíčního limitu plánu

Cache a pluginy pro optimalizaci

Některé cache nebo pluginy pro optimalizaci skriptů přepisují URL skriptů, což může zabránit načtení widgetu. Pokud se to stane, přidejte explicitní API URL do script tagu:

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

Stejný atribut funguje i u skriptů FAQ a form widgetu.

Konflikty stylů

Pokud CSS vašeho webu způsobuje konflikty:

• Widget omezuje své styly na vlastní kontejner a používá pravidla s vysokou prioritou, aby odolal konfliktům
• Zkontrolujte hodnoty z-index prvků, které mohou překrývat widget
• Vyhněte se obecně širokým pravidlům !important ve vašem CSS, která cílí na obecné elementy

Výkon

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

• Načítá se asynchronně — nikdy neblokuje vykreslování stránky
• Nízká velikost: přibližně 30 KB komprimovaného přenosu

Další kroky

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — vložte samostatné formuláře pomocí form widgetu