Dostosuj widget przed publikacją

Ustawienia widgetu znajdziesz w Ustawienia → Widget. Zmiany pozostają w panelu, dopóki nie wybierzesz Zapisz zmiany, więc możesz spokojnie sprawdzić podgląd.

Ustaw wygląd widoczny dla odwiedzającychCopy Anchor Link

Ustaw tytuł widgetu, kolor główny, pozycję, powitanie oraz jasny lub ciemny motyw. Powitanie powinno mówić konkretnie, w czym pomaga zespół i kiedy można spodziewać się odpowiedzi.

Powiększ

Sprawdź podgląd na żywoCopy Anchor Link

Podgląd to działający widget, a nie statyczna ilustracja. Otwórz go, sprawdź pozycję przycisku i przeczytaj powitanie przy szerokości, którą zobaczą odwiedzający. Zmieniaj jedną rzecz naraz, aby wiedzieć, co wpłynęło na wygląd.

Powiększ

Weryfikuj tożsamość zalogowanych klientówCopy Anchor Link

Otwórz Ustawienia → Widget → Instalacja i bezpieczeństwo. Użyj sekcji Weryfikacja tożsamości klienta tylko wtedy, gdy Twoja aplikacja zna już zalogowanego klienta. Wybierz Wygeneruj sekret, od razu skopiuj wartość i przechowuj ją wyłącznie w magazynie sekretów po stronie serwera. Convor zwraca pełny sekret tylko po jego wygenerowaniu lub rotacji.

Przepływ wygląda tak:

1. Przeglądarka czeka na Convor.ready() i pobiera bieżący visitorId za pomocą Convor.getVisitorId().
2. Przekazuje ten visitorId do uwierzytelnionego endpointu Twojej aplikacji.
3. Serwer ustala klienta na podstawie własnej sesji, a nie danych tożsamości przesłanych przez przeglądarkę.
4. Serwer tworzy HMAC-SHA256 z dokładnego JSON-u w kolejności visitorId, id, email, name, phone. Brakujące email, name i phone muszą być pustymi ciągami.
5. Serwer zwraca dane klienta i 64-znakowy userHash w formacie szesnastkowym. Sekret nigdy nie trafia do przeglądarki.
6. Przeglądarka wywołuje Convor.identify() z dokładnie tymi samymi wartościami id, email, name i phone, które zostały podpisane.

Podpis zawiera również bieżący visitorId, dlatego nie można go przenieść na inną sesję gościa. Rotacja sekretu powoduje, że nowe żądania podpisane poprzednim sekretem nie przejdą weryfikacji.

Powiększ

Dokładny kod dla backendu i przeglądarki znajdziesz bezpośrednio w sekcji Convor.identify(identity).

Dopasuj położenie do układu aplikacjiCopy Anchor Link

Pozycja ustawiona w panelu wystarcza na większości stron. Jeśli widget koliduje z przyklejonym paskiem cookies, dolną nawigacją albo innym elementem interfejsu, zainicjalizuj go przez programowe ładowanie API z parametrem offset:

await Convor.init({
  key: "convor_wpk_...",
  position: "bottom-right",
  offset: {
    x: 20,
    y: 64,
    mobile: {x: 12, y: 80},
  },
});

offset.x i offset.y to wartości w pikselach CSS dodawane do standardowego marginesu od wybranego narożnika. Wartości dodatnie przesuwają launcher, dymek podglądu i desktopowe okno czatu dalej w głąb strony, a ujemne zbliżają je do krawędzi lub przesuwają poza nią. Poniżej 640 px offset.mobile.x i offset.mobile.y zastępują odpowiednie wartości bazowe. Pominięta oś mobilna dziedziczy wartość bazową. Otwarty czat na telefonie nadal zajmuje cały ekran, więc mobilne przesunięcia dotyczą launchera i dymka podglądu.

Nie przesuwaj widgetu przez nadpisywanie wewnętrznych selektorów .convor-*. Są szczegółem implementacji. Wspieranym interfejsem pozycjonowania jest offset. center nie jest prawidłową pozycją widgetu.

Zmieniaj język bez przeładowania SPACopy Anchor Link

Jeśli aplikacja zmienia język bez pełnego przeładowania strony, po inicjalizacji widgetu wywołaj:

await Convor.setLocale("pl-PL");

Convor dopasowuje treści widoczne dla odwiedzającego do języków skonfigurowanych dla tej strony. Wbudowany interfejs widgetu wybiera swój katalog niezależnie i może użyć języka zapasowego dostarczonego przez Convor. Zachowane pozostają stan otwarcia, widoczność, pozycja oraz tożsamość odwiedzającego przypisana do tej strony.

Wersje treści skonfigurujesz według poradnika Zarządzaj językami treści. Pełny opis działania runtime znajdziesz w sekcji Convor.setLocale(locale).

Skopiuj kod osadzaniaCopy Anchor Link

Na tej samej stronie Ustawienia → Widget → Instalacja i bezpieczeństwo skopiuj fragment z sekcji Kod do osadzenia i wklej go przed zamykającym </body> na stronach, na których ma działać czat. Produkcyjny kod ma tę postać:

<script
  src="https://cdn.convor.io/widget.js"
  data-key="convor_wpk_..."
  async
></script>

Zastąp convor_wpk_... publicznym kluczem widgetu widocznym dla wybranej strony. Zachowaj adres widget.js i klucz. Nie dodawaj ręcznie adresów API, iframe ani WebSocket.

Powyższy fragment zawiera produkcyjny adres CDN. Publiczny klucz skopiuj z ustawień Instalacja i bezpieczeństwo wybranej witryny. Następnie sprawdź dozwolone domeny.

Dodaj domenę stronyCopy Anchor Link

Przed testem otwórz Strony, wybierz stronę i dodaj hostname, na którym osadzasz widget, do jej listy dozwolonych domen. W razie potrzeby dodaj osobno produkcyjne subdomeny. localhost dodawaj tylko na czas lokalnych testów. Poprawny kod osadzania może pozostać niewidoczny, jeśli bieżący hostname nie jest dozwolony.

Content Security PolicyCopy Anchor Link

Do odpowiednich dyrektyw w istniejącej polityce CSP dodaj:

script-src  https://cdn.convor.io;
connect-src https://api.convor.io https://cdn.convor.io;
frame-src   https://cdn.convor.io;
style-src   'unsafe-inline';

Strona hostująca pobiera konfigurację z https://api.convor.io, ładuje widget.js i katalogi językowe z https://cdn.convor.io oraz osadza iframe z https://cdn.convor.io. Połączenie realtime działa wewnątrz hostowanego iframe, więc standardowy kod osadzania nie wymaga wss://ws.convor.io w connect-src strony hostującej.

style-src 'unsafe-inline' jest obecnie wymagane, ponieważ launcher dodaje do strony element stylów i style inline potrzebne do layoutu. Jeśli CSP definiuje osobno style-src-elem lub style-src-attr, te dyrektywy również muszą zezwalać na odpowiadające style inline. Jeśli używasz własnej ikony launchera, dodaj jej origin do swojej dyrektywy img-src.

Powiązane instrukcjeCopy Anchor Link

• Instalacja opisuje umieszczenie skryptu w popularnych frameworkach.
• Osadzanie widgetu opisuje produkcyjny kontrakt kodu i dozwolone domeny.
• Widget JavaScript API opisuje dane zalogowanego klienta, nawigację SPA, zdarzenia i sterowanie programowe.

Lista przed publikacjąCopy Anchor Link

1. Zapisz ustawienia.
2. Dodaj snippet na stronie testowej.
3. Rozpocznij rozmowę jako odwiedzający.
4. Sprawdź, czy operator może odpowiedzieć w sekcji Rozmowy.
5. Jeśli weryfikacja tożsamości jest włączona, zaloguj się na konto testowe i sprawdź, czy profil gościa jest oznaczony jako zweryfikowany.