Vkladanie widgetu

Pridajte svoj AI chatbot na akúkoľvek webovú stránku za sekundy pomocou nášho jednoduchého embed kódu.

Rýchly začiatok

Pridajte tento kód pred zatvárací tag </body>:

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

Hotovo! Váš chatbot je teraz aktívny na vašej webovej stránke.

Ako nájsť ID chatbota

1. Prejdite do nastavení svojho chatbota
2. Prejdite na kartu Embed
3. Skopírujte embed kód (obsahuje vaše ID)

Prispôsobenie widgetu

Vzhľad a správanie widgetu sa konfiguruje v administrácii — nie v embed kóde. Prejdite na Dashboard → Chatbots → [your chatbot] → Widget, aby ste upravili:

• Pozícia — bottom-right, bottom-left, alebo inline
• Farby — primárna, pozadie a farba textu, plus polomer rohov
• Veľkosť — šírka a výška widgetu

Ak chcete automaticky otvoriť chat po nastaviteľnom oneskorení, povoľte Auto-Open na karte Behavior tej istej stránky nastavení.

Zmeny sa aplikujú na vašu stránku automaticky — nie je potrebné aktualizovať embed kód. Pozrite si príručku Widget Customization pre všetky dostupné možnosti.

Jazyk widgetu sa automaticky zistí z prehliadača návštevníka, na základe jazykov, ktoré povolíte v karte Languages vášho chatbota.

FAQ widget

Zobrazte často kladené otázky ako akordeón na akejkoľvek stránke:

<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 vášho chatbota. Farby a štýl (primárna, pozadie a farba textu, polomer rohov) sa konfigurujú v Dashboard → FAQs → Settings.

Možnosti FAQ widgetu

Príklad filtrovania podľa kategórie

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

Mobilná optimalizácia

Chat widget je plne optimalizovaný pre mobilné zariadenia:

• Rozloženie na celú šírku na malých obrazovkách
• Animácia vysunutia pri otváraní
• Spracovanie klávesnice na iOS (widget sa prispôsobí zobrazenej klávesnici)
• Podpora safe-area pre výrez (notch) a indikátor domovskej lišty na iPhone
• Väčšie dotykové plochy pre lepšiu použiteľnosť
• Veľkosť písma v poli zabraňuje automatickému priblíženiu iOS

Platformovo špecifické návody

WordPress

Odporúčané: Použite oficiálny ChatReact WordPress Plugin pre najjednoduchšiu integráciu s Gutenberg blokmi, Elementor widgetmi a shortcodmi.

Alternatíva: Manuálne vloženie cez plugin "Header/Footer Scripts":

1. Nainštalujte ľubovoľný plugin "Header/Footer Scripts"
2. Pridajte embed kód do sekcie footer
3. Uložte a publikujte

Shopify

Odporúčané: ChatReact Shopify App

Nainštalujte aplikáciu ChatReact z Shopify App Store pre najjednoduchšiu integráciu:

1. Nainštalujte ChatReact app vo svojej administrácii Shopify
2. Zadajte svoje Chatbot ID v nastaveniach aplikácie
3. Chat widget sa automaticky zobrazí na vašom obchode
4. Spravujte priradenia widgetu podľa stránky, alebo ho povoľte všade

Aplikácia tiež podporuje Form a FAQ widgety ako App Blocks v Theme Editore.

Alternatíva: Manuálne vloženie

1. Prejdite na Online Store → Themes → Edit Code
2. Otvorte theme.liquid
3. Pridajte kód pred </body>
4. Uložte

Webflow

1. Prejdite do Project Settings → Custom Code
2. Pridajte do Footer Code
3. Publikujte stránku

Next.js / React

Použite komponent 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

Pridajte do vášho hlavného App.vue alebo 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 widgetom programovo:

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

Testovanie

Náhľad (Preview Mode)

Pred vložením naživo:

1. Použite funkciu Preview vo vašom dashboarde
2. Otestujte rôzne scenáre
3. Overte, že odpovede sú presné

Riešenie problémov

Widget sa nezobrazuje

1. Skontrolujte konzolu prehliadača pre chyby
2. Overte, či je ID chatbota správne
3. Uistite sa, že chatbot je aktívny (nie je zakázaný)
4. Skontrolujte, či reklamné blokovače nezasahujú
5. Skontrolujte stav použitia plánu — widget sa pozastaví, keď je dosiahnutý mesačný limit vášho plánu

Cache a optimalizačné pluginy

Niektoré caching alebo pluginy na optimalizáciu skriptov prepíšu URL skriptov, čo môže zabrániť načítaniu widgetu. Ak sa to stane, pridajte do script tagu explicitnú API URL:

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

Ten istý atribút funguje aj pre FAQ a form widget skripty.

Konflikty so štýlmi (Styling Conflicts)

Ak sa CSS vašej stránky dostáva do konfliktu:

• Widget scopeuje svoje štýly do vlastného kontajnera a používa pravidlá s vysokou prioritou, aby odolal konfliktom
• Skontrolujte hodnoty z-index prvkov, ktoré sa môžu prekrývať s widgetom
• Vyhnite sa širokým !important pravidlám v CSS stránky, ktoré cielia na generické elementy

Výkon

Widget je navrhnutý s minimálnym dopadom:

• Načítava sa asynchrónne — nikdy neblokuje render stránky
• Ľahký: približne 30 KB komprimovaný prenos

Ďalšie kroky

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — vložte samostatné formuláre pomocou form widgetu