Dokumentacja

Framer

Dodaj agenta do witryny Framer za pomocą funkcji Custom Code.

Dodaj swojego agenta AI do witryny Framer za pomocą funkcji Custom Code. Fragment kodu ładuje się na każdej stronie po opublikowaniu.

W Agentkit otwórz Channels → Website embed → Chat widget, włącz kanał i skopiuj cały wygenerowany kod. Zawiera on skrypt inicjujący w treści strony oraz osobny skrypt ładujący widżet.

Szybka konfiguracja

  1. Otwórz swój projekt we Framer.
  2. W lewym pasku bocznym kliknij Project Settings (ikona koła zębatego).
  3. Wybierz zakładkę Custom Code.
  4. Przy pierwszym wpisie kliknij Add Script; w przeciwnym razie kliknij ikonę +.
  5. Nadaj skryptowi rozpoznawalną nazwę (np. Agentkit Widget).
  6. Wklej oba wygenerowane znaczniki skryptu razem w polu Custom Code. Nie zmieniaj adresu skryptu ani identyfikatora agenta.
  7. W sekcji umiejscowienia wybierz End of <body> tag (Body End) — to zalecana opcja dla widżetów czatu.
  8. Wybierz ładowanie na All pages.
  9. Kliknij Save.
  10. Kliknij Publish w prawym górnym rogu, aby opublikować zmiany.

Nie używaj przykładu z jednym znacznikiem skryptu ani nie wpisuj adresu widżetu ręcznie. Po publikacji sprawdź w kodzie źródłowym strony, czy są oba wygenerowane znaczniki <script>. Następnie otwórz widżet i wyślij wiadomość testową. Instrukcja widżetu JavaScript →

Dlaczego koniec <body>, a nie head

Framer dzieli Custom Code na Head Code i End of <body> Code. Widżety czatu powinny trafiać na koniec <body>, aby nie opóźniać pierwszego renderowania strony — to również odpowiada atrybutowi async w skrypcie.

Head Code jest zarezerwowany dla elementów, które muszą uruchomić się bardzo wcześnie, takich jak piksele analityczne czy wstępne ładowanie czcionek.

Instalacja na wybranej stronie

Aby załadować widżet tylko na wybranych stronach:

  1. Wybierz stronę w panelu warstw Framer.
  2. Otwórz Page Settings (panel po prawej stronie).
  3. Dodaj tam Custom Code zamiast w Project Settings.

Kod na poziomie strony działa tylko na tej konkretnej stronie.

Plany i domeny

Po opublikowaniu

Custom Code w Framer nie działa w edytorze ani w podglądzie — tylko na opublikowanej stronie. Po kliknięciu Save kliknij Publish, a następnie otwórz aktywny adres URL.

Rozwiązywanie problemów

Widżet nie pojawia się w podglądzie edytora.

  • Tak ma być. Custom Code działa wyłącznie na opublikowanej stronie.

Widżet nie pojawia się także na opublikowanej stronie.

  • Upewnij się, że kliknięto zarówno Save, jak i Publish.
  • Sprawdź ograniczenia domen dla opublikowanej domeny Framer.
  • Wykonaj twarde odświeżenie (⌘+Shift+R), aby pominąć pamięć podręczną CDN.

Widżet miga, a następnie znika.

  • Sprawdź, czy Framer nie stosuje przejść między stronami lub animacji, które mogą ponownie ładować DOM. Widżet powinien montować się ponownie przy każdym załadowaniu strony — jeśli tak się nie dzieje, skontaktuj się z pomocą techniczną.

Testowanie

  1. Otwórz opublikowany adres URL w oknie incognito.
  2. Sprawdź, czy widoczny jest dymek czatu.
  3. Kliknij, aby go otworzyć, i wyślij testową wiadomość.

Kolejne kroki