Aby dodać chatbota Agentkit do Webflow, skopiuj oba wygenerowane tagi skryptu z Channels → Website embed → Chat widget. Umieść je w polu Footer code obowiązującym dla całej witryny w Webflow lub w polu Before </body> jednej strony, a następnie opublikuj. Sprawdź opublikowaną stronę i zadaj pytanie, na które znasz już odpowiedź.
Aktualny kod Agentkit zawiera niewielki bootstrap kolejki, a po nim loader widżetu, z identyfikatorem Twojego chatbota i aktualnym adresem URL skryptu. Skopiuj go w całości z własnego panelu.
Sprawdź dostęp, zanim zaczniesz
Zasady dotyczące kodu niestandardowego w Webflow wymagają Workspace w planie Core, Growth, Agency lub Freelancer albo aktywnego planu Site. Kod musi dodać Site manager lub Designer. Jeśli nie możesz dodać kodu niestandardowego, sprawdź plan i swoją rolę, zanim zmienisz chatbota. Webflow nie gwarantuje, że kod niestandardowy firm trzecich będzie działać, ani nie zapewnia bezpośredniej pomocy w rozwiązywaniu związanych z nim problemów.
Potrzebujesz też chatbota Agentkit z włączonym kanałem Chat widget. Utwórz go, dodaj aktualne źródło w postaci witryny lub zatwierdzone odpowiedzi Q&A i przetestuj kilka pytań w playgroundzie. Sprawdź odpowiedzi, zanim zaprosisz odwiedzających.
Jeśli dodasz adres URL Webflow jako źródło w postaci witryny, sprawdź, co Agentkit faktycznie zaindeksował. Crawl lub mapa witryny mogą wykryć wiele stron, ale wykluczone ścieżki, niedostępna treść i błędy ekstrakcji mogą pozostawić luki. Przewodnik po źródłach w postaci witryny wyjaśnia, jak sprawdzić i zawęzić crawl. Dodaj dokładne źródło Q&A dla odpowiedzi dotyczącej zasad, która wymaga przemyślanego sformułowania.
Umieść kod w jednym miejscu w Webflow
Dla widżetu na każdej stronie:
- Otwórz stronę Channels → Website embed → Chat widget swojego chatbota w Agentkit. Włącz kanał i skopiuj cały wygenerowany blok kodu, łącznie z oboma tagami skryptu.
- W Webflow otwórz Site settings → Custom code. Wklej kod do pola Footer code, które Webflow wstawia przed zamykającym tagiem
</body>. - Zapisz zmiany i opublikuj w domenie, którą zamierzasz testować. Samo zapisanie pola nie aktualizuje witryny widocznej dla odwiedzających.
Dla widżetu na jednej stronie pozostaw Site settings puste. W Webflow Designer otwórz Page settings → Custom code → Before </body> tag tej strony, wklej oba tagi, zapisz i opublikuj. Powtórz tylko na stronach, które potrzebują widżetu. Webflow wstawia kod strony po kodzie witryny, więc trzymaj fragment w jednym miejscu, aby ułatwić zmiany i rozwiązywanie problemów.
Przewodnik instalacji Webflow zawiera krótszą wersję tych kroków.
Zweryfikuj opublikowaną stronę
Otwórz opublikowaną domenę *.webflow.io lub swoją domenę niestandardową w nowej karcie. Webflow informuje, że kod niestandardowy może działać w podglądzie Designera, ale odwiedzający nie otrzymają zapisanej zmiany, dopóki nie opublikujesz. Testuj rzeczywistą domenę, z której korzystają odwiedzający.
Użyj tej kontroli akceptacyjnej, zanim zaprosisz ruch:
| Kontrola | Oczekiwany wynik |
|---|---|
| Źródło strony | Tag bootstrapu kolejki i tag loadera widżetu z wygenerowanego kodu, zainstalowane w jednym miejscu |
| Widżet | Launcher otwiera się na opublikowanych stronach desktopowych i mobilnych, na których go umieszczono |
| Znana odpowiedź | Pytanie o zatwierdzoną treść zwraca zamierzoną odpowiedź |
| Domena | Testowane domeny staging i niestandardowe są dozwolone, jeśli włączono ograniczenia domen |
Na przykład witryna usługowa może przetestować pytanie „Czy oferujecie wizyty w soboty?” względem zatwierdzonej strony z godzinami otwarcia. Jeśli odpowiedzi brakuje lub jest błędna, popraw źródło lub dodaj dokładną odpowiedź Q&A i powtórz test. Obecność dymka czatu dowodzi jedynie, że widżet został wyrenderowany.
Jeśli launchera nie ma, sprawdź źródło opublikowanej strony pod kątem obu tagów, potwierdź, że Chat widget jest włączony, i sprawdź nieudane żądania sieciowe w przeglądarce. Jeśli nie możesz dodać kodu niestandardowego, wróć do wymagań Webflow dotyczących planu i roli. Jeśli wkleiłeś fragment zarówno w Site settings, jak i w Page settings, usuń jedną kopię i opublikuj ponownie. Jeśli launcher się otwiera, ale odpowiedź zawodzi, sprawdź źródła chatbota i dozwolone domeny, zanim zmienisz kod Webflow.
Po udanej instalacji przejrzyj pierwsze prawdziwe pytania i uzupełnij luki w źródłach. Sprawdź ponownie, gdy zmienisz stronę Webflow lub przełączysz się między stagingiem a swoją domeną niestandardową. Dla panelu wewnątrz treści strony zamiast pływającego launchera użyj osobnego kanału iframe Agentkit.
