Jak dodać widget ElevenLabs Conversational AI do swojej strony na Squarespace

Chcesz zwiększyć zaangażowanie i zapewnić lepsze wsparcie klienta na swojej stronie Squarespace? ElevenLabs Conversational AI może pomóc.

Ten przewodnik pokaże ci, jak dodać widget do swojej strony Squarespace, niezależnie od tego, czy chcesz go na konkretnej stronie, czy na całej witrynie. Wyjaśni też typowe problemy, które mogą się pojawić, i podpowie, jak je rozwiązać.

Zanim zaczniesz

Przed rozpoczęciem upewnij się, że masz:

1. Konto Squarespace: Dostęp do planu Business lub Commerce, które pozwalają na użycie Code Blocks i Code Injection.
2. Konto ElevenLabs: Skonfiguruj swojego agenta Conversational AI w ElevenLabs i skopiuj kod osadzania (zawierający fragmenty < script > i < div >).
3. Znajomość Squarespace: Podstawowa wiedza o dodawaniu bloków lub nawigacji w ustawieniach Code Injection.

Przewodnik krok po kroku

Krok 1: Przygotuj widget ElevenLabs

1. Zaloguj się na swoje konto ElevenLabs.
2. Przejdź do sekcji Conversational AI i skonfiguruj swojego agenta AI.
3. Skopiuj podany kod osadzania, który składa się z:
4. • Fragmentu < script > do załadowania funkcji widgetu.
   • Fragmentu < div > do określenia, gdzie widget się pojawi.

Krok 2: Dodaj widget używając bloku kodu

Jeśli chcesz widget na konkretnej stronie lub wpisie na blogu, użyj bloku kodu.

1. Przejdź do strony lub wpisu Squarespace, gdzie chcesz, aby widget się pojawił.
2. Kliknij symbol +, aby dodać blok.
3. Wybierz Kod z menu.
4. Wklej fragment < div > z kodu osadzania ElevenLabs do bloku kodu.
5. Zapisz blok i upewnij się, że jest poprawnie umieszczony na stronie.

Krok 3: Dodaj skrypt używając Code Injection

Aby widget działał poprawnie, musisz dodać fragment < script > używając Code Injection.

1. Z panelu Squarespace przejdź do Ustawienia > Zaawansowane > Code Injection.
2. Wklej fragment < script > do sekcji Stopka.
3. Zapisz zmiany.

Uwaga: Sekcja Stopka zapewnia, że skrypt jest ładowany na wszystkich stronach, umożliwiając działanie widgetów dodanych przez Code Blocks.

Krok 4: Opublikuj i przetestuj

1. Opublikuj stronę lub wpis, gdzie dodano widget.
2. Otwórz swoją stronę na żywo, aby sprawdzić, czy widget się pojawia i działa poprawnie. Ważne: Niestandardowy kod często nie wyświetla się w podglądzie edytora Squarespace — opublikuj stronę, aby przetestować integrację.

Typowe problemy i rozwiązywanie

Jeśli masz problemy z działaniem integracji, nie martw się — te wskazówki powinny pomóc.

Problem 1: Widget się nie wyświetla

• Przyczyna: Brakujące lub źle umieszczone fragmenty < script > lub < div >.
• Rozwiązanie: Upewnij się, że fragment < script > jest w sekcji Stopka Code Injection, a fragment
  jest poprawnie dodany do bloku kodu.

Problem 2: Widget widoczny tylko częściowo

• Przyczyna: Rozmiar bloku kodu lub konflikty układu.
• Rozwiązanie: Dostosuj rozmiar i wyrównanie bloku. Użyj niestandardowego CSS, jeśli potrzebujesz precyzyjnego umiejscowienia.

Problem 3: Błędy skryptu

• Przyczyna: Konflikty skryptów lub ograniczenia przeglądarki.
• Rozwiązanie: Użyj konsoli przeglądarki (np. Chrome DevTools), aby zidentyfikować błędy. Rozwiąż konflikty skryptów lub sprawdź problemy z CORS.

Zaawansowane wskazówki

Szukasz bardziej zaawansowanych opcji dostosowywania? Sprawdź poniższe wskazówki.

• Dostosowywanie widgetu: Użyj niestandardowego CSS w sekcji Squarespace Design > Custom CSS, aby stylizować widget. Dostosuj kolory, czcionki lub umiejscowienie, aby pasowały do projektu twojej strony.
• Testowanie na różnych urządzeniach: Przetestuj swoją stronę na różnych urządzeniach (komputer, tablet, telefon), aby upewnić się, że widget skaluje się i działa poprawnie na wszystkich rozmiarach ekranu.
• Dodawanie widgetów do wielu stron: Aby dodać widget na kilku stronach, powtórz proces dodawania bloku kodu dla każdej strony i upewnij się, że skrypt jest aktywny w stopce Code Injection.

Końcowe przemyślenia

Dodanie widgetu ElevenLabs Conversational AI do swojej strony Squarespace to prosty sposób na zwiększenie interaktywności i zaangażowania. Niezależnie od tego, czy osadzasz go na jednej stronie, czy na całej witrynie, funkcje Code Blocks i Code Injection w Squarespace sprawiają, że integracja jest bezproblemowa.

Postępuj zgodnie z tym przewodnikiem krok po kroku, dokładnie przetestuj swoje ustawienia i ciesz się korzyściami z Conversational AI na swojej stronie. W razie potrzeby skontaktuj się z pomocą techniczną ElevenLabs.

Lub, jeśli jeszcze tego nie zrobiłeś, zarejestruj się do Conversational AI już dziś.