Dodanie ChatLab do Twojej witryny pozwala odwiedzającym wchodzić w interakcję z Twoim chatbotem AI bezpośrednio na stronie. Ten poradnik wyjaśnia, jak pobrać kod do osadzenia i dodać go do swojej strony internetowej.
Zanim zaczniesz
Utwórz i wytrenuj swojego chatbota przed udostępnieniem go klientom. Do instalacji potrzebujesz również uprawnień do edycji i publikowania witryny. Zobacz Jak utworzyć swojego pierwszego chatbota.
Otwieranie zakładki Deploy
Wybierz swojego chatbota z głównego panelu, a następnie kliknij zakładkę Deploy (Wdróż).
Wybór platformy
Panel Select Platform (Wybierz platformę) po prawej stronie zawiera listę obsługiwanych miejsc docelowych podzielonych na dwie grupy: Website (Strona internetowa) - do umieszczenia chatbota na stronach, nad którymi masz kontrolę, oraz Messaging channels (Kanały komunikacji) - do połączenia go z istniejącym kontem do rozmów. Kliknij pozycję odpowiadającą miejscu, w którym ma się pojawić chatbot, aby zobaczyć dopasowane instrukcje.
Obsługiwane platformy:
- HTML Code - działa z każdą stroną internetową, na której możesz edytować kod HTML
- WordPress - za pomocą oficjalnej wtyczki ChatLab lub ręcznego wstawienia kodu
- Wix - przez Settings > Custom Code
- Webflow - przez Site settings > Custom code, z włączonym dostępem do niestandardowego kodu dla Twojej witryny lub przestrzeni roboczej
- PrestaShop - za pomocą modułu ChatLab dla PrestaShop lub ręcznego wstawienia kodu
- Shopify - za pomocą pliku theme.liquid
- WooCommerce - za pomocą wtyczki do WordPressa lub ręcznego wstawienia kodu
- Abicart - przez Store design > Themes > Site header
- CS-Cart - przez Design > Layouts > Custom HTML code
Kanały komunikacji:
- WhatsApp Business - odpowiada na koncie WhatsApp Business, zobacz WhatsApp dla Biznesu
- Facebook Messenger - odpowiada na wiadomości Twojej strony na Facebooku, zobacz Integracja z Facebook Messenger
- Instagram - odpowiada na wiadomości prywatne na Instagramie, zobacz Integracja z Instagramem
Kanały komunikacji nie korzystają z poniższego kodu do osadzenia. Są one łączone z kontem, które już posiadasz, więc na stronę internetową nie jest wklejany żaden kod.
Dla każdej platformy wyświetlane są instrukcje krok po kroku właściwe dla danej integracji. W przypadku platform posiadających dedykowane artykuły pomocy, na dole pojawia się link View full instructions (Zobacz pełną instrukcję).
Dodawanie za pomocą kodu HTML
Opcja HTML Code działa z każdą witryną, do której kodu źródłowego masz dostęp. Zobaczysz dwie opcje osadzania: Widget oraz Iframe.
Tryb Widget
Zakładka Widget pokazuje kod, który dodaje ikonę czatu do Twojej witryny. Gdy odwiedzający klikną ikonę, otwiera się okno czatu.
- Kliknij zakładkę Widget
- Kliknij Copy to clipboard (Kopiuj do schowka), aby skopiować kod
- Znajdź sekcję
<head>na swojej stronie internetowej - Wklej kod jako ostatni element w sekcji
<head> - Odśwież przeglądarkę, aby sprawdzić, czy ikona chatbota się wyświetla
Tryb Iframe
Zakładka Iframe pokazuje kod, który osadza chatbota bezpośrednio w treści Twojej strony. Chatbot jest zawsze widoczny i może być otoczony innymi elementami witryny.
- Kliknij zakładkę Iframe
- Kliknij Copy to clipboard, aby skopiować kod
- Wklej kod w dowolnym miejscu w kodzie HTML Twojej witryny, w którym ma się pojawić chatbot
- Dostosuj atrybuty
widthiheight, aby dopasować go do swojego układu strony
Nie wiesz, co wybrać? Przeczytaj Jaka jest różnica między widgetem a Iframe?, aby poznać szczegółowe porównanie.
Dodawanie przez WordPress lub WooCommerce
Platformy WordPress i WooCommerce oferują dwie metody instalacji: Plugin Installation (Instalacja przez wtyczkę - zalecana) oraz Manual Installation (Instalacja ręczna).
Instalacja przez wtyczkę (zalecana)
- Kliknij Get the plugin on WordPress.org, a następnie zainstaluj i aktywuj wtyczkę ChatLab.
- Otwórz zakładkę ChatLab w panelu WordPress. W przypadku sklepu WooCommerce pozostaw zaznaczoną opcję WooCommerce integration, aby połączyć również dane sklepu.
- Kliknij Continue, zaloguj się do ChatLab i wybierz swojego chatbota.
- Zakończ łączenie, otwórz opublikowaną witrynę i wyślij wiadomość testową.
Instalacja ręczna
Przełącz się na Manual Installation i skopiuj kod Widget do nagłówka swojej witryny za pomocą wtyczki do wstawiania kodu. W przypadku Iframe użyj bloku HTML w treści strony, który zezwala na kod iframe HTML. Opublikuj stronę i przetestuj czat. Zainstaluj widget tylko raz, wybierając wtyczkę albo ręcznie wklejony fragment kodu.
Szczegółowe informacje znajdziesz w artykule Jak dodać chatbota do witryny WordPress.
Dodawanie przez inne platformy
W przypadku platform Shopify, Wix, Webflow, PrestaShop, Abicart oraz CS-Cart wybierz daną platformę w panelu Select Platform. Każda platforma wyświetla:
- Kod do osadzenia z opcjami Widget i Iframe
- Dedykowane dla platformy instrukcje wklejania krok po kroku
- Link View full instructions prowadzący do pełnego przewodnika po danej platformie
Zgodność z RODO
Jeśli potrzebujesz, aby Twój chatbot ładował się dopiero po wyrażeniu zgody na pliki cookie, zobacz Konfiguracja ChatLab pod kątem zgodności z RODO, gdzie znajdziesz przewodniki integracji z CookieBot, Usercentrics oraz Google Tag Manager.
Content Security Policy (CSP)
Jeśli Twoja strona internetowa korzysta z nagłówków Content Security Policy, musisz zezwolić na domeny ChatLab, aby chatbot mógł działać. Wymagane dyrektywy zależą od tego, czy korzystasz z trybu Widget, czy Iframe.
Tryb Widget
Widget ładuje na Twojej stronie skrypt, który tworzy interfejs czatu. Dołącz poniższe źródła ChatLab do swoich istniejących dyrektyw CSP; nie zastępuj nimi zasad dla reszty witryny:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com 'unsafe-inline';
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Domyślnie widget wstrzykuje niektóre style liniowo (inline). Twoje zasady muszą również autoryzować skrypt konfiguracyjny inline, na przykład za pomocą wartości nonce lub hasha CSP. Zezwól w img-src na źródła obrazów używanych przez Twojego bota i karty produktów; dźwięk oraz inne włączone funkcje mogą wymagać kolejnych źródeł. W przypadku domeny agencyjnej użyj domen z wygenerowanego fragmentu kodu.
CSP Safe Mode - unikanie unsafe-inline
Jeśli polityka bezpieczeństwa Twojej witryny nie pozwala na 'unsafe-inline' w dyrektywie style-src, możesz włączyć CSP Safe Mode (Tryb bezpieczny CSP). Spowoduje to załadowanie arkusza stylów kontenera widgetu z zewnętrznego pliku CSS. Nie autoryzuje to Twojego skryptu konfiguracyjnego inline ani nie gwarantuje, że każdy niestandardowy styl i włączona funkcja spełniają wymogi Twojej polityki.
Aby go włączyć, dodaj window.aichatbotCspSafe = true; przed tagiem skryptu ChatLab:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Po włączeniu CSP Safe Mode przetestuj zasady arkuszy stylów bez 'unsafe-inline'. Punktem wyjścia może być:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com;
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Tryb Iframe
Strona nadrzędna musi zezwalać na źródło podane w skopiowanym adresie URL ramki iframe. W przypadku standardowego hostingu ChatLab dodaj to do istniejącej polityki:
frame-src https://api.chatlab.com;