Jak osadzić chatbota na dowolnej witrynie

Masz wytrenowanego chatbota. Teraz musisz umieścić go na swojej witrynie. Agentkit obsługuje cztery metody osadzania, a właściwy wybór zależy od Twojej platformy, konfiguracji technicznej i tego, ile kontroli potrzebujesz. Ten przewodnik omawia wszystkie cztery opcje wraz z przykładami kodu, szczegółami konfiguracji i instrukcjami specyficznymi dla poszczególnych platform.

Metody osadzania w skrócie

Większość użytkowników powinna zacząć od widżetu JS. Działa na dowolnej platformie, ładuje się asynchronicznie i zajmuje mniej niż pięć minut konfiguracji.

Zanim zaczniesz

Każda metoda osadzania wymaga wytrenowanego chatbota. Jeśli jeszcze go nie masz:

1. Zarejestruj się w Agentkit (za darmo).
2. Utwórz chatbota i wytrenuj go na swoich treściach, korzystając z adresów URL witryny, dokumentów, par Q&A lub tekstu.
3. Przetestuj go w Playground, aż odpowiedzi będą trafne.
4. Pobierz kod do osadzenia z zakładki Publikuj w panelu.

Wskazówki dotyczące trenowania znajdziesz w artykule Jak wytrenować chatbota na treści swojej witryny.

Metoda 1: widżet JavaScript

Widżet JS to uniwersalna metoda osadzania. Jeden tag skryptu, umieszczony przed zamykającym tagiem </body>, ładuje dymek czatu na Twojej witrynie. Działa na każdej platformie zezwalającej na niestandardowy JavaScript: statycznych witrynach HTML, platformach CMS, kreatorach stron docelowych i aplikacjach webowych.

Podstawowa instalacja

Skopiuj ten tag skryptu i umieść go przed zamykającym tagiem </body> na swojej stronie:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

Zastąp your-chatbot-id rzeczywistym ID ze swojego panelu Agentkit. Atrybut async zapewnia, że skrypt ładuje się bez blokowania strony.

To wszystko, czego potrzebujesz do działającego chatbota. Widżet pojawia się jako dymek czatu w prawym dolnym rogu. Odwiedzający klikają go, aby otworzyć rozmowę.

Konfiguracja za pomocą atrybutów danych

Możesz dostosować zachowanie widżetu, dodając atrybuty danych do tagu skryptu:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  data-position="bottom-right"
  data-theme="light"
  async>
</script>

Dostępne atrybuty danych

Większość personalizacji wizualnej (kolory, wiadomość powitalna, branding) jest kontrolowana z poziomu panelu Agentkit, a nie atrybutów danych. Dzięki temu Twój kod do osadzenia pozostaje prosty, a Ty możesz aktualizować ustawienia bez zmiany kodu na swojej witrynie.

Jak ładuje się widżet

Skrypt widżetu jest lekki i ładuje się asynchronicznie. Oto co się dzieje:

1. Twoja strona ładuje się normalnie. Atrybut async sprawia, że skrypt nie blokuje renderowania.
2. Skrypt pobiera się z naszego CDN i inicjalizuje.
3. Na stronie pojawia się dymek czatu.
4. Gdy odwiedzający kliknie dymek, ładuje się pełny interfejs czatu.
5. Wiadomości są wysyłane do API Agentkit i przesyłane strumieniowo z powrotem w czasie rzeczywistym.

Wstępny skrypt jest niewielki. Pełny interfejs czatu ładuje się dopiero, gdy odwiedzający wejdzie w interakcję z dymkiem, więc wpływ na szybkość Twojej strony jest minimalny.

Instalacja widżetu specyficzna dla platformy

Widżet JS działa na wszystkich platformach, ale kroki dodawania skryptu różnią się w zależności od platformy. Oto szybkie linki do przewodników dla konkretnych platform:

Metoda 2: komponent React

Jeśli budujesz w React, Next.js, Remix lub Gatsby, komponent React daje Ci ściślejszą integrację niż zwykły tag skryptu. Otrzymujesz konfigurację opartą na właściwościach (props), typy TypeScript i możliwość podpięcia się pod zdarzenia chatbota.

Instalacja

Zainstaluj pakiet React Agentkit:

npm install @agentkit/react

Podstawowe użycie

import { AgentitkChat } from '@agentkit/react';

function App() {
  return (
    <AgentitkChat chatbotId="your-chatbot-id" />
  );
}

Renderuje to ten sam dymek czatu co widżet JS, ale jako komponent React w drzewie komponentów Twojej aplikacji.

Właściwości (props)

Integracja z Next.js

W projekcie Next.js opartym na App Router dodaj chatbota do głównego layoutu, aby pojawiał się na wszystkich stronach:

// app/layout.tsx
import { AgentitkChat } from '@agentkit/react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <AgentitkChat chatbotId="your-chatbot-id" />
      </body>
    </html>
  );
}

W przypadku Pages Router dodaj komponent do _app.tsx.

Kiedy używać komponentu React, a kiedy widżetu JS

Jeśli korzystasz z React, użyj komponentu React. Do wszystkiego innego użyj widżetu JS.

Metoda 3: iframe

Metoda iframe osadza chatbota jako samodzielną stronę w ramce na Twojej witrynie. Jest przydatna w środowiskach, gdzie wstrzykiwanie JavaScript jest ograniczone, albo tam, gdzie chcesz wyświetlić chatbota jako element wbudowany w treść, a nie jako pływający dymek.

Podstawowe osadzenie iframe

<iframe
  src="https://cdn.agentkit.ai/embed/your-chatbot-id"
  style="width: 100%; height: 600px; border: none;"
  allow="clipboard-write">
</iframe>

Wyświetla to pełny interfejs czatu wbudowany bezpośrednio na Twojej stronie, a nie jako pływający dymek.

Kiedy używać iframe

Konfiguracja iframe

Dostosuj iframe za pomocą parametrów URL:

<iframe
  src="https://cdn.agentkit.ai/embed/your-chatbot-id?theme=dark"
  style="width: 400px; height: 600px; border: none; border-radius: 12px;"
  allow="clipboard-write">
</iframe>

Dopasowanie rozmiaru iframe

Iframe nie zmienia rozmiaru automatycznie. Kontrolujesz jego wymiary za pomocą CSS:

• Czat na pełną szerokość: width: 100%; height: 600px;
• Czat w panelu bocznym: width: 400px; height: 100vh; umieszczony w układzie bocznym.
• Kompaktowy widżet: width: 350px; height: 500px; na mniejszy obszar wbudowany.

Ograniczenia osadzania przez iframe

Dla większości witryn widżet JS jest lepszym wyborem. Używaj iframe tylko wtedy, gdy widżet JS nie wchodzi w grę albo gdy konkretnie chcesz wbudowanego doświadczenia czatu.

Metoda 4: wtyczka WordPress

Witryny WordPress mogą korzystać z widżetu JS za pomocą dowolnej z opisanych wyżej metod, ale istnieje też dedykowane podejście z użyciem wtyczek do fragmentów kodu, które upraszcza proces dla użytkowników nietechnicznych.

Szybka konfiguracja z WPCode

1. Zainstaluj wtyczkę WPCode (bezpłatna, ponad 2 mln instalacji) z Wtyczki, a następnie Dodaj nową.
2. Przejdź do Code Snippets, a następnie Header & Footer.
3. Wklej tag skryptu Agentkit w sekcji Footer.
4. Zapisz.

Chatbot pojawia się teraz na każdej stronie. WPCode obsługuje też logikę warunkową, więc możesz wyświetlać chatbota tylko na wybranych stronach.

Inne metody dla WordPress

Pełny przewodnik po WordPressie wraz z rozwiązywaniem problemów znajdziesz w artykule Jak dodać chatbota do WordPressa.

Opcje personalizacji

Niezależnie od tego, której metody osadzania używasz, większość personalizacji odbywa się w panelu Agentkit. Oznacza to, że możesz zmieniać ustawienia bez dotykania kodu do osadzenia.

Personalizacja wizualna

Personalizacja behawioralna

Kwestie bezpieczeństwa

Osadzając chatbota na swojej witrynie, pamiętaj o tych ustawieniach bezpieczeństwa.

Ograniczenie domeny

Zawsze ustaw ograniczenie domeny w ustawieniach chatbota. Dzięki temu chatbot wczytuje się wyłącznie na Twoich autoryzowanych domenach. Bez tego każdy, kto znajdzie ID Twojego chatbota, mógłby osadzić go na własnej witrynie i wykorzystywać Twój limit wiadomości.

Przejdź do Ustawienia w panelu Agentkit i dodaj każdą domenę, na której chatbot ma działać:

• Twoją główną domenę (np. yourbusiness.com)
• Dowolne subdomeny (np. support.yourbusiness.com)
• Domeny deweloperskie lub testowe, jeśli musisz testować

Ograniczanie liczby żądań

Ograniczanie liczby żądań ogranicza liczbę wiadomości, jakie pojedynczy odwiedzający może wysłać w ramach jednej sesji. Zapobiega to nadużyciom i pomaga zarządzać Twoim limitem wiadomości. Limit 15–25 wiadomości na sesję jest rozsądny dla większości witryn.

Content Security Policy

Jeśli Twoja witryna korzysta z nagłówków Content Security Policy, musisz dodać domeny Agentkit do białej listy. Dodaj do swojego CSP:

• script-src: cdn.agentkit.ai
• frame-src: cdn.agentkit.ai (jeśli używasz metody iframe)
• connect-src: *.agentkit.com (dla wywołań API)

Rozwiązywanie typowych problemów z osadzaniem

Chatbot się nie pojawia

Chatbot pojawia się, ale nie odpowiada

• Sprawdź dane treningowe. Niewytrenowany chatbot nie ma z czego czerpać.
• Zweryfikuj ID chatbota. Nieprawidłowe ID oznacza, że widżet się ładuje, ale nie może znaleźć chatbota.
• Sprawdź ograniczenie domeny. Jeśli Twoja domena nie znajduje się na dozwolonej liście, chatbot nie odpowie.
• Sprawdź limit swojego planu. Jeśli wykorzystałeś cały miesięczny limit wiadomości, chatbot przestanie odpowiadać do następnego cyklu rozliczeniowego.

Chatbot koliduje z innymi widżetami

Jeśli inny widżet czatu (Intercom, Crisp, Drift) nakłada się na Twój, usuń drugi widżet, zmień pozycję Agentkit na bottom-left albo użyj metody iframe, aby umieścić chatbota w treści zamiast jako pływający dymek.

Wybór odpowiedniego planu do Twojego osadzenia

Rozliczenie roczne pozwala zaoszczędzić około 20% na wszystkich planach płatnych. Zacznij od planu Free, aby przetestować osadzenie, a następnie przejdź na wyższy plan, gdy Twój ruch będzie wymagał więcej wiadomości.

Kolejne kroki

Gdy chatbot jest już osadzony, praca przechodzi od instalacji do optymalizacji:

1. Monitoruj rozmowy w panelu Agentkit przez pierwszy tydzień. Zidentyfikuj pytania, z którymi chatbot ma problem.
2. Dodaj dane treningowe dla słabych punktów. Pary Q&A to najszybszy sposób na naprawienie konkretnych problemów z odpowiedziami.
3. Włącz zbieranie leadów, aby zbierać e-maile odwiedzających podczas rozmów. Zobacz przewodnik po generowaniu leadów.
4. Połącz się ze swoimi narzędziami przez Zapier, webhooki lub REST API. Zobacz przewodnik po integracjach.
5. Skonfiguruj ograniczenie domeny i ograniczanie liczby żądań dla bezpieczeństwa i zarządzania limitem wiadomości.

Instrukcje specyficzne dla platform znajdziesz w szczegółowych przewodnikach:

• WordPress
• Shopify
• Squarespace
• Wix
• Webflow

Zbuduj swojego chatbota za darmo →

Karta kredytowa nie jest wymagana.