Intégrer le widget

La version courte

Placez cette ligne dans l’en-tête de votre page et remplacez SITE_KEY par votre clé :

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

C’est tout. Le chargeur pèse 3,48 kB et ne récupère le noyau que lorsque le navigateur a du temps libre ou que le visiteur touche le bouton du chat.

Si vous distribuez vous-même loader.js, une ligne supplémentaire est nécessaire

Certains préfèrent charger le script depuis leur propre répertoire plutôt que depuis notre réseau de distribution, pour respecter une politique interne, utiliser un environnement de préproduction ou simplement par habitude. C’est possible, mais vous devez alors indiquer explicitement la connexion du chat :

<script src="/js/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-ws-url="wss://ws.reactive.chat/rc_wss/"
        async></script>

Pourquoi : sinon, le widget déduit l’adresse de l’emplacement d’origine du script. S’il s’agit de votre domaine, il y cherche aussi le chat et ne trouve rien.

Et l’échec est trompeur. Le bouton apparaît, la fenêtre s’ouvre, les couleurs et la langue sont correctes : tout semble prêt. Mais aucun message n’arrive. Aucune erreur n’est affichée : la connexion réessaie en arrière-plan, ce qui masque précisément le problème. Seule la console du navigateur indique l’hôte recherché en vain.

La valeur ci-dessus est identique pour tous les comptes chez nous. Vous n’indiquez votre propre valeur que si vous exploitez vous-même le serveur.

Via un sous-domaine de votre site

Pour faire fonctionner le chat comme ressource de votre propre domaine via votre sous-domaine (par exemple chat.your-company.com au lieu de cdn.reactive.chat), consultez le guide du domaine personnalisé pour configurer le proxy. Votre compte affiche ensuite le code correspondant.

Lorsque WebSocket est bloqué

Si un réseau ne laisse pas passer WebSocket, par exemple derrière un proxy d’entreprise, le chat continue automatiquement avec du HTTPS ordinaire. Votre Content Security Policy doit pour cela autoriser l’adresse https:// ci-dessous en plus de l’adresse wss://. Repli HTTP explique quand le repli s’applique et comment le forcer pour un test.

Ouvrir le chat depuis vos liens, afficher une carte promotionnelle

Tout lien ou bouton de votre page peut ouvrir le chat, avec la fenêtre juste à côté : Ouvrir le chat depuis votre propre lien ou bouton. Pour afficher une carte de votre offre dans le chat, par exemple votre forfait payant, consultez La carte promotionnelle dans le chat.

Intégrer automatiquement le texte de confidentialité

Un petit élément sur votre page de politique de confidentialité affiche le texte adapté au chat, toujours conforme aux réglages de votre projet et dans la langue de la page : Intégrer automatiquement le texte de confidentialité.

Pourquoi il n’y a pas de script en ligne

La forme habituellement fournie par nos concurrents est un <script> en ligne. Une Content Security Policy stricte sans unsafe-inline le bloque avant qu’une seule ligne s’exécute. La forme avec attributs ci-dessus n’en a pas besoin.

Autres autorisations nécessaires dans votre politique :

• script-src : l’hôte de distribution, ici cdn.reactive.chat
• connect-src : l’adresse WebSocket, ici wss://ws.reactive.chat
• connect-src : également la même adresse avec https:// soit ici https://ws.reactive.chat – utilisée par le formulaire hors ligne et le repli HTTP lorsqu’un proxy d’entreprise bloque WebSocket

Réglages de la balise script

1. data-rc-site-key — obligatoire. Sans cet attribut, rien ne démarre, volontairement.
2. data-rc-locale — de, en ou pl. En son absence, le navigateur décide.
3. data-rc-brand — votre couleur de marque. Le texte est recalculé jusqu’à être lisible.
4. data-rc-ws-url — obligatoire dès que vous ne chargez pas loader.js depuis cdn.reactive.chat. Voir la section ci-dessus.

Le reste figure dans la vue d’ensemble des fonctions et sur la page des tarifs.

Pour approfondir dans la documentation

Étape par étape : Démarrage rapide. Tous les attributs de la balise script, avec type et valeur par défaut : Référence de la balise script. Retrouvez tous les chapitres dans la documentation.