Dodanie chatbota ChatLab do Twojej witryny Webflow pozwala odwiedzającym wchodzić w interakcję z Twoim asystentem AI bezpośrednio na stronie. Ten przewodnik przeprowadzi Cię przez kroki potrzebne do pobrania kodu do osadzenia (embed) z ChatLab i wklejenia go do Webflow.
Zanim zaczniesz
Zanim zaczniesz, utwórz swojego chatbota i upewnij się, że Twoja witryna lub przestrzeń robocza w Webflow obejmuje dostęp do niestandardowego kodu (custom code). Zobacz wymagania Webflow dotyczące niestandardowego kodu. Potrzebujesz również uprawnień do edycji i publikowania witryny.
Krok 1 - Skopiuj kod embed z ChatLab
- Zaloguj się do ChatLab i wybierz chatbota, którego chcesz osadzić
- Kliknij zakładkę Deploy (Wdrażanie), a następnie wybierz Webflow z panelu platform po prawej stronie
- Wybierz Widget, aby umieścić kod chatbota w sekcji head zgodnie z poniższą instrukcją. Jeśli wolisz stale widoczny czat, wybierz Iframe i postępuj zgodnie z instrukcjami dla iframe poniżej. Zobacz Czym różni się widget od Iframe?, aby sprawdzić porównanie
- Kliknij Copy to clipboard (Kopiuj do schowka)
Krok 2 - Dodaj kod do Webflow
Dodanie kodu w Site Settings (Ustawienia witryny) umieszcza chatbota na każdej stronie Twojej witryny w Webflow.
- Otwórz swój projekt w Webflow Dashboard
- Przejdź do Site settings > Custom code
- Wklej skopiowany kod w sekcji Head Code (Kod sekcji head)
- Kliknij Save Changes (Zapisz zmiany)
- Kliknij Publish, aby opublikować witrynę i zastosować zmiany
Dodawanie tylko do pojedynczej strony
Jeśli chcesz umieścić chatbota na konkretnej stronie zamiast w całej witrynie:
- Otwórz stronę w Webflow Designer
- Kliknij ikonę koła zębatego, aby otworzyć Page Settings (Ustawienia strony)
- Przewiń w dół do sekcji Custom Code
- Wklej kod w polu Head Code
- Zapisz i opublikuj swoją witrynę
Dodawanie stale widocznego elementu iframe
W Webflow Designer umieść element Code Embed (Osadzenie kodu) w miejscu, w którym chcesz wyświetlać chatbota, wklej fragment kodu Iframe z ChatLab i dostosuj jego szerokość oraz wysokość do swojego układu strony. Zapisz i opublikuj witrynę. Kod iframe powinien znaleźć się w treści strony, a nie w sekcji Head Code.
Weryfikacja instalacji
Po opublikowaniu otwórz witrynę Webflow w przeglądarce. W rogu strony powinna pojawić się ikona czatu (w trybie widgetu) lub okno czatu osadzone bezpośrednio na stronie (w trybie iframe). Kliknij ikonę, aby otworzyć czat, i wyślij wiadomość testową, aby upewnić się, że wszystko działa poprawnie.