De chatknop: vorm, grootte, pictogram, opschrift en positie

De chatknop is de knop onder in de hoek waarmee bezoekers de chat openen. U stelt deze in onder /app/projects/{id} op het tabblad Uiterlijk, gedeelte Merk. Een livevoorbeeld, Zo ziet uw chatknop eruit, toont elke wijziging meteen. U slaat op met Opslaan; de wijziging bereikt uw bezoekers binnen een minuut.

De kleur van de chatknop is uw primaire kleur, zie Kleuren, lettertype en thema.

Sjablonen voor de chatknop

20 kant-en-klare combinaties, bijvoorbeeld “Virtuele assistent – Antwoordt binnen 2 min”, “Een vraag?”, “Klantenservice – Ma–vr 8:00–18:00” of “AI-assistent – Antwoordt in seconden”. Eén klik vult vorm, pictogram, opschrift, tweede regel, weergave en grootte in. Uw kleuren blijven ongewijzigd; er wordt pas iets opgeslagen wanneer u op Opslaan drukt. Pas daarna de teksten aan.

De velden

• Vorm — cirkel (standaard), afgerond, vierkant, tekstballon of blad. Bij de tekstballon wijst een puntige hoek naar de schermhoek. Bij het blad zijn twee tegenoverliggende hoeken klein.
• Grootte (px) — 44 tot 72, standaard 56. 44 is het kleinste oppervlak dat nog betrouwbaar kan worden aangetikt.
• Grootte op telefoons (px) — 40 tot 72. Leeg betekent: 48 px, of kleiner als de grootte hierboven kleiner is.
• Pictogram — tekstballon (standaard), vraagteken, headset, fonkeling of geen pictogram (alleen tekst). Zonder pictogram heeft de chatknop een opschrift en de weergave altijd nodig. Anders toont de widget de tekstballon.
• Opschrift — zichtbare tekst naast het pictogram, maximaal 40 tekens. Leeg betekent: alleen het pictogram.
• Tweede regel — een kleinere tweede regel onder het opschrift, maximaal 60 tekens. Zonder opschrift blijft deze onzichtbaar.
• Weergave — wanneer het opschrift zichtbaar is:
• altijd (standaard),
• alleen bij mouse-over — alleen het pictogram; het opschrift schuift uit bij mouse-over of toetsenbordfocus. Op aanraakapparaten blijft alleen het pictogram staan.
• alleen op grote schermen — opschrift pas vanaf 481 px breedte, daaronder alleen het pictogram,
• Alleen via uw eigen links (geen chatpictogram) — er is helemaal geen chatknop, zie hieronder.

Opschrift per taal

Opschrift en tweede regel uit het formulier gelden in elke taal. Als u ze per taal wilt laten verschillen, voert u ze onder Teksten & formulieren → Eigen teksten in met de sleutels launcher.text en launcher.subtext. Een vermelding daar gaat vóór de velden hier. Meer hierover in Teksten en talen.

Chat helemaal zonder chatknop

Met de weergave Alleen via uw eigen links (geen chatpictogram) verschijnt geen chatknop. Bezoekers openen de chat via uw eigen links of knoppen:

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

Plaats minstens één zo’n link op elke pagina waarop de chat bereikbaar moet zijn. Kopieer daarna de insluitcode onder Installatie opnieuw: de nieuwe bevat uw merkkleur niet meer, zodat de chatknop niet kort opflitst tijdens het laden van de pagina.

Zolang de widget uw instelling niet van de server kon ophalen, bijvoorbeeld zonder verbinding of bij een eerste bezoek vóór cookietoestemming, verschijnt de chatknop nog als vangnet. Als deze nooit mag verschijnen, voeg dan ook dit aan het fragment toe:

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

data-rc-hide-launcher geldt altijd, ongeacht de instelling in uw account. Zonder chatknop zijn er ook geen tooltipballonnen bij de knop. Alle manieren om de chat vanuit eigen elementen te openen, met vooraf ingevulde tekst en tabbladkeuze, staan in De chat openen vanuit een eigen link of knop.

In plaats van een link kunt u ook een bestaand element op uw pagina als trigger gebruiken. data-rc-launcher-selector verwacht een CSS-selector:

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

Positie en afstand

Zijde, afstand en stapelniveau stelt u op het fragment in. Uw account heeft hiervoor geen veld.

• data-rc-position — right (standaard) of left.
• data-rc-offset — afstand tot de rand in pixels als JSON, standaard {"x":20,"y":20}. De widget voegt veilige gebieden toe, zoals de inkeping op de iPhone.
• data-rc-z-index — het stapelniveau, standaard 2147483000. Verlaag dit als een eigen element boven de chat moet staan.

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-position="left"
        data-rc-offset='{"x":24,"y":96}'
        async></script>

Dezelfde velden werken ook als position, offset en zIndex via window.ReactiveChatSettings of ReactiveChat('boot', …). Zie Technische integratie.

Balken vermijden

Als uw pagina onderaan een vaste balk heeft, zoals een cookiebanner, winkelmandbalk of navigatiebalk op telefoons, schuift de chatknop automatisch erboven, met 12 px tussenruimte. De widget meet opnieuw wanneer de pagina verandert. Elementen die meer dan 40 % van de vensterhoogte innemen, gelden als overlay. Die worden niet ontweken.

U kunt dit op het fragment uitschakelen:

data-rc-avoid-overlap="false"

Chatknop met een eigen pictogram

Een volledig eigen pictogram werkt in code via het merk: launcher.icon verwacht een inline-SVG of een data:-adres en gaat vóór het gekozen pictogram.

ReactiveChat('setBrand', {
  launcher: { shape: 'bubble', label: 'Ask us', icon: 'data:image/svg+xml,…' }
});

Let op: een merk met zulke velden op het fragment (data-rc-brand) gaat op deze pagina vóór de instellingen uit uw account. Zie Kleuren, lettertype en thema.

Op telefoons

Onder 481 px breedte (en op telefoons in liggende stand tot 480 px hoogte) geldt de grootte voor telefoons. Met de weergave alleen op grote schermen toont de chatknop daar alleen het pictogram. Als de bezoeker de chat opent, vult het venster het hele scherm en verdwijnt de chatknop naar de achtergrond.

Als de chatknop er anders uitziet dan verwacht

• Geen chatknop zichtbaar: staat de weergave op Alleen via uw eigen links, of is data-rc-hide-launcher="true" op het fragment ingesteld? Is het project gepauzeerd?
• De chatknop verschijnt hoewel “Alleen via uw eigen links” is ingesteld: de widget heeft de instelling nog niet van de server ontvangen (fallback). Voeg ook data-rc-hide-launcher="true" toe.
• De tekstballon verschijnt ook zonder pictogram: zonder pictogram zijn een opschrift en de weergave altijd nodig.
• Wijzigingen komen niet aan: staat er een data-rc-brand op het fragment met een opschrift, pictogram of andere extra velden? Dan heeft het fragment voorrang.