Zainstaluj widget w HTML, React lub Next.js
Dodaj skrypt widgetu właściwy dla projektu do wspólnej sekcji head strony utworzonej w HTML, React lub Next.js.
Na tej stronie
Zainstaluj skrypt Zeltino jeden raz we wspólnej sekcji head dokumentu, aby wczytywał się na każdej publicznej podstronie, na której odwiedzający powinni mieć dostęp do czatu.
Skopiuj skrypt projektu#
- Otwórz Settings > Chat widget > Installation.
- Dodaj lub wybierz dokładną domenę strony.
- Wybierz HTML / JavaScript, React lub Next.js.
- Wybierz Copy script.
Zawsze używaj kodu pokazanego dla wybranego projektu. Nie kopiuj kodu instalacyjnego z innego projektu ani środowiska.
Strona HTML lub JavaScript#
Otwórz wspólny szablon HTML lub układ używany przez publiczną stronę. Wklej kod przed zamykającym znacznikiem </head>, a następnie opublikuj zaktualizowane pliki.
Jeśli każda podstrona ma osobny plik HTML, dodaj skrypt do każdej, na której widget ma się wczytywać, albo przenieś go do wspólnego układu.
Strona React#
W standardowej aplikacji React dodaj skrypt do szablonu dokumentu — zwykle public/index.html — przed </head>. Jeśli framework korzysta z innego głównego szablonu HTML, użyj jego ogólnoserwisowej sekcji head. Zbuduj i wdróż aplikację.
Nie umieszczaj nowej kopii skryptu w każdym renderowanym komponencie.
Strona Next.js#
Dodaj skrypt do globalnego układu aplikacji:
- w App Router użyj wspólnego
app/layout.tsxoraz obsługi skryptów frameworka lub zwykłego skryptu w sekcji head; - w Pages Router użyj wspólnej konfiguracji dokumentu, na przykład
pages/_document.tsx.
Upewnij się, że skrypt wczytuje się na wszystkich publicznych podstronach objętych obsługą, a następnie wdróż aplikację.
Zweryfikuj i włącz#
- Otwórz opublikowaną stronę, a nie lokalny adres deweloperski.
- Wróć do Installation i w razie potrzeby wybierz Refresh check.
- Upewnij się, że domena uzyskała status Active.
- Włącz Enable chat widget on this website.
- W prywatnym oknie przeglądarki przetestuj przycisk uruchamiający i pełną rozmowę.
Jeśli domena pozostaje w stanie Verifying, zobacz Rozwiąż problemy z instalacją widgetu.