Vloženie widgetu

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

Rýchly štart

Vložte 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>

To je všetko! Váš chatbot je teraz na Vašej webovej stránke online.

Ako nájsť ID chatbota

1. Prejdite do nastavení Vášho chatbota
2. Otvorte kartu Embed
3. Skopírujte embed kód (obsahuje Vaše ID)

Alebo nájdite ID v URL panela: /dashboard/company/chatbots/[CHATBOT_ID]

Možnosti widgetu

Prispôsobte widget pomocou dátových atribútov:

Základné možnosti

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

Prepísanie farieb

Prepíšte nastavenia dashboardu pomocou inline farieb:

<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 FAQs 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"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

Widget FAQ zobrazuje publikované FAQ z vášho chatbota.

Možnosti FAQ widgetu

Príklad filtrovania kategórií

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

Optimalizácia pre mobilné zariadenia

Chatovací widget je plne optimalizovaný pre mobilné zariadenia:

• Rozloženie na plnú šírku na malých obrazovkách
• Animácia vysúvania pri otvorení
• Spracovanie iOS klávesnice (widget sa prispôsobí klávesnici na obrazovke)
• Podpora bezpečnej oblasti pre iPhone výrez a home indikátor
• Väčšie dotykovéplochy pre lepšiu použiteľnosť
• Veľkosť písma vstupu zabraňuje auto-zoom na iOS

Návody špecifické pre platformu

WordPress

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

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 ChatReact aplikáciu zo Shopify App Store pre najjednoduchšiu integráciu:

1. Nainštalujte ChatReact aplikáciu v Shopify admin paneli
2. Zadajte ID chatbota v nastaveniach aplikácie
3. Chatovací widget sa automaticky zobrazí vo vašom obchode
4. Spravujte priradenie widgetov na stránku, alebo ho aktivujte všade

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

Alternatíva: Manuálne vloženie

1. Prejdite do 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 hlavného App.vue alebo do rozloženia:

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

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

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

Testovanie

Režim náhľadu

Pred nasadením naživo:

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

Lokálny vývoj

Pre lokálne testovanie použite URL adresy s localhost:

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

Riešenie problémov

Widget sa nezobrazuje

1. Skontrolujte konzolu prehliadača pre chyby
2. Overte, že ID chatbota je správne
3. Uistite sa, že chatbot je aktívny (nie je deaktivovaný)
4. Skontrolujte, či nezasahujú ad blockery

Konflikty so štýlmi

Ak sa CSS vášho webu dostáva do konfliktu:

• Widget používa shadow DOM pre izoláciu
• Skontrolujte hodnoty z-index
• Uistite sa, že nie sú použité !important prepísania

Výkon

Widget je navrhnutý tak, aby mal minimálny vplyv:

• Lazy loaded
• < 50KB total size
• Non-blocking
• Cached aggressively

Ďalšie kroky

• WordPress doplnok →
• Shopify integrácia →
• Správa FAQ →