Osadzanie widżetu

Dodaj chatbota AI do dowolnej witryny w kilka sekund, korzystając z naszego prostego kodu osadzania.

Szybki start

Dodaj ten kod przed zamykającym tagiem </body>:

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

To wszystko! Chatbot jest teraz dostępny na Twojej stronie.

Znalezienie identyfikatora chatbota

1. Przejdź do ustawień chatbota
2. Przejdź do zakładki Embed
3. Skopiuj kod osadzania (zawiera Twój ID)

Dostosowywanie widżetu

Wygląd i zachowanie widżetu konfigurujesz w panelu administracyjnym — nie w kodzie osadzania. Przejdź do Dashboard → Chatbots → [your chatbot] → Widget, aby dostosować:

• Pozycja — dół-po prawej, dół-po lewej lub inline
• Kolory — kolor podstawowy, tło i kolor tekstu oraz promień obramowania
• Rozmiar — szerokość i wysokość widżetu

Aby automatycznie otwierać czat po opóźnieniu konfigurowalnym, włącz Auto-Open w zakładce Behavior tej samej strony ustawień.

Zmiany są stosowane automatycznie na stronie — nie trzeba aktualizować kodu osadzania. Zobacz przewodnik Widget Customization dla wszystkich dostępnych opcji.

Język widżetu jest wykrywany automatycznie na podstawie przeglądarki każdego odwiedzającego, w oparciu o języki włączone w zakładce Languages chatbota.

Widżet FAQ

Wyświetlaj FAQ jako akordeon na dowolnej stronie:

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

Widżet FAQ pokazuje opublikowane FAQ z Twojego chatbota. Kolory i stylizacja (kolor podstawowy, tło i kolor tekstu, promień obramowania) są konfigurowane w Dashboard → FAQs → Settings.

Opcje widżetu FAQ

Przykład filtru kategorii

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

Optymalizacja mobilna

Widżet czatu jest w pełni zoptymalizowany pod urządzenia mobilne:

• Układ na pełną szerokość na małych ekranach
• Animacja wysuwania przy otwieraniu
• Obsługa klawiatury iOS (widżet dostosowuje się do ekranu klawiatury)
• Obsługa safe-area dla wycięcia iPhone oraz indikatorów ekranu głównego
• Większe elementy dotykowe dla lepszej użyteczności
• Rozmiar czcionki w polu wejściowym zapobiega automatycznemu powiększaniu w iOS

Przewodniki specyficzne dla platform

WordPress

Zalecane: Użyj oficjalnej wtyczki ChatReact WordPress Plugin dla najprostszej integracji z blokami Gutenberg, widgetami Elementor i shortcode'ami.

Alternatywa: Ręczne osadzenie za pomocą wtyczki „Header/Footer Scripts”:

1. Zainstaluj dowolną wtyczkę „Header/Footer Scripts”
2. Dodaj kod osadzania do sekcji stopki
3. Zapisz i opublikuj

Shopify

Zalecane: ChatReact Shopify App

Zainstaluj aplikację ChatReact ze sklepu Shopify App Store dla najprostszej integracji:

1. Zainstaluj aplikację ChatReact w panelu Shopify
2. Wprowadź swoje ID chatbota w ustawieniach aplikacji
3. Widżet czatu pojawi się automatycznie na sklepie
4. Zarządzaj przypisaniami widżetu per strona lub włącz go wszędzie

Aplikacja obsługuje również widżety Form i FAQ jako App Blocks w edytorze motywu.

Alternatywa: Ręczne osadzenie

1. Wejdź do Online Store → Themes → Edit Code
2. Otwórz theme.liquid
3. Dodaj kod przed </body>
4. Zapisz

Webflow

1. Przejdź do Project Settings → Custom Code
2. Dodaj do Footer Code
3. Opublikuj stronę

Next.js / React

Użyj 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

Dodaj do głównego App.vue lub 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

Interakcja z widżetem programowo:

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

Testowanie

Tryb podglądu

Przed osadzeniem na żywo:

1. Użyj funkcji Preview w panelu administracyjnym
2. Przetestuj różne scenariusze
3. Zweryfikuj poprawność odpowiedzi

Rozwiązywanie problemów

Widżet się nie pojawia

1. Sprawdź konsolę przeglądarki pod kątem błędów
2. Zweryfikuj, czy ID chatbota jest poprawne
3. Upewnij się, że chatbot jest aktywny (nie wyłączony)
4. Sprawdź, czy blokery reklam nie ingerują
5. Sprawdź wykorzystanie limitów planu — widżet zostaje wstrzymany, gdy miesięczny limit planu zostanie osiągnięty

Wtyczki cache i optymalizujące skrypty

Niektóre wtyczki do cache lub optymalizacji skryptów przepisują adresy URL skryptów, co może uniemożliwić załadowanie widżetu. Jeśli tak się stanie, dodaj jawny adres API do tagu skryptu:

<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 sam atrybut działa dla skryptów widżetu FAQ i formularza.

Konflikty stylów

Jeśli CSS Twojej strony koliduje:

• Widżet ogranicza swoje style do własnego kontenera i używa reguł o wysokim priorytecie, aby przeciwstawić się konfliktom
• Sprawdź wartości z-index elementów nachodzących na widżet
• Unikaj szerokich reguł !important w CSS strony, które celują w ogólne elementy

Wydajność

Widżet zaprojektowano tak, aby miał minimalny wpływ:

• Ładuje się asynchronicznie — nigdy nie blokuje renderowania strony
• Lekki: około 30 KB skompresowanego transferu

Kolejne kroki

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — osadź samodzielne formularze za pomocą widżetu formularza