Aby osadzić chatbota Agentkit, otwórz stronę Channels → Website embed swojego agenta, włącz Chat widget i skopiuj cały wygenerowany kod. Wklej oba tagi script do stopki całej witryny lub szablonu strony, opublikuj, a następnie załaduj publiczną stronę i wyślij wiadomość testową. Wygenerowany kod zawiera już identyfikator agenta i skonfigurowany adres URL widżetu. Nie zastępuj go fragmentem skopiowanym z artykułu.
Jeśli chcesz umieścić czat wewnątrz sekcji strony, włącz zamiast tego kanał Iframe i skopiuj jego wygenerowany kod iframe. Iframe i pływający widżet to osobne kanały, więc sprawdź przełącznik tego, którego używasz.
Wybierz, gdzie ma pojawić się czat
| Cel | Użyj | Gdzie to znaleźć |
|---|---|---|
| Pływający dymek czatu na całej witrynie | Chat widget | Channels → Website embed → Chat widget |
| Panel czatu wewnątrz strony wsparcia lub kontaktu | Iframe | Channels → Website embed → Iframe |
| Pływający dymek w aplikacji React lub Next.js | Chat widget | Użyj wygenerowanego skryptu w layoucie lub szablonie HTML aplikacji |
| Dymek na całej witrynie WordPress | Chat widget | Umieść oba wygenerowane tagi w polu kodu stopki |
Aplikacja React nie potrzebuje do tej instalacji osobnego pakietu Agentkit React. Przykład umieszczenia w React lub Next.js znajdziesz w przewodniku integracji z React. Przewodnik po iframe pokazuje, jak ustawić rozmiar osadzonego panelu czatu.
Zainstaluj pływający widżet
- Utwórz agenta, dodaj źródło, którego odpowiedzi możesz sprawdzić, i wypróbuj kilka pytań w Playground. Jeśli zaczynasz od zera, utwórz konto Agentkit.
- Otwórz stronę Channels → Website embed agenta. Wybierz Chat widget i włącz ten kanał.
- Skopiuj cały kod tam wyświetlony. Zawiera on mały skrypt bootstrap, a po nim asynchroniczny skrypt widżetu. Zachowaj oba tagi oraz ich wygenerowane wartości
data-chatbotisrcrazem. - Wklej kod do wspólnej stopki witryny lub szablonu HTML, przed zamykającym tagiem
</body>. Dodaj go raz na stronę. Jeśli chcesz mieć widżet tylko na jednej stronie, użyj zamiast tego obszaru kodu tej strony. - Opublikuj witrynę. Otwórz publiczny adres URL w nowym oknie przeglądarki, kliknij dymek i wyślij pytanie, którego odpowiedź możesz porównać z zatwierdzonym źródłem.
Adres URL widżetu zależy od konfiguracji hostingu Agentkit. Dlatego skopiuj aktualny kod ze strony Website embed. Przewodnik po widżecie JavaScript zawiera aktualne kroki konfiguracji, a przewodnik po Embed SDK wyjaśnia, co robi bootstrap.
React i Next.js
Dodaj skrypt do szablonu HTML aplikacji lub wspólnego layoutu, aby ładował się na stronach, na których chcesz mieć dymek. Zachowaj jedną kopię widżetu na każdej renderowanej stronie. Przewodnik integracji z React omawia umieszczanie w layoucie dla React i Next.js. Skopiuj aktualny adres URL i identyfikator agenta z Channels → Website embed; instalacja pakietu nie jest częścią tej konfiguracji.
WordPress
Aby zainstalować na całej witrynie, wklej oba wygenerowane tagi script do pola Footer na ekranie Header & Footer wtyczki WPCode. Zapisz, wyczyść ewentualną pamięć podręczną witryny, a następnie sprawdź publiczną stronę. WordPress może usuwać skrypty z bloku Custom HTML, gdy Twoje konto nie ma uprawnień do ich publikowania, więc jeśli dymek nie pojawia się, sprawdź wyrenderowane źródło strony. Dokładną ścieżkę menu i kontrole znajdziesz w przewodniku instalacji WordPress.
Osadź czat wewnątrz strony
Wybierz Iframe na tej samej stronie Website embed, włącz kanał i skopiuj wygenerowany iframe. Wklej go tam, gdzie ma pojawić się osadzony czat. Jego adres URL wskazuje na hostowaną stronę iframe Twojego agenta. Osadzony panel pozostaje w tej sekcji strony; nie dodaje pływającego dymka do reszty witryny. Nadaj iframe wystarczającą wysokość w swoim layoucie, użyj Visit, aby zobaczyć podgląd hostowanej strony czatu, a potem przetestuj iframe na swojej opublikowanej stronie. Iframe nie udostępnia SDK window.agentkit strony nadrzędnej, więc jeśli potrzebujesz tych poleceń przeglądarki, użyj widżetu skryptowego. Zobacz instrukcje dotyczące iframe.
Sprawdź wynik przed uruchomieniem
Otwórz opublikowaną stronę w nowym oknie przeglądarki i zapisz cztery wyniki:
- Czy dymek lub osadzony panel pojawia się w oczekiwanym miejscu?
- Czy otwiera się i przyjmuje wiadomość?
- Czy jego odpowiedź zgadza się ze źródłem użytym do testu?
- Czy odwiedzający nadal może dotrzeć do Twojej zwykłej ścieżki kontaktu, jeśli agent nie potrafi odpowiedzieć?
Jeśli nic się nie pojawia, najpierw sprawdź, czy kanał jest włączony, i przejrzyj wyrenderowane źródło strony w poszukiwaniu obu wygenerowanych tagów widżetu lub iframe. Sprawdź, czy adres URL skryptu jest bezwzględny i ładuje się w panelu Network przeglądarki. Edytor treści lub pamięć podręczna mogły usunąć lub opóźnić kod. Jeśli interfejs się pojawia, ale wiadomość nie działa, sprawdź ustawienia agenta, dozwolone domeny i status źródła. Przewodnik po ograniczeniach domen wyjaśnia, jak lista dozwolonych domen wpływa na osadzenia.
Zachowaj pytanie testowe i zaobserwowaną odpowiedź w notatkach z uruchomienia. Instalacja widżetu dowodzi, że się ładuje; nie dowodzi, że każda odpowiedź jest poprawna. Po zmianie źródeł lub ustawień ponownie sprawdź pytania, których to dotyczy.
