De chatwidget installeren

Voordat je begint

Je hebt een account, een organisatiewidget in SupportWhale en toegang tot de code van je website nodig. Een eigenaar of beheerder kan widgetinstellingen wijzigen. De websitesleutel in de snippet is openbaar; je sleutel voor ondertekende klantidentiteiten is geheim en hoort nooit in browsercode.

Installeer de widget

1. Log in en kies in de zijbalk de juiste organisatie.
2. Open Widget → Installatie en kopieer het gegenereerde script. Houd de echte loader-URL, websitesleutel en het API-adres bij elkaar.
3. Plak het script vlak voor </body> op je website en publiceer de wijziging.
4. Open je website in een privévenster. Verstuur een bericht, open de SupportWhale-inbox en antwoord. Herlaad de website om te controleren of de geschiedenis behouden blijft.

Stel toegestane domeinen in

Open Widget → Toegestane domeinen. Een domeinlijst is de standaard. Voeg iedere productie-, staging- of ontwikkelhost toe die de widget nodig heeft. example.com en www.example.com zijn verschillende vermeldingen. *.example.com staat subdomeinen toe, maar niet het hoofddomein example.com. Een afwijkende poort moet exact overeenkomen, zoals localhost:5173. Internationale domeinnamen worden door de server genormaliseerd.

Met Alle domeinen toestaan kan iedere website deze widget insluiten. Kies dit alleen bewust. Het geeft geen toegang tot privégesprekken of inloggegevens van je team. Een gewijzigde domeinlijst geldt ook bij opnieuw verbinden; neem je preview- en stagingdomeinen op als dat nodig is.

Taal van de widget

De widget volgt de browsertaal van de bezoeker (Nederlands, Engels of Duits). Voeg optioneel data-locale="nl" toe aan het installatiescript om zelf de taal te kiezen; en en de worden ook ondersteund. Na het laden wisselt window.SupportWhale.setLocale("de") van taal zonder een onvoltooid bericht of e-mailadres te wissen.

Gewone HTML

Gebruik het script uit Installatie. Dit voorbeeld laat de opbouw zien; vervang YOUR_WEBSITE_KEY door je eigen openbare sleutel.

<script src="https://cdn.supportwhale.com/loader.js"
  data-website-id="YOUR_WEBSITE_KEY"
  data-api="https://api.supportwhale.com/v1" defer></script>

Nuxt

Voeg hetzelfde script één keer toe aan useHead in je app, niet aan iedere pagina. Gebruik de waarden uit jouw gegenereerde snippet.

useHead({ script: [{
  src: 'https://cdn.supportwhale.com/loader.js',
  'data-website-id': 'YOUR_WEBSITE_KEY',
  'data-api': 'https://api.supportwhale.com/v1',
  defer: true
}] })

React

Plaats de gegenereerde snippet bij voorkeur in het HTML-document van je app, vóór </body>. Kun je dat document niet wijzigen, voeg het script dan één keer toe vanuit een effect in je hoofdcomponent. Laat het staan tijdens navigatie; laad niet voor iedere route een nieuwe kopie.

useEffect(() => {
  if (document.getElementById('supportwhale-loader')) return;
  const script = document.createElement('script');
  script.id = 'supportwhale-loader';
  script.src = 'https://cdn.supportwhale.com/loader.js';
  script.dataset.websiteId = 'YOUR_WEBSITE_KEY';
  script.dataset.api = 'https://api.supportwhale.com/v1';
  script.defer = true;
  document.head.appendChild(script);
}, []);

Chat openen met je eigen knop

Plaats deze knop waar je wilt op je website, naast het geïnstalleerde widgetscript:

<button type="button" data-supportwhale-action="open">Neem contact op</button>

Gebruik close om de chat te sluiten of toggle om te wisselen tussen open en dicht. Knoppen die tijdens navigatie worden toegevoegd werken automatisch. Een klik tijdens het laden van de widget wordt onthouden; de pagina verspringt niet en de URL blijft gelijk. Gebruik een knop in plaats van een lege href="#"-link.

Vanuit JavaScript gebruik je window.SupportWhale.open(), window.SupportWhale.close() of window.SupportWhale.toggle() nadat de loader is uitgevoerd. Laat het script één keer in je app staan. Roep bij uitloggen of wisselen van account window.SupportWhale.reset() aan voordat je de identiteit van de volgende klant instelt.

Als de widget niet opent

Controleer of de loader-URL bereikbaar is, de sleutel bij de juiste website hoort en de huidige hostnaam en poort zijn toegestaan. Een content-security policy moet het CDN-script en de API-/WebSocketverbindingen toestaan. Browserextensies kunnen chatscripts blokkeren. Laad de snippet niet dubbel. Met de ingebouwde preview test je de instellingen; test daarnaast altijd de echte klantwebsite.

Voor ingelogde klanten ondertekent je eigen server kortlevende JWT’s. Gebruik daarvoor de integratie voor klantidentiteit in Installatie. Geef de geheime ondertekeningssleutel nooit aan de browser. Neem contact op met het getroffen domein en de zichtbare fout, zonder wachtwoorden of privétokens mee te sturen.