Osadzanie widżetu

Dodanie AI chatbota na dowolną stronę internetową zajmuje kilka sekund dzięki naszemu prostemu kodowi do osadzenia.

Szybki start

Wstaw ten kod przed zamykającym znacznikiem </body>:

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

To wszystko! Twój chatbot jest teraz aktywny na stronie.

Znajdowanie ID Chatbota

1. Przejdź do ustawień chatbota
2. Przejdź do zakładki Embed
3. Skopiuj kod osadzenia (zawiera Twoje ID)

Lub znajdź ID w adresie URL panelu: /dashboard/company/chatbots/[CHATBOT_ID]

Opcje widżetu

Dostosuj widget za pomocą atrybutów data:

Opcje podstawowe

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

Nadpisywanie kolorów

Nadpisz ustawienia dashboardu za pomocą kolorów inline:

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

Widżet FAQ

Wyświetlanie FAQ w postaci akordeonu na dowolnej stronie:

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

Widżet FAQ wyświetla opublikowane FAQ z Twojego chatbota.

Opcje widżetu FAQ

Przykład filtrowania 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 dla urządzeń mobilnych:

• Layout na pełną szerokość na małych ekranach
• Animacja wysuwania przy otwieraniu
• Obsługa klawiatury iOS (widżet dostosowuje się do klawiatury ekranowej)
• Wsparcie dla safe-area na notch iPhone'a i wskaźnik home
• Większe cele dotykowe dla lepszej użyteczności
• Rozmiar czcionki input zapobiega auto-zoomowaniu na iOS

Przewodniki specyficzne dla platform

WordPress

Zalecane: Użyj oficjalnego pluginu WordPress ChatReact — najłatwiejsza integracja z blokami Gutenberg, widżetami Elementor i shortcodes.

Alternatywnie: Ręczne osadzenie przez wtyczkę "Header/Footer Scripts":

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

Shopify

Zalecane: Aplikacja ChatReact Shopify

Zainstaluj aplikację ChatReact ze Shopify App Store, aby uzyskać najłatwiejszą integrację:

1. Zainstaluj aplikację ChatReact w panelu administracyjnym Shopify
2. Wprowadź swój Chatbot ID w ustawieniach aplikacji
3. Widżet czatu automatycznie pojawi się w Twoim sklepie
4. Zarządzaj przypisaniami widżetu na poszczególne strony lub włącz go wszędzie

Aplikacja obsługuje również widżety formularzy i FAQ jako App Blocks w Theme Editor.

Alternatywnie: Ręczne osadzenie

1. Przejdź 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 witrynę

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

Steruj widżetem programowo:

// Otwórz czat
ChatReact.open();

// Zamknij czat
ChatReact.close();

// Przełącz otwarty/zamknięty
ChatReact.toggle();

// Wyślij wiadomość
ChatReact.sendMessage('Hello!');

// Ustaw dane użytkownika
ChatReact.setUser({
  name: 'John Doe',
  email: '[email protected]'
});

Testowanie

Tryb podglądu

Przed osadzeniem na żywo:

1. Użyj funkcji Podgląd w swoim panelu
2. Przetestuj różne scenariusze
3. Zweryfikuj, czy odpowiedzi są poprawne

Rozwój lokalny

Do testów lokalnych użyj adresów URL localhost:

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

Rozwiązywanie problemów

Widżet nie pojawia się

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 bloker reklam nie zakłóca działania

Konflikty stylów

Jeśli CSS Twojej witryny powoduje konflikty:

• Widżet używa shadow DOM do izolacji
• Sprawdź wartości z-index
• Upewnij się, że nie ma nadpisujących reguł z !important

Wydajność

Widżet został zaprojektowany tak, aby minimalizować wpływ:

• Ładowanie leniwe (lazy loaded)
• < 50KB łącznej wielkości
• Nieblokujący
• Agresywnie buforowany

Kolejne kroki

• Wtyczka WordPress →
• Integracja Shopify →
• Zarządzanie FAQ →