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ących

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.

Sprawdź podgląd na żywo

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.

Weryfikuj tożsamość zalogowanych klientów

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.
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.

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

Dopasuj położenie do układu aplikacji

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 programowo z 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 SPA

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

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

Convor ponownie pobiera treści dla wybranego języka i przełącza wbudowany interfejs bez odtwarzania launchera ani kontenera iframe na stronie hostującej. Zachowane pozostają stan otwarcia, widoczność, pozycja oraz tożsamość odwiedzającego przypisana do tej strony. Pełny opis znajdziesz w sekcji Convor.setLocale(locale).

Skopiuj kod osadzania

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.

Dodaj domenę strony

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 Policy

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 instrukcje

• 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ą

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.