My Website

` is het aankoppelingspunt — het chatpaneel wordt hierin weergegeven en vult de afmetingen ervan. Style de div zoals je wilt (geef het een vaste hoogte, plaats het in een flex-container, zet het in een grid-cel, enz.) en het chatpaneel zal volgen. Je hebt slechts **één** ` ``` {% endcode %} De inline snippet bevat deze in plaats daarvan op de `

`, zodat één pagina meerdere chats kan bevatten die naar verschillende plaatsen gaan: {% code overflow="wrap" %} ```html

``` {% endcode %} Voor een agent verandert de bewoording in `?agent=AGENT_ID` of `data-agent="AGENT_ID"`. Een paar dingen die handig zijn om te weten: - Gebruik de kopieerknop in plaats van het ID handmatig in te typen. Als het ID niet overeenkomt met een campagne of agent in je account, werkt de chat nog steeds, maar valt deze terug op je standaardroutering. - Iemand die al in gesprek is, blijft bij degene met wie het gesprek is begonnen, zelfs als diegene later op een pagina terechtkomt die naar een andere plek verwijst. Dit voorkomt dat een gesprek halverwege van persoonlijkheid verandert. - Een paginaspecifieke bestemming krijgt voorrang op je accountstandaard en op trefwoord-triggers. ### Vertel de widget wie de bezoeker is (Geavanceerd) Als je de chatwidget in een ledengedeelte, een klantportaal of een app plaatst waar mensen al zijn ingelogd, weet je site al wie ze zijn. Je kunt die informatie doorgeven aan de widget, zodat de bezoeker niet om gegevens wordt gevraagd die ze al eerder hebben verstrekt, en zodat je AI kan gebruiken wat je al over hen weet. Voeg een klein instellingenblok toe **vóór** het widgetscript: {% code overflow="wrap" %} ```html ``` {% endcode %} Je pagina moet die waarden aan de serverzijde invullen, op basis van wie er is ingelogd. Er gebeuren twee dingen: - **Het "Voordat we beginnen..."-formulier wordt overgeslagen.** Met een opgegeven naam en e-mailadres gaat de bezoeker direct het gesprek in, en die gegevens worden exact zo opgeslagen bij hun contactpersoon alsof ze deze zelf hadden ingetypt. - **Alles onder `data` wordt doorgegeven aan je AI.** Alles wat je daar plaatst — abonnement, bestelnummer, verlengingsdatum, kredietsaldo, hoeveel licenties ze hebben — wordt onderdeel van wat de AI over die persoon weet. Hierdoor kan de AI vragen beantwoorden als "wanneer wordt mijn abonnement verlengd?" zonder eerst te hoeven vragen wie ze zijn. Gebruik de veldnamen die voor jou logisch zijn; ze verschijnen bij de contactpersoon onder Aangepaste velden. Tot 20 waarden, die bij elk bericht opnieuw worden verzonden, dus als het abonnement halverwege het gesprek verandert, ziet de AI de nieuwe gegevens. Voor inline embeds kun je dezelfde informatie in plaats daarvan op de `

` plaatsen, wat handig is wanneer één pagina meerdere chats bevat: {% code overflow="wrap" %} ```html

``` {% endcode %} Als je site pas weet wie de bezoeker is nadat de pagina is geladen — bijvoorbeeld bij een single-page app waar het inloggen gebeurt zonder dat de pagina opnieuw wordt geladen — roep dit dan aan zodra je de details hebt, waarna de widget zichzelf bijwerkt: {% code overflow="wrap" %} ```html ``` {% endcode %} Een paar dingen die handig zijn om te weten: - Als twee verschillende mensen inloggen op dezelfde computer, start de tweede persoon een nieuw gesprek in plaats van de chat van de eerste te zien. De widget merkt de verandering van persoon op en stelt zichzelf opnieuw in. - Op zichzelf is dit bedoeld voor context, niet om iemand in te loggen. Gesprekken worden nog steeds gescheiden gehouden zoals altijd, dus het doorgeven van een `id` zorgt er niet voor dat iemand de chat van iemand anders kan openen, en iemand die een ander apparaat of browser gebruikt, start daar een nieuw gesprek. Om het gesprek over apparaten heen voort te zetten, moet je de `id` ondertekenen zoals hierna beschreven. - Het is optioneel. Een widget op een normale openbare pagina heeft dit niet nodig en gedraagt zich precies zoals voorheen. #### Hetzelfde gesprek hervatten op elk apparaat (ingelogde bezoekers-ID) Als je klanten accounts hebben, kun je ervoor zorgen dat hun chat hen volgt: inloggen op een telefoon, doorgaan op een laptop, en het is hetzelfde gesprek met dezelfde contactpersoon in je inbox, en de AI weet nog steeds alles wat er is gezegd. Hiervoor heeft DM Champ bewijs nodig dat de bezoeker echt is wie je pagina zegt dat ze zijn, anders zou iedereen een klantnummer in zijn browser kunnen typen en de chat van die klant kunnen lezen. Het bewijs is een handtekening die je op je server berekent. 1. Zoek in het **Beheren**-paneel van de widget onder **Kanalen & Insluiten** naar **Ingelogde bezoekers** en klik op **Geheim genereren**. Kopieer het identiteitsgeheim. Bewaar dit alleen op uw server; plaats het nooit op de pagina zelf. ::: master-only

De rij voor ingelogde bezoekers in het Beheren-paneel van de chatwidget, met het gemaskeerde identiteitsgeheim met knoppen voor Tonen, Kopiëren en Opnieuw genereren, en het instellingenfragment met de id- en hash-velden eronder — De rij voor ingelogde bezoekers onder Kanalen & Insluiten. Het geheim blijft verborgen totdat u op Tonen klikt; het fragment eronder laat zien waar de id en de bijbehorende handtekening op uw pagina moeten komen.

::: 2. Wanneer uw server een pagina rendert voor een ingelogde klant, bereken dan een HMAC-SHA256 van het ID van die klant met behulp van het geheim, als een hexadecimale string in kleine letters: {% code overflow="wrap" %} ```js // Node.js const hash = require("crypto").createHmac("sha256", IDENTITY_SECRET).update(customerId).digest("hex"); ``` {% endcode %} {% code overflow="wrap" %} ```php // PHP $hash = hash_hmac('sha256', $customerId, IDENTITY_SECRET); ``` {% endcode %} {% code overflow="wrap" %} ```python # Python import hmac, hashlib hash = hmac.new(IDENTITY_SECRET.encode(), customer_id.encode(), hashlib.sha256).hexdigest() ``` {% endcode %} 3. Plaats het ID en de hash in het instellingenblok, naast de naam en e-mail die je al doorgeeft: {% code overflow="wrap" %} ```html ``` {% endcode %} De inline embed gebruikt dezelfde waarde als `data-visitor-hash` op de `

`, en `window.chatWidget.setVisitor({ visitor: { id, hash } })` werkt voor apps die mensen inloggen zonder de pagina te verversen. Wat er gebeurt zodra de handtekening is gecontroleerd: - De chat van de klant wordt opgeslagen onder hun account in plaats van onder de browser, dus het is hetzelfde gesprek op elk apparaat en elke browser waar ze zijn ingelogd, en één contactpersoon in je inbox. - Hun eerdere berichten worden geladen op het nieuwe apparaat en de AI gaat verder waar ze gebleven waren. - Als de handtekening onjuist is, gedraagt de widget zich stilletjes zoals voorheen, als een normale chat per browser, en print de reden in de browserconsole zodat een ontwikkelaar deze kan opmerken. Je bezoekers zien nooit een foutmelding. - Het ID wordt exact vergeleken zoals je het hebt verzonden, dus onderteken dezelfde waarde die je doorgeeft als `id`, en gebruik overal hetzelfde ID voor dezelfde persoon. Twee dingen om te weten: - **Opnieuw genereren** in het Beheer-paneel geeft je een nieuw geheim. Pagina's die nog steeds ondertekenen met het oude geheim vallen terug op normale chats per browser totdat je server het nieuwe geheim gebruikt. Bestaande gesprekken blijven behouden; ze zijn gekoppeld aan het ID van de klant, niet aan het geheim. - Een gesprek dat iemand voerde voordat hij inlogde, als anonieme bezoeker, blijft een aparte chat. Het op account gebaseerde gesprek begint met het eerste bericht dat ze sturen terwijl ze zijn ingelogd. ### Wijzig de widgetinstellingen vanuit je eigen code (API) Alles op het **Beheren**-paneel van de widget kan ook worden gewijzigd via de [REST API](../api/reference.md), wat handig is als je veel websites beheert of de bijlageknop automatisch wilt uitschakelen voor een klant. Stuur een `PATCH` naar `https://api.dmchamp.com/v1/chat-widget-configs/CONFIG_ID` met je API-sleutel en alleen de velden die je wilt wijzigen — bijvoorbeeld `{"show_upload_button": false}` verbergt de bijlageknop, `{"show_emoji_button": false}` verbergt de emoji-kiezer en `{"launcher_icon": "chat-dots"}` vervangt het launcher-icoon. `CONFIG_ID` is dezelfde identificatie als in je embed-script. De volledige lijst met geaccepteerde velden (naam, openingsbericht, kleuren, launcher-icoon, toegestane domeinen, formulier voor bezoekersinformatie, privacyverklaring, thema, hoek- en letterstijl) staat in de [API-referentie](../api/reference.md) onder **Chatwidget**. Websites verwerken de wijziging de volgende keer dat de pagina wordt geladen. ### Wat kun je verwachten na de installatie Zodra je het script aan je website hebt toegevoegd, maakt de chatwidget automatisch een chatknop in de hoek van je website (standaard rechtsonder). De widget blijft op een vaste positie staan terwijl gebruikers door je pagina's scrollen, zodat deze altijd toegankelijk is. ::: master-only

De zwevende chatbubbel in de rechterbenedenhoek van een live website, voordat een bezoeker erop heeft geklikt — Dit is wat bezoekers op je site zien voordat ze de chat openen — alleen de zwevende knop, gepositioneerd volgens je Uiterlijk-instellingen.

::: Wanneer bezoekers op deze knop klikken, vouwt deze uit tot een volledig chatvenster waar ze een gesprek kunnen starten, waarbij je openingsbericht wordt getoond. Als Bezoekersinformatie verzamelen is ingeschakeld, verschijnt er eerst een klein formulier waarin om hun naam en e-mailadres (en optioneel telefoonnummer) wordt gevraagd voordat ze kunnen typen. ::: master-only

Het geopende chatpaneel met het openingsbericht op de achtergrond en het 'Voordat we beginnen'-formulier voor lead-capturing (voornaam, e-mail, telefoon) ervoor — Het geopende chatpaneel. Hier staat Bezoekersinformatie verzamelen aan, dus het "Voordat we beginnen..."-formulier verschijnt over het gesprek — bezoekers vullen het één keer in en chatten daarna normaal.

::: De chatinterface past zich automatisch aan verschillende schermformaten aan, waardoor deze naadloos werkt op zowel desktop- als mobiele apparaten. ### Je implementatie testen Nadat je de widget aan je site hebt toegevoegd, test je of deze werkt: 1. Open je website in een browser. 2. Klik op de chatknop om de widget te openen. 3. Stuur een testbericht en bevestig dat je een antwoord krijgt. 4. Herhaal dit op een ander apparaat of in een andere browser om te bevestigen dat het overal werkt. ::: master-only

Het chatpaneel nadat een bezoeker een testbericht heeft verzonden, met hun uitgaande berichtbubbel onder het openingsbericht — Na het verzenden van een bericht verschijnt dit als een uitgaande bubbel in de thread — je AI of team antwoordt in hetzelfde venster.

::: Als de chatwidget niet op je site verschijnt, controleer dan het volgende: 1. Zorg ervoor dat je `CONFIG_ID` hebt vervangen door je werkelijke configuratie-identificatie. 2. Zorg ervoor dat de script-tag vóór de afsluitende ``-tag is geplaatst. 3. Controleer de code op typefouten. ### Achter een bedrijfsfirewall Als de widget wel laadt voor het publiek, maar niet voor medewerkers op het kantoornetwerk, dan blokkeert het netwerk vrijwel zeker het domein waarvan deze wordt geladen. Vraag je IT-team om het volgende toe te staan via normale HTTPS op poort 443: - **Het domein in je insluitfragment** — het adres in de `