Webchat Matcha

Qui suis-je ?

Créé avec amour par l’équipe Matcha, je suis là pour accompagner vos clients dans vos achats de vin. En discutant de manière naturelle, comme le fait un caviste ou un sommelier, je les guide vers la ou les bouteilles correspondant à leurs envies :

Vins rouges léger autour de 8€
Avez-vous du Morgon à moins de 10€ ?
Quel vin ouvrir avec des lasagnes ?
Je cherche une bouteille à offrir à mon père : des idées autour de 20€ ?
...

Pré-requis

Vous disposez d'un identifiant webchat unique, fourni par Matcha.
Vos vins (ou les vins partenaires) sont déjà dans Matcha.

Installation

Dans votre code html, insérez dans la balise body le script suivant :

<script
  src="https://webchat.matcha.wine/webchat.js"
  clientId="votre-identifiant-webchat-matcha"
></script>

Paramètres obligatoires :
- src : url de la bibliothèque du chatbot.
- clientId : Votre identifiant webchat de Matcha. Il est différent des identifiants API.
Paramètres optionnels :
- newTab : Booléen (défaut false). Par défaut, lorsque l'utilisateur clique sur un vin, le chatbot ouvre la page du vin dans le même onglet. Pour ouvrir dans un nouvel onglet, activer cette propriété, sans valeur : <script [...] newTab></script>
- userId : String. Un identifiant pour suivre vos utilisateurs dans les logs de conversation. Cela peut être l'id de vos utilisateurs loggés, ou un identifiant de provenance (campagnes, analytics, etc...).
- shopId : String. Si vous disposez de plusieurs magasins et que vous avez entré les informations de sku, vous pouvez filtrer la sélection du chatbot sur un magasin précis.
- onPurchase : String (default null). Cette intégration est fortement recommandée. Envoie l'action d'achat vers le panier de votre site ecommerce via l'API Matcha purchase (cliquer sur la documentation pour l'implémenter).
- lang : String (default "fr"). Values can be in: ["en", "fr"]. Le langage de l'interface et la conversation de Matcha Advisor.

Pilotage

En javascript

Les paramètres fournis à l'initialisation du webchat sont statiques : ils ne sont lus qu'une fois et ne peuvent être changés pendant la navigation de l'utilisateur. Voici les paramètres permettant de piloter le webchat après son initialisation. Ils sont tous portés par l'objet global window.__MATCHA__PREFERENCES.

__MATCHA__PREFERENCES.deactivate() : Exécuter cette fonction pour désactiver l'intégralité du chatbot : il disparaît entièrement de la page.
__MATCHA__PREFERENCES.activate() : Exécuter cette fonction pour réactiver le chatbot.

Via l'url

Il est possible d'activer le chatbot en mode "ouvert" en ajoutant simplement un hash dans l'url. Cette fonction est utile lorsque vous disposez d'un bouton ou d'une bannière conduisant vers le chatbot.

Il suffit d'ajouter "#open-matcha" à la fin d'un lien. Par exemple, https://www.votre-site.fr/vin#open-matcha . Le chatbot doit impérativement être présent sur la page du lien en question.

La fonction nécessite quelques tests car la gestion des liens du navigateur peut être capricieuse selon la manière dont le site sur lequel il est implanté gère les liens.

FAQ

Avez-vous une version React ?

Oui.

Puis-je sauvegarder webchat.js sur mon site ?

Il n'est pas possible de sauvegarder webchat.js afin de le stocker sur votre site. En effet le webchat deviendrait rapidement incompatible avec l'évolution automatique de notre chatbot.

Quelle est la compatibilité navigateur ?

Le webchat est compatible avec Firefox, Chrome, Safari, Edge... Il n'est pas compatible avec IE11 ou antérieur.

J'utilise Google Tag Manager ou un autre outil, et il n'accepte pas les attributs html non-standard comme clientId. Comment intégrer le script ?

Intégrer le tag en javascript, comme dans cette méthode.

Exemples d'intégration :

<script>
  (function() {
    // Change 'script' to whatever element you want to create, e.g. 'img' or 'input'.
    var el = document.createElement('script');
    
    // Add any standard attributes you need, e.g. 'src', 'width', 'type', 'name'.
    // The syntax is el.setAttribute(attribute_name, attribute_value).
    el.setAttribute('src', 'https://webchat.matcha.wine/webchat.js');
    
    // Add any non-standard attributes with the same method.
    el.setAttribute('clientId', 'votre-identifiant-webchat-matcha');
    
    // Finally, inject the element to the end of <body>
    document.body.appendChild(el);
  })();
</script>

DiesIrae/readme.md