Ouvrir le chat depuis votre propre lien ou bouton

Vos visiteurs peuvent aussi ouvrir le chat depuis un lien ou un bouton de votre site, à la place de la bulle dans le coin : par exemple « Aide et assistance » dans la barre latérale ou « Question sur mon forfait » sur votre page des tarifs. La fenêtre du chat s’ouvre alors juste à côté de cet élément.

Aucun code supplémentaire n’est nécessaire : le code d’intégration habituel de la page Intégrer le widget suffit. Vous trouverez aussi un exemple à copier dans votre compte sous Projet → Intégration → Ouvrir le chat depuis votre propre lien.

Le cas le plus simple

Un lien vers #rc-open :

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

Ou un bouton avec l’attribut data-rc-open :

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

data-rc-open fonctionne sur tout élément, pas uniquement sur les boutons. Outre #rc-open, le widget accepte aussi #reactive-chat comme cible de lien.

Le clic est pris en compte même si le widget n’a pas encore fini de charger : la fenêtre s’ouvre dès qu’il est prêt.

Où la fenêtre apparaît

• À droite de l’élément s’il y a assez de place, sinon à gauche. Le haut de la fenêtre est aligné sur l’élément.
• Toujours entièrement visible : la fenêtre reste dans la zone visible et suit l’élément lors du défilement ou du redimensionnement du navigateur.
• Sur les écrans étroits (moins de 480 pixels de large, soit la plupart des smartphones), le chat s’ouvre en plein écran comme d’habitude. Il n’y a pas de place à côté de l’élément.
• Comme panneau latéral : si la fenêtre du chat est configurée comme panneau latéral sur toute la hauteur sous Apparence, elle s’ouvre à cet endroit plutôt qu’à côté de l’élément.
• Si le chat est déjà ouvert, la fenêtre se déplace vers le dernier lien cliqué.
• À la fermeture du chat (y compris avec la touche Échap), le focus clavier revient au lien ou au bouton qui l’a ouvert.

Pour ouvrir la fenêtre à sa position habituelle dans le coin, écrivez data-rc-open="corner". data-rc-anchor="none" produit le même effet :

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

Préremplir le champ de message

Avec data-rc-message, une phrase figure déjà dans le champ de message à l’ouverture du chat. Elle n’est pas envoyée : le visiteur peut la compléter, la modifier ou la supprimer, puis l’envoyer lui-même.

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

Jusqu’à 200 caractères sont utilisés. Le chat passe pour cela à l’onglet de conversation.

Choisir un onglet

Si votre chat possède plusieurs onglets, data-rc-tab détermine celui qui est affiché au premier plan à l’ouverture :

• msg – la conversation,
• home – l’écran d’accueil,
• help – les articles d’aide.

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

Si votre chat ne possède pas l’onglet indiqué (par exemple help sans articles d’aide), il s’ouvre simplement comme d’habitude.

Ouvrir le chat depuis votre propre JavaScript

Les mêmes options sont disponibles par un appel. anchor est l’élément à côté duquel la fenêtre doit apparaître ; message et tab sont facultatifs :

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

Sans anchor, la fenêtre s’ouvre à sa position habituelle. ReactiveChat('open') sans options se comporte comme auparavant. Si l’élément porte lui-même data-rc-message ou data-rc-tab, ces attributs s’appliquent aussi à l’appel ; les valeurs explicitement transmises dans l’appel sont prioritaires.

Si votre code risque de s’exécuter avant le chargement du code d’intégration, placez cette ligne devant. Les appels sont alors mis en file d’attente et exécutés dès que le widget est prêt :

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

Aucune bulle de chat

Si le chat doit être accessible uniquement via vos propres liens, par exemple « Aide et assistance » dans la barre latérale, deux possibilités existent.

Dans votre compte : sous Projet → Apparence → Marque, réglez Affichage sur Uniquement via vos propres liens (pas d’icône de chat) et enregistrez. Ce réglage s’applique sans modifier votre site. Recopiez toutefois ensuite le code d’intégration sous Projet → Installation : le nouveau code ne contient plus votre couleur de marque, ce qui évite un bref affichage de l’icône pendant le chargement de la page. Tant que le widget n’a pas pu récupérer votre réglage sur le serveur, par exemple sans connexion ou lors d’une première visite avant l’acceptation des cookies, l’icône apparaît encore par précaution, afin que le chat reste accessible.

Dans le code d’intégration : si l’icône ne doit jamais apparaître, masquez la bulle avec data-rc-hide-launcher="true" sur le code d’intégration. Cet attribut s’applique toujours, quel que soit le réglage de votre compte :

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

Veillez alors à ce que chaque page où les visiteurs doivent pouvoir accéder au chat contienne au moins un tel lien.

Dépannage

• Le clic ajoute seulement #rc-open à l’adresse : le widget n’est pas intégré à cette page ou n’a pas été chargé (par exemple sans consentement). Vérifiez la présence du code d’intégration.
• La fenêtre s’ouvre dans le coin plutôt qu’à côté du lien : l’élément porte-t-il data-rc-open="corner" ou data-rc-anchor="none" ? La fenêtre du navigateur mesure-t-elle moins de 480 pixels de large ? La fenêtre du chat est-elle configurée comme panneau latéral ?
• Le texte n’apparaît pas dans le champ de message : l’attribut s’appelle data-rc-message et doit figurer sur l’élément cliqué lui-même.

Les autres réglages du code sont décrits dans Intégrer le widget. Pour afficher une carte de votre offre dans le chat, consultez La carte promotionnelle dans le chat.

Pour approfondir dans la documentation

En détail : Référence de la balise script et API JavaScript. Retrouvez tous les chapitres dans la documentation.