Vervang de oude Saysimple Web Chat door de nieuwe versie met Google Tag Manager

Deze handleiding legt uit hoe je de oude Saysimple-webchat (niet meer beschikbaar na 1 november 2025) vervangt door de nieuwe versie.

Inhoudsopgave

1.0 Configureren van de nieuwe Webchat in Saysimple
1.1 Algemeen
1.2 Formulier
1.3 Openingstijden
1.4 Aangepaste velden
1.4.1 Aangepaste velden toevoegen aan je formulier
2.0 Beheren en controleren van je Webchat-widget
3.0 Code toevoegen aan je website
3.1 Direct toevoegen aan je website
3.2 Google Tag Manager gebruiken
4.0 Veelgestelde vragen
4.1 Wat als CSP (Content Security Policy) het widget blokkeert?
4.2 Kan ik de Webchat-widget verbergen en in plaats daarvan een knop of link gebruiken?

1.0 Configureren van de nieuwe Webchat in Saysimple

Ga in het Saysimple-platform naar het tandwielicoon in de linkerzijbalk om Instellingen te openen.

1. Ga naar de sectie Kanalen en klik op de blauwe knop Kanalen beheren.
2. Klik rechtsboven op de blauwe knop Webchat-login. Er opent een nieuw venster.
3. Klik rechtsboven op de paarse knop + Nieuwe chat aanmaken. Er opent een nieuw venster.

De webchatgenerator heeft vier tabbladen waarmee je de widget kunt aanpassen:

• Algemeen

• Formulier

• Openingstijden

• Aangepaste velden

In de onderstaande stappen wordt elk tabblad besproken.

1.1 Algemeen

In het tabblad Algemeen kun je je profielfoto, merk kleur, taal, widgetpositie en welkomstbericht instellen. Sommige velden zijn intern, andere zichtbaar voor gebruikers.

1.2 Formulier

In het tabblad Formulier kun je bepalen welke informatie je van gebruikers wilt verzamelen voordat ze een chat starten. Standaard kun je verzamelen:

• Naam

• Telefoonnummer

• E-mailadres

Gebruik de schakelaar om velden in of uit te schakelen in het pre-chatformulier. Wanneer een gebruiker het formulier invult, wordt deze informatie toegevoegd aan het contactprofiel in Saysimple en weergegeven in het eerste bericht van het gesprek.

Je kunt ook aangepaste formulier velden toevoegen zoals uitgelegd in sectie 1.4.

1.3 Openingstijden

In het tabblad Openingstijden stel je de beschikbaarheid van je webchat-widget in.

Opmerking: Je moet deze instelling activeren, anders blijft de widget offline voor gebruikers.

De openingstijden van de webchat zijn niet gekoppeld aan de algemene openingstijden van je Saysimple-account. Beide moeten afzonderlijk worden ingesteld.

1.4 Aangepaste velden

In het tabblad Aangepaste velden kun je extra velden aan je formulier toevoegen. Je kunt kiezen uit:

• Tekstveld

• Numeriek veld

• Lijstveld (dropdown menu met meerdere keuzemogelijkheden voor gebruikers)

1.4.1 Aangepaste velden toevoegen aan je formulier

1. Na het aanmaken van de velden klik je op Opslaan.
2. Wanneer alle velden zijn aangemaakt, klik je op Widget opslaan rechtsonder. Er verschijnt een codeblok dat je voorlopig kunt sluiten.
3. Ga terug naar het tabblad Formulier en schakel de gewenste aangepaste velden in.
4. Klik op Widget bijwerken om je wijzigingen op te slaan.

2.0 Beheren en controleren van je Webchat Widget

Na het bijwerken kom je terug op het overzichtsscherm van de Webchat. Hier kun je je widget beheren en controleren.

Als alles correct is, klik je op </> Code ophalen en ga je verder met stap 3.

3.0 Code toevoegen

Je hebt twee opties om de code aan je website toe te voegen:

1. Direct toevoegen aan de website

2. Google Tag Manager gebruiken

3.1 Direct toevoegen aan je website

1. Kopieer de HTML-code.

2. Plak deze net voor de sluitende </body>-tag van je website.

Zo wordt de webchat-widget correct geladen.

3.2 Google Tag Manager gebruiken

1. Kopieer de HTML-code.

2. Ga naar Google Tag Manager en log in.

3. Selecteer in je werkruimte de juiste container voor je website.

4. Klik in het linkermenu op Tags.

5. Zoek de tag waar je oude Saysimple Webchat-code is geïnstalleerd.

6. Klik op de tagnaam om deze te openen.

7. Vervang de oude HTML-code door de nieuwe code van Saysimple.

8. Klik op Opslaan en vervolgens rechtsboven op Indienen → Publiceren om de nieuwe code live te zetten.

Meer informatie over Google Tag Manager vind je in het Google Support Center.

4.0 Veelgestelde vragen

4.1 Wat als CSP (Content Security Policy) het widget blokkeert?

Gebruik de volgende instellingen om te voorkomen dat CSP het script blokkeert:

default-src 'self';
script-src 'self' https://web-chat.saysimple.io;
connect-src 'self' https://web-chat.saysimple.io wss://web-chat.saysimple.io;
style-src 'self' 'unsafe-inline' https://web-chat.saysimple.io;
img-src 'self' data: https://web-chat.saysimple.io;
font-src 'self' https://web-chat.saysimple.io;

Hoe voeg ik deze CSP-regels toe aan mijn website?

• WordPress → Gebruik een plugin zoals HTTP Headers of bewerk het .htaccess-bestand als je site zelf gehost wordt.

• Wix / Webflow → Sommige plannen laten toe om CSP-regels toe te voegen onder Custom Headers in de site-instellingen.

• Cloudflare → Als je website via Cloudflare draait, kun je CSP toevoegen via Cloudflare Rules → Response Headers.

4.2 Kan ik de Webchat-widget verbergen en een knop of link gebruiken?

Ja. Je kunt een aangepaste click-to-chat trigger instellen die de webchat opent wanneer een gebruiker op een knop of link klikt.

Om het chat-icoon bij het laden van de pagina te verbergen, voeg deze regel toe vóór het script wordt uitgevoerd:

window.chatwootSettings.hideMessageBubble = true;

Hierdoor wordt de widget in een verborgen staat geladen. Toegevoegd aan de volledige HTML-code ziet het er zo uit:

<script>
  window.chatwootSettings = {"position": "right"};
  window.chatwootSettings.hideMessageBubble = true;
  (function(d, t) {
    var BASE_URL = "https://web-chat.saysimple.io";
    // REST VAN DE CODE
})();
</script>

Na het laden kun je het widget via JavaScript bedienen, bijvoorbeeld met een knop die het chatvenster opent of sluit.

Voorbeeld link:

<a href="javascript:void(0)" onclick="window.$chatwoot && window.$chatwoot.toggle()"
   class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition">
   💬 Toggle chat
</a>

Voorbeeld knop:

<script>
document.getElementById('open-chat').addEventListener('click', function() {
  if (window.$chatwoot) {
    window.$chatwoot.toggle();
  } else {
    console.log("Chat nog niet geladen");
  }
});
</script>
<button id="open-chat">💬 Open chat</button>