Dokumentacja
Otwórz panel
Podstawowa instalacja10–15 min

Wdróż widget Meetlead

Skonfiguruj witrynę, osadź skrypt i bezpiecznie połącz anonimowe wizyty z kontami zalogowanych klientów.

Ostatnia aktualizacja: 29 lipca 2026Otwórz ustawienia witryn

Spis dokumentacjiWprowadzenie

Szybki start

Integracja w czterech krokach

To minimalna ścieżka od pustej konfiguracji do pierwszej testowej rozmowy.

  1. 01
    Utwórz witrynę

    Otrzymasz osobny clientId dla tej konfiguracji.

  2. 02
    Dodaj domeny

    Wpisz każdy dokładny host, na którym działa widget.

  3. 03
    Wklej skrypt

    Dodaj jeden tag do kodu strony lub głównego layoutu.

  4. 04
    Wyślij wiadomość

    Potwierdź, że rozmowa pojawia się w Skrzynce Meetlead.

Konfiguracja

Konfiguracja witryny

Witryna określa domeny, wygląd, reguły i kontekst danych odwiedzających.

  1. Otwórz Ustawienia → Witryny

    Wybierz istniejącą witrynę albo utwórz nową dla serwisu, na którym instalujesz widget.

  2. Dodaj dozwolone domeny

    Wpisuj dokładne hosty bez ścieżek. sklep.pl i www.sklep.pl dodaj osobno. Wildcardy nie są obsługiwane.

  3. Skopiuj clientId

    Każda witryna ma własny publiczny identyfikator. Nie używaj clientId innej witryny, bo dane trafią do niewłaściwego kontekstu.

Środowiska testowe

Dodaj również host środowiska staging. W produkcji usuń domeny, których nie używasz.

Osadzenie

Instalacja widgetu

Wklej skrypt w sekcji <head>. Atrybut async sprawia, że widget nie blokuje renderowania treści.

HTML · kod bazowy
<script
  src="https://widget.meetlead.eu/widget.js"
  data-client-id="TWÓJ_CLIENT_ID"
  async
></script>
Zastąp TWÓJ_CLIENT_ID wartością skopiowaną z wybranej witryny. clientId jest publiczny — nie jest sekretem.
WordPressbez modyfikowania widgetu

Dodaj bazowy snippet przez narzędzie do kodu w nagłówku albo w pliku header.php motywu potomnego, przed </head>. Po zmianie wyczyść cache strony.

React / Vue / inne SPAnajprostsza ścieżka

Dodaj bazowy snippet raz w głównym pliku HTML aplikacji. Nie montuj go ponownie przy każdej zmianie routingu.

Next.jsApp Router i Pages Router
App Router · app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="pl">
      <body>
        {children}
        <Script
          src="https://widget.meetlead.eu/widget.js"
          data-client-id="TWÓJ_CLIENT_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}
Pages Router · pages/_app.tsx
import Script from 'next/script';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://widget.meetlead.eu/widget.js"
        data-client-id="TWÓJ_CLIENT_ID"
        strategy="afterInteractive"
      />
    </>
  );
}

Sprawdź uruchomienie

  • odśwież stronę bez aktywnego blokowania cache,
  • sprawdź, czy launcher Meetlead pojawił się w wybranej pozycji,
  • w narzędziach deweloperskich potwierdź pobranie widget.js,
  • wyślij testową wiadomość i sprawdź rozmowę w Skrzynce.

Klienci

Połącz wizytę z klientem

Po zalogowaniu lub rejestracji wywołaj meetlead.identify(). Podpisany userId łączy kolejne wizyty, rozmowy i zdarzenia w jednym profilu.

Sekret identyfikacji nigdy nie może trafić do przeglądarki.

HMAC generuj wyłącznie na swoim backendzie. Frontend otrzymuje gotowe userId i userHash.

Krok 1. Wygeneruj podpis na backendzie

Skopiuj sekret przestrzeni z Ustawienia → Witryny → Bezpieczeństwo tożsamości i zapisz go w zmiennej środowiskowej backendu.

Node.js · backend
import { createHmac } from 'node:crypto';

const secret = process.env.MEETLEAD_IDENTITY_SECRET;
if (!secret) throw new Error('Brak sekretu Meetlead');

const userId = String(user.id).trim().normalize('NFC');
const userHash = createHmac('sha256', secret)
  .update(userId, 'utf8')
  .digest('hex');

return { userId, userHash };

Krok 2. Przekaż tożsamość w przeglądarce

Wywołaj integrację po ustaleniu zalogowanego użytkownika. Ten wariant działa również wtedy, gdy asynchroniczny skrypt widgetu jeszcze się ładuje.

JavaScript · frontend
(() => {
  const identity = {
    userId: currentUser.userId,
    userHash: currentUser.userHash,
    email: currentUser.email,
    name: currentUser.name,
    phone: currentUser.phone,
    company: currentUser.company,
    attributes: { plan: currentUser.plan }
  };

  const meetlead = window.meetlead || (window.meetlead = { q: [] });
  if (typeof meetlead.identify === 'function') {
    meetlead.identify(identity);
  } else {
    meetlead.q.push(['identify', identity]);
  }
})();
Pola obsługiwane przez meetlead.identify()
PoleWymaganieZastosowanie
emaile-mail lub userIdkontakt i wyszukiwanie klienta
userIde-mail lub userIdstabilny identyfikator z Twojego systemu
userHashwymagany do scalania userIdbezpieczne łączenie klienta między wizytami i witrynami
name, phone, companyopcjonalnedane widoczne przy profilu i rozmowie
attributesopcjonalnedo 20 własnych atrybutów tekstowych, liczbowych lub logicznych

Wylogowanie użytkownika

Po wylogowaniu z Twojej aplikacji wyczyść również tożsamość Meetlead. Następna osoba korzystająca z tej samej przeglądarki otrzyma nową sesję odwiedzającego.

JavaScript · wylogowanie
(() => {
  const meetlead = window.meetlead || (window.meetlead = { q: [] });

  if (typeof meetlead.logout === 'function') {
    meetlead.logout();
  } else {
    meetlead.q.push(['logout']);
  }
})();

Architektura

Wiele witryn, jeden klient

Każda witryna ma własny clientId, domeny, konfigurację widgetu i odseparowane dane operacyjne.

  • używaj clientId odpowiadającego domenie, na której działa skrypt,
  • ten sam podpisany userId może połączyć klienta między witrynami jednej przestrzeni,
  • stan widgetu i sesja odwiedzającego są przechowywane osobno dla każdego clientId.

Wyniki

Cele i ocena obsługi

Te integracje są opcjonalne. Cel zapisuj po wyniku biznesowym, a CSAT wyłącznie po świadomym wysłaniu oceny przez klienta.

JavaScript · cel biznesowy
// Cel musi być wcześniej utworzony i aktywny w Meetlead.
(() => {
  const meetlead = window.meetlead || (window.meetlead = { q: [] });
  const goalOptions = { value: 249, currency: 'PLN' };

  if (typeof meetlead.goal === 'function') {
    meetlead.goal('purchase', goalOptions);
  } else {
    meetlead.q.push(['goal', 'purchase', goalOptions]);
  }
})();

Klucz celu używa małych liter, cyfr oraz znaków ., _ i -. Waluta ma trzyznakowy kod, np. PLN lub EUR.

Ocena obsługi po rozmowie

Podłącz funkcję do formularza oceny. Nie wywołuj jej automatycznie przy zakupie, wyświetleniu strony ani zakończeniu rozmowy.

JavaScript · CSAT
function submitMeetleadCsat(score, comment) {
  const meetlead = window.meetlead || (window.meetlead = { q: [] });

  if (typeof meetlead.csat === 'function') {
    meetlead.csat(score, comment);
  } else {
    meetlead.q.push(['csat', score, comment]);
  }
}

// Wywołaj dopiero po świadomym wysłaniu oceny 1–5 przez klienta.
// submitMeetleadCsat(customerScore, customerComment);

Produkcja

Prywatność i bezpieczeństwo

Dopasuj rejestrowanie zachowania, sposób uruchamiania widgetu i politykę CSP do zasad obowiązujących w Twoim serwisie.

01Maskowanie

W Widget Studio ustaw selektory pól i obszarów, które mają być maskowane lub wyłączone z nagrań.

02Polityka prywatności

Opisz zakres działania Meetlead oraz dane, które przekazujesz przez formularze i identify().

03Zgoda lub podstawa

Jeśli konfiguracja wymaga zgody, załaduj skrypt dopiero po jej uzyskaniu w używanym CMP.

Content Security Policy

Jeśli serwis używa CSP, dodaj źródła Meetlead do istniejących dyrektyw. Nie zastępuj całej swojej polityki gotowym nagłówkiem.

Źródła używane przez widget Meetlead
DyrektywaŹródła MeetleadZastosowanie
script-srchttps://widget.meetlead.euplik widget.js
connect-srchttps://api.meetlead.eu wss://api.meetlead.eukonfiguracja i połączenie realtime
font-srchttps://meetlead.eufonty interfejsu widgetu
Sprawdź również ograniczenia stylów.

Widget umieszcza swój arkusz CSS w Shadow DOM. Polityka blokująca style inline może zatrzymać renderowanie interfejsu. Nie dodawaj szerokiego 'unsafe-inline' bez analizy — najpierw przetestuj integrację w trybie Report-Only i dopasuj politykę bezpieczeństwa swojego serwisu.

Jeśli używasz własnych awatarów lub zewnętrznych plików, uwzględnij ich źródła również w img-src.

Checklista przed publikacją

  • Produkcyjny host znajduje się na liście dozwolonych domen.
  • Skrypt używa clientId właściwej witryny.
  • Sekret HMAC pozostaje wyłącznie po stronie backendu.
  • Pola wrażliwe są zamaskowane lub wyłączone z nagrań.
  • Testowa rozmowa i identyfikacja są widoczne w panelu.

Pomoc

Najczęstsze problemy

Zacznij od komunikatów w konsoli przeglądarki i ustawień wybranej witryny.

Widget nie pojawia się na stronie

Sprawdź, czy skrypt pobrał się bez błędu, czy ma poprawny clientId oraz czy widget jest włączony w Widget Studio.

Konsola zgłasza niedozwoloną domenę

Dodaj dokładny host bieżącej strony do witryny. Hosty z www i bez www są różnymi wpisami.

Klient nie łączy się między witrynami

Zweryfikuj, czy obie witryny należą do tej samej przestrzeni, przekazują identyczny znormalizowany userId i poprawny HMAC z aktualnego sekretu.

Po zmianie kodu nadal działa stara wersja

Wyczyść cache aplikacji, CDN lub wtyczki optymalizacyjnej. Potem wykonaj pełne odświeżenie i sprawdź źródło dokumentu.

Wsparcie wdrożeniowe

Potrzebujesz drugiej pary oczu?

Sprawdzimy domeny, instalację, identyfikację i pierwszą testową rozmowę.

Umów wdrożenie