De chat openen vanuit een eigen link of knop

In plaats van via de chatballon in de hoek kunnen uw bezoekers de chat ook openen via een link of knop op uw website — bijvoorbeeld “Hulp & support” in de zijbalk of “Vraag over mijn abonnement” op uw prijspagina. Het chatvenster opent dan direct naast dat element.

Er is geen extra code nodig: de gewone insluitcode uit De widget insluiten volstaat. In uw account staat ook een kopieerbaar voorbeeld onder Project → Insluiten → De chat openen vanuit een eigen link.

Het eenvoudigste geval

Een link naar #rc-open:

<a href="#rc-open">Help & support</a>

Of een knop met het attribuut data-rc-open:

<button type="button" data-rc-open>Open chat</button>

data-rc-open werkt op elk element, niet alleen op knoppen. Naast #rc-open accepteert de widget ook #reactive-chat als linkdoel.

De klik telt ook als de widget nog niet volledig geladen is: het venster opent zodra de widget klaar is.

Waar het venster verschijnt

• Rechts van het element als er genoeg ruimte is, anders links. De bovenkant van het venster lijnt uit met het element.
• Altijd volledig zichtbaar: het venster blijft binnen het zichtbare gebied en volgt het element wanneer de pagina scrolt of het browservenster van grootte verandert.
• Op smalle schermen (minder dan 480 pixels breed, dus de meeste smartphones) opent de chat zoals gewoonlijk schermvullend. Daar is geen ruimte naast het element.
• Als zijpaneel: als het chatvenster onder Uiterlijk als zijpaneel op volledige hoogte is ingesteld, opent het daar en niet naast het element.
• Als de chat al open is, verhuist het venster naar de laatst aangeklikte link.
• Wanneer de chat sluit (ook met Escape), keert de toetsenbordfocus terug naar de link of knop waarmee de chat is geopend.

Om het venster op de gebruikelijke plek in de hoek te openen, schrijft u data-rc-open="corner". data-rc-anchor="none" doet hetzelfde:

<button type="button" data-rc-open="corner">Open chat</button>

Het berichtveld vooraf invullen

Met data-rc-message staat bij het openen van de chat al een zin in het berichtveld. Die wordt niet verzonden — de bezoeker kan aanvullen, wijzigen of verwijderen en verzendt zelf.

<button type="button" data-rc-open data-rc-message="I have a question about my plan">
  Question about my plan
</button>

Er worden maximaal 200 tekens gebruikt. De chat schakelt hiervoor over naar het gesprekstabblad.

Een tabblad kiezen

Als uw chat meerdere tabbladen heeft, bepaalt data-rc-tab welk tabblad bij het openen vooraan staat:

• msg — het gesprek,
• home — de startpagina,
• help — de hulpartikelen.

<a href="#rc-open" data-rc-tab="help">Browse help articles</a>

Als uw chat het opgegeven tabblad niet heeft (bijvoorbeeld help zonder hulpartikelen), opent de chat gewoon zoals gebruikelijk.

Openen vanuit eigen JavaScript

Dezelfde opties zijn beschikbaar als aanroep. anchor is het element waarnaast het venster moet verschijnen; message en tab zijn optioneel:

document.querySelector('#my-button').addEventListener('click', function (ev) {
  ReactiveChat('open', {
    anchor: ev.currentTarget,
    message: 'I have a question about my plan',
    tab: 'msg'
  });
});

Zonder anchor opent het venster op de gebruikelijke plek. ReactiveChat('open') zonder opties werkt zoals voorheen. Als het element zelf data-rc-message of data-rc-tab bevat, gelden die ook voor de aanroep; wat u uitdrukkelijk in de aanroep doorgeeft, heeft voorrang.

Als uw code mogelijk draait voordat de insluitcode is geladen, zet u deze regel ervoor. Aanroepen worden dan in de wachtrij gezet en uitgevoerd zodra de widget klaar is:

window.ReactiveChat = window.ReactiveChat || function () { (window.ReactiveChat.q = window.ReactiveChat.q || []).push(arguments); };

Helemaal geen chatballon

Als de chat alleen via uw eigen links bereikbaar moet zijn — bijvoorbeeld “Hulp & support” in de zijbalk — zijn er twee manieren.

In uw account: zet onder Project → Uiterlijk → Merk de Weergave op Alleen via uw eigen links (geen chatpictogram) en sla op. De instelling werkt zonder wijziging aan uw website. Kopieer daarna toch de insluitcode onder Project → Installatie opnieuw: het nieuwe fragment bevat uw merkkleur niet meer, zodat het chatpictogram niet kort opflitst bij het laden van de pagina. Zolang de widget uw instelling niet van de server kon ophalen — bijvoorbeeld zonder verbinding of bij een eerste bezoek voordat de bezoeker cookies heeft geaccepteerd — verschijnt het pictogram nog als vangnet, zodat de chat bereikbaar blijft.

Op het fragment: als het pictogram nooit mag verschijnen, verbergt u de chatballon met data-rc-hide-launcher="true" op de insluitcode. Dit attribuut geldt altijd, ongeacht wat in uw account is ingesteld:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-hide-launcher="true"
        async></script>

Zorg dan dat elke pagina waarop bezoekers de chat moeten kunnen bereiken minstens één zo’n link heeft.

Problemen oplossen

• Klikken voegt alleen #rc-open aan het adres toe: de widget is niet op deze pagina ingesloten of is niet geladen (bijvoorbeeld zonder toestemming). Controleer of de insluitcode aanwezig is.
• Het venster opent in de hoek in plaats van naast de link: staat er data-rc-open="corner" of data-rc-anchor="none" op het element? Is het browservenster smaller dan 480 pixels? Is het chatvenster ingesteld als zijpaneel?
• De tekst verschijnt niet in het berichtveld: het attribuut heet data-rc-message en moet op het aangeklikte element zelf staan.

De overige instellingen van het fragment staan beschreven in De widget insluiten. Hoe u een kaart voor uw eigen aanbod in de chat toont, staat in De promotiekaart in de chat.

Verder lezen in de documentatie

Uitgebreid: Referentie van de scripttag en JavaScript-API. Alle hoofdstukken staan in de documentatie.