Intégrer à un site Web

Pour élargir la couverture de vos agents Business Messages, vous pouvez ajouter des points d'entrée de conversation à vos sites Web à l'aide du widget Business Messages.

Le widget Business Messages n'est compatible qu'avec les appareils mobiles Android 5 ou version ultérieure. Les autres systèmes d'exploitation mobiles et environnements de bureau ne sont pas compatibles.

Ajouter un widget Business Messages à un site Web

Pour activer les conversations depuis un site Web, vous devez charger la bibliothèque JavaScript Business Messages, configurer l'emplacement du widget sur la page et spécifier des valeurs de contexte dans le widget.

Pour obtenir la liste des fonctions, des propriétés et des événements de disponibilité, consultez la page Widget Messages commerciaux. Consultez le guide de style du widget Business Messages pour obtenir des recommandations sur le style et l'utilisation.

Créer un widget

Modifiez les valeurs suivantes pour créer un widget Business Messages à insérer sur votre site Web.

Value Description
LAYOUT Ce bouton apparaît sur votre site Web. Il peut s'agir de button, floating, inline ou advanced. Pour utiliser vos propres styles, utilisez advanced, copiez la feuille de style sur votre page Web et modifiez-la si nécessaire.
AGENT_ID Votre ID d'agent.
BUTTON_TEXT Texte que le bouton doit afficher. 
    <script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
    <button data-bm-widget-layout="LAYOUT" data-bm-widget-agent-id="AGENT_ID">
      <span class="bm-widget-button-text">BUTTON_TEXT</span>
    </button>

Exemple de widget

Ce widget Aperçu du widget Web est généré par le code suivant:

    <script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
    <button data-bm-widget-layout="button" data-bm-widget-agent-id="abcdefghijkl">
      <span class="bm-widget-button-text">Chat with us</span>
    </button>

Personnaliser l'intégration du widget Business Messages

Charger la bibliothèque JavaScript

Pour charger la bibliothèque JavaScript Business Messages, copiez le code suivant et collez-le immédiatement dans le tag <head> sur chaque page sur laquelle vous souhaitez afficher un widget Business Messages. Vous n'avez besoin que d'une seule bibliothèque JavaScript par page.

<!-- Global Business Messages widget library reference - Business Messages -->
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js?cb=callback">
</script>

L'extrait télécharge et charge la bibliothèque JavaScript, qui initialise les éléments existants de la page avec un attribut data-bm-widget-agent-id. La bibliothèque JavaScript convertit les éléments de page identifiés en éléments cliquables qui chargent la surface de conversation Business Messages lorsque l'utilisateur appuie dessus.

Le paramètre facultatif cb contient le nom d'une fonction appelée automatiquement une fois la bibliothèque JavaScript chargée.

Configurer l'emplacement du widget

Lorsque la bibliothèque JavaScript Business Messages se charge, elle analyse le site Web à la recherche d'éléments avec un attribut data-bm-widget-agent-id et les convertit en widgets fonctionnels Business Messages. Chaque élément que vous souhaitez convertir en widget doit inclure un attribut data-bm-widget-agent-id avec une valeur correspondant à l'ID de l'agent lancé.

Exemple: Définitions de widgets

<!-- Example div element that converts into a Business Messages widget -->
<div data-bm-widget-agent-id="myagentid">
  Click for Business Messages
</div>

<!-- Example button element that converts into a Business Messages widget -->
<button data-bm-widget-agent-id="myagentid">
  Click for Business Messages
</button>

Transmettre des valeurs de contexte

Pour configurer le contexte du widget et le transmettre à votre webhook, incluez l'attribut facultatif data-bm-widget-context dans l'élément HTML contenant l'attribut data-bm-widget-agent-id. Spécifiez une valeur de chaîne pour data-bm-widget-context. Les messages envoyés à votre webhook incluent la valeur de contexte.

data-bm-widget-context peut avoir n'importe quelle valeur, par exemple une valeur pertinente par rapport à l'endroit où le widget s'affiche au moment de l'exécution sur la page. Dans les exemples suivants, la valeur de l'attribut "eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" est une chaîne JSON {"product":"dryer","offer-code":"ASDADSA"} encodée en base64.

La limite de data-bm-widget-context est de 512 octets.

Exemple: Définitions de widgets avec contexte

<!-- Example div element that converts into a Business Messages widget -->
<div
  data-bm-widget-agent-id="myagentid"
  data-bm-widget-context="eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==">
  Click for Business Messages
</div>

<!-- Example button element that converts into a Business Messages widget -->
<button
  data-bm-widget-agent-id="myagentid"
  data-bm-widget-context="eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==">
  Click for Business Messages
</button>

Exemple de site Web

L'exemple suivant charge la bibliothèque JavaScript Business Messages dans la balise <head>, qui analyse ensuite la page HTML et convertit "myagentid" en widgets Business Messages.

<html>
  <head>
    <script
      crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js">
    </script>
  </head>
  <body>
    This is a test widget:
    <div
      data-bm-widget-agent-id="myagentid"
      data-bm-widget-context="eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==">
      Click for Business Messages
    </div>
    Click it.
    And this is a widget:
    <button
      data-bm-widget-agent-id="myagentid"
      data-bm-widget-context="VGhpcyBpcyBhIGJ1dHRvbiB0ZXN0Lgo=">
      Click for Business Messages
    </button>
  </body>
</html>

Initialisation du widget programmatique

Pour un contrôle plus précis de votre configuration, vous pouvez choisir d'initialiser votre widget par programmation. Pour initialiser un élément par programmation, appelez bmwidget.init après le chargement de la bibliothèque JavaScript Business Messages. Cette forme d'initialisation ne nécessite pas de marquer des éléments avec l'attribut data-bm-widget-agent-id.

<head>
  <!-- Global Business Messages widget library reference - Business Messages -->
  <script
    crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js?cb=initWidget">
  </script>

  <script type="text/javascript">
    // Convert HTML element with ID = myCustomButton into a Business Messages widget
    function initWidget() {
      window.bmwidget.init(document.getElementById('myCustomButton'), {
        'agentId': 'myagentid',
        'context': 'eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg=='
      });
    };
  </script>
</head>

Vérifier la compatibilité des appareils

Utilisez window.bmwidget.supported pour vérifier la compatibilité de Business Messages pour un appareil. L'exemple suivant vérifie la compatibilité des appareils avant d'initialiser l'élément HTML avec l'ID "myCustomButton" en tant que widget Business Messages.

<head>
  <!-- Global Business Messages widget library reference - Business Messages -->
  <script
    crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js?cb=initWidget">
  </script>

  <script type="text/javascript">
    // Convert HTML element with ID = myCustomButton into a Business Messages widget
    function initWidget() {
      // Check that the user has a supported device
      if (window.bmwidget.supported) {
        window.bmwidget.init(document.getElementById('myCustomButton'), {
          'agentId': 'myagentid',
          'context': 'eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg=='
        });
      }
    };
  </script>
</head>

Initialisation du widget pour les applications monopages

Pour les applications à page unique, où l'attribut data-bm-widget-agent-id est créé au moment de l'exécution, la bibliothèque JavaScript Business Messages expose un objet global window.bmwidget.

Chaque fois qu'un nouvel élément est ajouté à la page, appelez window.bmwidget.scan() pour l'initialiser en tant que widget Business Messages.

window.bmwidget.scan();

Appelez window.bmwidget.scan() sur le rappel de mise à jour DOM pour vous assurer que l'attribut data-bm-widget-agent-id se réinitialise lorsque l'état de la page change.

Exemple Angular

Le code suivant initialise window.bmwidget.scan() lors du rappel de chargement du composant dans Angular.

import { Component, OnInit} from '@angular/core';

export class AppComponent implements onInit {
  ngOnInit() {
    // Initialize tag on re-render
    window.bmwidget.scan();
  }
}

Exemple de réaction

Le code suivant initialise la fonction window.bmwidget.scan() lors du rendu d'un élément dans React.

import React, { useState, useEffect } from 'react';

function WrapperComponent() {
  ...
  useEffect(() => {
    // Initialize on re-render
    window.bmwidget.scan();
  });

  return (<div><button data-bm-widget-agent-id="myagentid">Chat with us</button></div>);
}

Étapes suivantes

Maintenant que vous avez intégré un widget Business Messages à votre site Web, vous pouvez lancer des conversations Business Messages depuis votre site Web et recevoir des valeurs de contexte spécifiques aux widgets dans les messages des utilisateurs.