Strona internetowa

Wdróż Quickchat AI na swojej stronie jako pływający Widget, osadzony Embed lub hostowaną Stronę czatu. Obejmuje instalację, kontrolę dostępu, wygląd, treści tekstowe i własne parametry.

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, które odzwierciedlają strukturę tego artykułu: Instalacja (skrypty + dostęp), Wygląd (stylizacja wizualna) i Treść tekstowa (komunikaty i etykiety widoczne dla odwiedzającego).

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.

Zlokalizuj kod strony

Otwórz plik HTML swojej strony lub uruchom edytor kodu w kreatorze stron.
Pobierz kod Widgetu
- Zaloguj się do Quickchat AI App.
- Przejdź do sekcji Twoja strona w kategorii Kanały w lewym pasku bocznym.
- Kliknij kartę Instalacja.
- Skopiuj kod Widget script.
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

Najprostszym sposobem jest nasza oficjalna wtyczka Agenta Quickchat AI: zainstaluj ją z katalogu wtyczek WordPress, wklej swój Scenario ID, a Widget pojawi się automatycznie, bez edytowania kodu motywu. Przewodnik po WordPressie zawiera instrukcje krok po kroku oraz opcję ręcznego skryptu, jeśli wolisz nie korzystać z wtyczki.

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.

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 ma dwie kontrole dostępu, które dotyczą Twojego wdrożenia:

Dostęp do widżetów i osadzania

Główny przełącznik na górze karty Instalacja. 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.
Usuń 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:

Przykład rozmowy z parametrami niestandardowymi

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.

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

Pobierz kod Embeda
- Zaloguj się do Quickchat AI App.
- Przejdź do Kanały → Twoja strona w lewym pasku bocznym.
- Kliknij kartę Instalacja.
- Skopiuj Embed snippet (zawiera zarówno kontener <div id="quickchat-embedded">, jak i skrypt ładujący).
Otwórz plik HTML strony lub edytor kodu kreatora strony.
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.