Strona internetowa

Są trzy sposoby, by umieścić Agenta Quickchat AI w sieci. Wybierz ten, który pasuje do powierzchni, jaką chcesz pokazać:

• Widget: pływający dymek czatu w rogu Twojej strony. Najlepszy do ogólnego wsparcia.
• Embed: osadzone okno czatu, które znajduje się dokładnie tam, gdzie chcesz na stronie. Najlepszy do osadzenia AI wewnątrz konkretnego ekranu aplikacji, strony centrum pomocy lub strony szczegółów produktu.
• Strona czatu: hostowane, pełnoekranowe doświadczenie czatu serwowane przez Quickchat (bez instalacji, bez kodu). Najlepsze, gdy chcesz udostępnić komuś link (np. e-mail wsparcia, wewnętrzny Slack, beta testerzy) bez ingerencji w jego przeglądarkę.

Zainstaluj wybraną powierzchnię z Kanały → Twoja strona → Instalacja. Strona ma trzy podzakładki: Instalacja (wybierz, jak dodać swojego Agenta AI), Wygląd (stylizacja wizualna) i Treść tekstowa (komunikaty i etykiety widoczne dla Twoich odwiedzających). Karta Instalacja zaczyna się od wyboru metody, umieszcza kontrole dostępności i dostępu w osobnej sekcji i pokazuje gotowy do skopiowania Scenario ID, którego potrzebują wtyczki i API.

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 dodać Widget do swojej strony

Otwórz Kanały → Twoja strona → Instalacja. Karta zaczyna się od pytania „Jak chcesz dodać swojego Agenta AI?” i wymienia metody instalacji, od najprostszej. Wybierz tę, która pasuje do Twojej strony:

• WordPress: zainstaluj naszą darmową wtyczkę Agenta Quickchat AI, wklej swój Scenario ID, a Widget pojawi się automatycznie, bez edytowania kodu motywu.
• Shopify: dodaj Widget przez edytor motywu swojego sklepu. Zobacz przewodnik po Shopify.
• Webflow, Wix i inne: skopiuj jeden snippet i wklej go w sekcji własnego kodu lub osadzania w swoim kreatorze stron, najlepiej przed zamykającym znacznikiem </body>.
• Udostępnij link zamiast tego: nie instaluj niczego; udostępnij link do swojej hostowanej Strony czatu.
• Zainstaluj ręcznie z kodem: skopiuj surowy snippet Widget lub Embed i wklej go samodzielnie do swojego kodu HTML.

Każda metoda otwiera dedykowany panel krok po kroku, zawierający tylko ten kod lub ID, którego potrzebuje.

Twój Scenario ID znajduje się na górze karty Instalacja jako pole gotowe do skopiowania. To identyfikator, którego potrzebują wtyczki i API, więc kopiuj go stąd zawsze, gdy jakiś krok konfiguracji o niego poprosi.

Zainstaluj ręcznie z kodem

Jeśli sam zarządzasz swoim kodem HTML, rozwiń Zainstaluj ręcznie z kodem na karcie Instalacja i:

1. Skopiuj snippet Widget.
2. Otwórz plik HTML swojej strony lub edytor kodu w kreatorze stron.
3. Wklej snippet tuż przed zamykającym znacznikiem </body> na każdej stronie, na której ma się pojawić Widget.

Potrzebujesz pomocy?

Nie jesteś programistą? Karta Instalacja ma dwa skróty w sekcji Potrzebujesz pomocy?:

• Zapytaj AI o pomoc: otwiera asystenta w aplikacji, wstępnie wypełnionego pytaniem o dodanie Agenta do Twojej strony.
• Wyślij instrukcje programiście e-mailem: wysyła członkowi zespołu wszystko, czego potrzebuje (snippet Widgetu, Twój Scenario ID i link do tego przewodnika), aby mógł zainstalować go za Ciebie.

Po więcej pomocy skontaktuj się z nami: contact@quickchat.ai.

Strona czatu

Strona czatu to hostowana, pełnoekranowa wersja Twojego Agenta AI, która znajduje się pod adresem URL Quickchat. Nie ma nic do zainstalowania: udostępnij link, a Twoi odwiedzający mogą rozmawiać z Agentem bezpośrednio w przeglądarce. Użyj jej, gdy:

• Chcesz mieć doświadczenie czatu, ale nie masz strony internetowej (lub nie chcesz ingerować w jej kod).
• Udostępniasz AI wewnętrznie małej grupie (beta testerzy, zespół wsparcia, potencjalni klienci) i potrzebujesz linku z kontrolą dostępu zamiast publicznego widżetu.
• Chcesz wysłać AI jako dodatkowy kanał w e-mailu, Slacku lub swoim CRM.

Skonfiguruj, kto może otworzyć Stronę czatu, w Instalacja → Dostęp do strony czatu (zobacz Kontrola dostępu poniżej).

Kontrola dostępu

Karta Instalacja umieszcza kontrole dostępu w rozwijanej sekcji Dostępność i dostęp. Rozwiń ją, aby znaleźć dwie kontrole, które dotyczą Twojego wdrożenia:

Dostęp do widżetów i osadzania

Przełącznik na górze sekcji Dostępność i dostęp. Gdy jest włączony, skrypty Widgetu i Embeda działają normalnie w przeglądarkach odwiedzających. Gdy jest wyłączony, Widget i Embed są niedostępne na Twojej stronie, nawet jeśli skrypt jest nadal wklejony. Przydatne, by tymczasowo wyłączyć AI bez usuwania snippetu lub by ograniczyć dostęp publiczny, zachowując Stronę czatu otwartą dla zaproszonych użytkowników.

Dostęp do strony czatu

Niezależnie od przełącznika Widgetu i Embeda możesz ograniczyć, kto może otworzyć Stronę czatu:

• Każdy: adres URL Strony czatu jest publiczny. Każdy, kto ma link, może z niego korzystać.
• Tylko zaproszeni użytkownicy: tylko Użytkownicy czatu, których zaprosiłeś (przez e-mail), mogą korzystać ze Strony czatu. Będą musieli się uwierzytelnić.
• Nikt: Strona czatu jest całkowicie wyłączona.

Aby przyznać dostęp w trybie Tylko zaproszeni użytkownicy, kliknij Zaproś użytkowników czatu obok przycisku radio. Przeniesie Cię to do Ustawienia konta → Użytkownicy czatu, gdzie możesz wysyłać zaproszenia przez e-mail i zarządzać tym, kto ma dostęp.

Dostosowywanie

Podzakładki Wygląd i Treść tekstowa pozwalają dostosować, jak wyglądają Widget, Embed i Strona czatu oraz jakie treści widzą Twoi odwiedzający. Wszystkie trzy powierzchnie wdrożenia współdzielą te ustawienia: zmień je raz, a zastosują się wszędzie tam, gdzie wdrożony jest Twój Agent.

Prawy panel kart Instalacja/Wygląd/Treść tekstowa ma własne elementy sterujące podglądem: przełączaj między podglądami Widget, Embed i Strona czatu oraz między widokami Desktop i Mobile, aby zobaczyć zmiany przed publikacją.

Wygląd

Stylizacja wizualna powierzchni czatu, pogrupowana w Branding, Rozmiar i pozycję, Motyw oraz Inne ustawienia.

Branding

• Awatar agenta AI: pojedynczy obraz używany zarówno w nagłówku czatu, jak i na przycisku launchera (maks. 5 MB). To jedno ustawienie, nie dwa: wgrywasz jeden obraz, a pojawia się on w obu miejscach (zastępuje wcześniej osobne logo nagłówka i ikonę launchera). Każdy Agent zaczyna z wbudowanym domyślnym avatarem. Przywróć domyślny przywraca go, a usunięcie obrazu sprawia, że avatar się nie wyświetla.

Rozmiar i pozycja

• Rozmiar launchera: Classic, Input Only lub Mały. Kontroluje, jak wygląda launcher czatu przed otwarciem.
• Etykieta launchera: pokazywany tylko, gdy wybrano Mały: własny tekst na małym przycisku launchera (do 25 znaków), np. “Ask AI” lub “Chat”. Pozostaw puste, aby launcher zawierał tylko ikonę.
• Pozycja widgetu: dół-prawy lub dół-lewy.
• Wymiary okna czatu: szerokość (300–700 px) i wysokość (400–1200 px) okna czatu.
• Przeciągalny launcher: pozwala odwiedzającym przeciągnąć launcher w inne miejsce na stronie. Przydatne, gdy zasłania ważne treści.

Motyw

Wybierz, jak pokolorowane są powierzchnie czatu:

• Jasny i Ciemny to stałe gotowe ustawienia, które wyglądają tak samo na każdym koncie.
• Własny odblokowuje pełną, własną paletę. Po wybraniu Własny pojawiają się kontrolki kolorów dla tła, nagłówka i tekstu nagłówka, akcentu (używanego do przycisków, takich jak przycisk rozpoczęcia rozmowy w pre-chat, chipy z sugestiami i akcje oceny), dymka wiadomości i jego tekstu, tekstu wiadomości AI, koloru linków, pola tekstowego, obramowań i więcej. Każdy kolor jest sprawdzany pod kątem kontrastu WCAG AA względem jego tła i ostrzega Cię, gdy zestawienie jest trudne do odczytania.

Markowe kolory nagłówka i akcentu znajdują się w motywie Własny. Jasny i Ciemny pozostają neutralnymi gotowymi ustawieniami, więc przełączanie między nimi nigdy nie przenosi własnego koloru.

Po wybraniu Własny Chat Page ma również własne kolory paska bocznego: Tło paska bocznego, Tekst paska bocznego, Najechanie na pasek boczny i Tekst przy najechaniu. Dotyczą one wyłącznie widoku pełnoekranowego Chat Page, a nie widgetu bubble ani embed. Pozostaw kolory tekstu puste, a Chat Page automatycznie dobierze czytelny kolor do wybranego tła.

Możesz też ustawić zaokrąglenie rogów (zaokrąglenie dymków, pól i przycisków) oraz rozmiar tekstu. Oba działają w każdym trybie motywu.

Inne ustawienia

• Automatyczne otwieranie widgetu: automatycznie otwiera Widget po załadowaniu strony.
• Ukryj branding Quickchat AI: ukrywa stopkę “Powered by Quickchat AI”, zapewniając w pełni white-labelowe doświadczenie (dostępne w planach obejmujących white-labeling).
• Ocena Rozmów: pozwala odwiedzającym ocenić rozmowę na końcu. Wyniki pojawiają się w Insights → Ocena Rozmów.

Treść tekstowa

Podzakładka Treść tekstowa kontroluje każdy fragment treści widoczny dla odwiedzającego:

• Tekst nagłówka: tekst pokazywany na górze okna czatu.
• Wiadomość powitalna: pierwsza wiadomość od Agenta AI na początku każdej rozmowy (np. “Hej, potrzebujesz pomocy?”).
• Pokaż jako wyskakujące okienko: przełącznik, który pokazuje wiadomość powitalną jako pływający dymek obok launchera, by przyciągnąć uwagę, zanim odwiedzający kliknie.
• Startery konwersacji: do 3 przykładowych wiadomości pokazywanych odwiedzającemu, zanim zacznie pisać. Kliknięcie jednej wysyła ją jako pierwszą wiadomość. Przydatne do kierowania odwiedzających ku mocnym stronom Twojego AI (“Jak zainstalować widget?”, “Jakie integracje obsługujecie?”).
• Placeholder pola: tekst podpowiedzi w pustym polu wiadomości.
• Tekst zastrzeżenia: tekst pokazywany za rozmową, zwykle informujący użytkowników, że rozmawiają z AI. Zalecamy, by był jasny i widoczny.

Funkcje zaawansowane: Własne parametry

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

• wzbogacenia analityki (są widoczne w eksporcie CSV na platformie Quickchat)
• personalizacji rozmowy (Quickchat AI jest świadomy wszystkich 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 Twoja strona > Instalacja.

Widget i Embed używają tej samej sygnatury wywołania:

_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",
});

Te atrybuty są przypisywane do każdej nowej rozmowy; zalecamy ograniczenie się do kilku kluczy.

Wskazówka

Własne parametry z nazwami w snake_case (np. order_id, customer_tier) można wstrzyknąć bezpośrednio do API Actions jako {{metadata_order_id}}, {{metadata_customer_tier}} itd. Zobacz Zmienne AI Action, aby poznać szczegóły.

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://bubble.quickchat.ai/chat.js","_quickchat");
  _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>

Embed

<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://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("containerId", "quickchat-embedded");
  _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>

Embed

Embed pozwala umieścić Agenta Quickchat AI bezpośrednio wewnątrz strony jako osadzone okno czatu, zamiast pływającego dymka. Użyj go, gdy chcesz, by czat znajdował się w konkretnym miejscu na stronie: kolumnie centrum pomocy, stronie kontaktowej, panelu bocznym w aplikacji itp.

Jak dodać Embed

1. Pobierz kod Embeda

   • Zaloguj się do Quickchat AI App.
   • Przejdź do Kanały → Twoja strona w lewym pasku bocznym.
   • Kliknij kartę Instalacja, a następnie rozwiń Zainstaluj ręcznie z kodem.
   • Skopiuj Embed snippet (zawiera zarówno kontener <div id="quickchat-embedded">, jak i skrypt ładujący).

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

3. Wklej kod

   • Wstaw Embed snippet do sekcji <body> swojej strony.
   • Umieść go dokładnie tam, gdzie ma pojawić się okno czatu. <div> kontroluje rozmiar: dostosuj wbudowany style="height:600px", aby pasował do miejsca w Twoim układzie.