Wdróż widget Meetlead

1. 1
   Otwórz Ustawienia → Witryny

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

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

<script
  src="https://widget.meetlead.eu/widget.js"
  data-client-id="TWÓJ_CLIENT_ID"
  async
></script>

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>
  );
}

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.

Krok 1. Pobierz profil aktywnego konta

Udostępnij profil przez endpoint wymagający zalogowania. Zwracaj stabilny identyfikator zapisany w bazie i stosuj Cache-Control: no-store.

// Endpoint wymaga aktywnej sesji użytkownika.
// Nie używaj identyfikatora przekazanego w body żądania.
response.setHeader('Cache-Control', 'no-store');
return {
  userId: String(authenticatedUser.id),
  email: authenticatedUser.email,
  name: authenticatedUser.name
};

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.

(() => {
  const identity = {
    userId: currentUser.userId,
    email: currentUser.email,
    name: currentUser.name,
    attributes: { plan: currentUser.plan }
  };
  const options = {
    requestId: crypto.randomUUID(),
    onResult(result) {
      // accepted potwierdza zapis profilu; nie daje dostępu do historii.
      if (result.status === 'accepted') console.log('Profil przypisany');
    }
  };
  const meetlead = window.meetlead || (window.meetlead = { q: [] });
  if (typeof meetlead.identify === 'function') {
    meetlead.identify(identity, options);
  } else {
    meetlead.q.push(['identify', identity, options]);
  }
})();

Potwierdzenie i ponawianie

onResult zwraca accepted, rejected albo timeout oraz requestId, clientId i identityVerified. Zapisuj lokalny znacznik przypisania dopiero po pasującym potwierdzeniu. Błąd sieci ponów bez wylogowania; późny wynik starego konta ignoruj. Scalanie przez operatora nie nadaje dostępu do historii w przeglądarce.

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.

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

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

• używaj clientId odpowiadającego domenie, na której działa skrypt,
• ten sam userId przypisuje profil tylko w bieżącej witrynie; profile różnych witryn pozostają osobne,
• stan widgetu i sesja odwiedzającego są przechowywane osobno dla każdego clientId.

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

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);

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.

Checklista przed publikacją

• ✓ Produkcyjny host znajduje się na liście dozwolonych domen.
• ✓ Skrypt używa clientId właściwej witryny.
• ✓ Po wylogowaniu, zmianie konta i wygaśnięciu sesji wywoływane jest meetlead.logout().
• ✓ Pola wrażliwe są zamaskowane lub wyłączone z nagrań.
• ✓ Testowa rozmowa i identyfikacja są widoczne w panelu.