Strona internetowa

W tym przewodniku przeprowadzimy Cię przez integrację Asystenta AI z Twoją stroną internetową przy użyciu Widgetu lub iFrame.

Widget

Widget pozwala osadzić Agenta Quickchat AI bezpośrednio na stronie, zapewniając użytkownikom płynny sposób interakcji z AI. Widget zwykle wyświetla się jako dymek czatu w prawym dolnym rogu strony. Po kliknięciu rozwija się do okna czatu, umożliwiając zadawanie pytań, uzyskanie pomocy lub dostępu do informacji.

Jak osadzić Widget na stronie

1. Zlokalizuj kod strony

   Otwórz plik HTML swojej strony lub uruchom edytor kodu w kreatorze stron.

2. Pobierz kod Widgetu

   • Zaloguj się do Quickchat AI App.
   • Przejdź do sekcji Website w kategorii Channels w lewym pasku bocznym.
   • Kliknij kartę Install.
   • Skopiuj kod Widget script.

3. Wklej kod

   Wstaw skrypt Widgetu tuż przed zamykającym znacznikiem </body> na wszystkich stronach, na których ma się pojawiać.

Jeśli używasz WordPressa

Jak osadzić Widget Quickchat AI w witrynie WordPress:

Przez footer.php

1. Zaloguj się do panelu WordPress.
2. Przejdź do Wygląd > Edytor motywu i otwórz plik footer.php.
3. Wklej skrypt Widgetu tuż przed zamykającym znacznikiem </body>.
4. Zapisz zmiany, aby zastosować Widget w witrynie.

Oto wideo krok po kroku, jak dodać Widget Quickchat AI do WordPressa, używając footer.php:

Przez wtyczkę

1. Zainstaluj wtyczkę, np. Insert Headers and Footers z katalogu wtyczek WordPress.
2. Przejdź do ustawień wtyczki (zwykle Settings > Insert Headers and Footers).
3. Wklej kod skryptu Widgetu w sekcji stopki.
4. Zapisz zmiany — Widget pojawi się na stronie.

Oto wideo krok po kroku, jak dodać Widget Quickchat AI do WordPressa przez wtyczkę:

Jeśli używasz kreatora stron

Jeśli korzystasz z platform takich jak WordPress, Webflow czy Wix, zajrzyj do ich dokumentacji dotyczącej dodawania własnego kodu.

W razie potrzeby skontaktuj się z nami: contact@quickchat.ai.

Dostosowywanie Widgetu

Sekcja Appearance pozwala dostosować wygląd i działanie Widgetu Quickchat AI, aby pasował do Twojej marki i celów UX.

Opis opcji:

• Primary Color: Ustawia główny kolor wiadomości użytkownika.
• Header Background Color: Tło nagłówka czatu.
• Header Text Color: Kolor tekstu dla czytelności.
• AI Avatar Image: Avatar Agenta AI w nagłówku i wiadomościach.
• Widget Bubble: Ikona czatu widoczna przed otwarciem Widgetu.
• Widget Bubble Size: Rozmiar dymka: mały, średni, duży.
• Widget Bubble Position: Pozycja dymka: dół-prawy lub dół-lewy.
• Widget Chat Window Dimensions: Szerokość (320–720 px) i wysokość (520–1020 px) okna czatu.
• Animate AI Responses: Pokazuje generowanie odpowiedzi na żywo (jak w ChatGPT).
• Auto-Open Widget: Automatycznie otwiera Widget po załadowaniu strony.
• Remove Quickchat AI Branding: Tryb white-label.
• Animate Chat Header Collapsing: Płynna animacja nagłówka po pierwszej wiadomości.

Funkcje zaawansowane: Własne parametry

Widget i iFrame Quickchat AI pozwalają przekazać custom parameters podczas inicjalizacji. Mogą służyć do:

• wzbogacenia analityki (widoczne w eksporcie CSV na platformie Quickchat)
• personalizacji rozmowy (Quickchat AI jest świadomy przekazanych parametrów)

Przykładowe przydatne parametry:

• User name: Mike
• Subscription Tier: VIP
• Most recently purchased item: Silver package (upgraded)
• Next account level: Platinum
• Points required to reach the next account level: 758

Przykładowa rozmowa z Agentem AI świadomym wartości przekazanych w parametrach:

Aby dodać własne parametry jak powyżej, dodaj poniższy wiersz w skrypcie z sekcji Your Website > Install.

widget:

_quickchat("custom_params", {
  "User name": "Mike",
  "Subscription Tier": "VIP",
  "Most recently purchased item": "Silver package (upgraded)",
  "Next account level": "Platinum",
  "Points required to reach the next account level": "758",
});

iFrame:

_quickchat_embedded("custom_params", {
  "User name": "Mike",
  "Subscription Tier": "VIP",
  "Most recently purchased item": "Silver package (upgraded)",
  "Next account level": "Platinum",
  "Points required to reach the next account level": "758",
});

Obiekt JSON może zawierać maksymalnie pięć kluczy. Atrybuty te zostaną przypisane do każdej nowej rozmowy.

Przykładowy skrypt:

widget

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://widget.quickchat.ai/chat.js","_quickchat");
  _quickchat("host", "app.quickchat.ai");
  _quickchat("custom_params", {"User name": "Mike", "Subscription Tier": "VIP", "Most recently purchased item": "Silver package (upgraded)", "Next account level": "Platinum", "Points required to reach the next account level": "758");
  _quickchat("init", "abcdefghij");
</script>

iFrame

<div id="quickchat-embedded" style="height:600px;overflow: hidden;"></div>
<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://widget.quickchat.ai/embed.js","_quickchat_embedded");
  _quickchat_embedded("host", "app.quickchat.ai");
  _quickchat_embedded("custom_params", {"User name": "Mike", "Subscription Tier": "VIP", "Most recently purchased item": "Silver package (upgraded)", "Next account level": "Platinum", "Points required to reach the next account level": "758");
  _quickchat_embedded("init", "0zmn6up7zo");
</script>

iFrame

iFrame umożliwia osadzenie Agenta Quickchat AI jako okna czatu w wybranym miejscu strony. To prosty i elastyczny sposób dodania Agenta AI do konkretnych sekcji witryny.

Jak osadzić iFrame

1. Pobierz kod iFrame Quickchat AI

   • Zaloguj się do Quickchat AI App.
   • Przejdź do sekcji Website w kategorii Channels w lewym pasku bocznym.
   • Kliknij kartę Install.
   • Skopiuj kod iFrame script.

2. Otwórz plik HTML strony lub edytor kodu kreatora strony

3. Wklej kod

   • Wstaw kod iFrame do sekcji <body> swojej strony.
   • Umieść go dokładnie tam, gdzie ma pojawić się okno czatu.