La carte promotionnelle dans le chat

La carte promotionnelle permet d’afficher votre offre dans la fenêtre du chat, généralement votre forfait payant. Elle comporte une image, un titre, un court texte, un grand bouton et un lien textuel en dessous. Elle apparaît en haut de la conversation, sur l’écran d’accueil du chat ou aux deux endroits.

La carte n’est pas un message : elle ne figure pas dans l’historique visible par votre équipe et les visiteurs ne peuvent pas la fermer. Le bouton et le lien textuel ouvrent leur cible dans un nouvel onglet.

Configuration

La carte promotionnelle se trouve dans votre compte sous Projet → Apparence → Carte promotionnelle. L’aperçu du chat sur cette page affiche la carte pendant la saisie.

• Titre – obligatoire, jusqu’à 80 caractères.
• Texte en dessous – facultatif, jusqu’à 200 caractères.
• Image – facultative, une adresse commençant par https://. Sans image, la carte contient uniquement du texte.
• Texte du bouton – obligatoire, jusqu’à 40 caractères, par exemple « Essayer gratuitement 30 jours ».
• Lien du bouton – obligatoire, la page vers laquelle mène le bouton.
• Lien textuel – facultatif, jusqu’à 60 caractères, par exemple « Voir tous les forfaits ». Si vous ajoutez un lien textuel, une cible de lien est aussi obligatoire. Le widget ajoute lui-même la flèche finale.
• Couleur personnalisée du bouton et de l’accent – sans cette option cochée, la carte utilise votre couleur de marque. Le libellé du bouton devient automatiquement clair ou sombre pour rester lisible.
• Emplacement de la carte – « Dans la conversation, en haut » et/ou « Sur l’écran d’accueil ». Pour le second, l’écran d’accueil doit être activé.
• Audience – tous les visiteurs ou uniquement ceux qui ne sont pas identifiés (voir ci-dessous).

Utilisez des adresses commençant par https:// pour le lien du bouton et la cible du lien. Le widget n’affiche le bouton et le lien textuel que si leur cible utilise https.

La carte ne peut être activée que lorsqu’elle est complète : avec un titre, un texte de bouton, un lien de bouton et au moins un emplacement. Si un élément manque, elle est enregistrée comme brouillon et votre compte indique ce qui manque.

Les textes s’appliquent dans la langue par défaut du projet. Après l’enregistrement, il faut jusqu’à une minute pour que les visiteurs voient la modification.

Masquer la carte pour les clients payants

Les clients qui paient déjà n’ont pas besoin d’une publicité pour votre forfait payant. reactive.chat ne connaît pas les forfaits de vos utilisateurs, contrairement à votre site. Trois possibilités existent.

1. Audience « Uniquement les visiteurs non identifiés ». Si votre site connecte déjà les utilisateurs avec ReactiveChat('identify', …) (avec userId ou email), ceux-ci ne voient plus la carte. Cela suffit si seuls les clients payants disposent d’une connexion chez vous.

2. Une ligne dans le script de votre page, dès que vous savez que l’utilisateur paie :

ReactiveChat('promo', false);

Si cette ligne risque de s’exécuter avant le chargement du code d’intégration, placez ceci devant :

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

3. Un attribut dans le code d’intégration, si votre serveur fournit déjà une page différente aux clients payants :

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

Ces deux options ne s’appliquent qu’à la page où elles figurent et à cette consultation de page. ReactiveChat('promo', true) réaffiche la carte selon la configuration du compte.

Adapter la carte par page

Au lieu de true ou false, vous pouvez transmettre un objet. Ses champs remplacent les réglages du compte sur cette page ; tout champ omis provient de votre compte.

ReactiveChat('promo', {
  titel: 'Annual plan: 2 months free',
  knopf: 'Switch now',
  ziel: 'https://www.your-domain.com/pricing?annual=1'
});

Les noms de champs sont les mêmes que dans le compte (ils sont en allemand) :

• titel – titre (jusqu’à 80 caractères),
• text – texte en dessous (jusqu’à 200 caractères),
• bild – adresse de l’image commençant par https://,
• knopf et ziel – texte du bouton (jusqu’à 40 caractères) et lien du bouton,
• link_text et link_ziel – lien textuel (jusqu’à 60 caractères) et sa cible,
• farbe – couleur personnalisée au format #rrggbb,
• orte – une liste de "gespraech" (dans la conversation) et "start" (écran d’accueil) ; si ni l’objet ni votre compte ne la définissent, ["gespraech"] s’applique,
• zielgruppe – "alle" (tout le monde) ou "anonym" (uniquement les visiteurs non identifiés).

Vous pouvez aussi fournir des textes par langue, par exemple titel: { en: 'Annual plan', de: 'Jahrestarif' }. Les textes plus longs sont raccourcis.

Un objet affiche la carte sur cette page même si elle est désactivée dans votre compte. Fournissez alors vous-même tous les éléments : au minimum titel, et, pour un bouton, aussi knopf et ziel.

Impressions et clics

Dans votre compte, sous la carte promotionnelle, la section Résultats indique les impressions, les clics sur le bouton et sur le lien textuel, ainsi que le taux de clics, avec des totaux sur les 7 et 30 derniers jours et par jour. Par visiteur et par jour, au maximum une impression par emplacement et un clic par cible sont comptés. L’aperçu du compte ne compte pas, pas plus qu’une carte affichée uniquement via ReactiveChat('promo', {...}) alors qu’elle est désactivée dans le compte.

Événements pour votre propre analyse

Deux événements dans le script de votre page signalent aussi ce qui se passe avec la carte, par exemple pour transmettre ces informations à votre propre outil d’analyse.

ReactiveChat('on', 'promo:shown', function (e) {
  // e.ort: "gespraech" (conversation) or "start" (start page)
});

ReactiveChat('on', 'promo:click', function (e) {
  // e.ziel: "knopf" (button) or "link" (text link), e.ort: "gespraech" or "start"
});

promo:shown se déclenche une fois par emplacement et par page vue, uniquement lorsque la fenêtre du chat est ouverte et contient la carte. Personne n’a vu une carte à l’intérieur d’un chat fermé. promo:click se déclenche à chaque clic sur le bouton ou le lien textuel.

Si la carte n’apparaît pas

• Est-elle activée ? Une carte incomplète reste un brouillon.
• Jusqu’à une minute s’écoule après l’enregistrement avant que les visiteurs voient la modification.
• Emplacement « écran d’accueil » : l’écran d’accueil du chat est-il activé ?
• Audience « non identifiés » : si votre site connecte le visiteur avec ReactiveChat('identify', …), celui-ci ne voit pas la carte.
• Désactivée sur cette page ? Recherchez data-rc-promo="false" dans le code d’intégration et ReactiveChat('promo', false) dans vos scripts.
• Bouton ou lien textuel absent : la cible ne commence pas par https://.

L’ouverture du chat depuis un lien ou un bouton de votre site est décrite dans Ouvrir le chat depuis votre propre lien ou bouton. Les bases de l’intégration figurent dans Intégrer le widget.

Pour approfondir dans la documentation

En détail : L’écran d’accueil du chat. Retrouvez tous les chapitres dans la documentation.