Pour élargir la couverture de vos agents Business Messages, vous pouvez ajouter des conversations points d'entrée sur vos sites Web avec le widget Business Messages.
Le widget Business Messages n'est compatible qu'avec les appareils mobiles équipés d'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 Business Messages bibliothèque JavaScript, configurer l'emplacement du widget sur la page et spécifier le contexte dans le widget.
Pour obtenir la liste des fonctions, propriétés et événements de disponibilité, consultez la page Messages widget. Voir Guide de style du widget Business Messages pour obtenir des recommandations de style utiliser.
Créer un widget
Modifiez les valeurs suivantes pour créer un widget Business Messages à insérer dans votre site Web.
| Valeur | Description |
|---|---|
| LAYOUT | Comment le bouton apparaît-il sur
votre site Web. Il peut s'agir de button, floating, inline ou advanced. À
utiliser vos propres styles, utiliser advanced, copier la feuille de style dans votre page Web,
et les modifier selon les besoins. |
| AGENT_ID | Votre ID d'agent |
| BUTTON_TEXT | Le texte que vous comme le bouton à afficher. |
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
Exemple de widget
Ce widget 
est généré par le code suivant:
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
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 la balise <head> de chaque page où vous souhaitez
afficher un widget Business Messages. Vous n'avez besoin que d'une seule bibliothèque JavaScript
contenu inclus 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
éléments de page existants avec un attribut data-bm-widget-agent-id. La
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
automatiquement appelé 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 pour détecter
avec un attribut data-bm-widget-agent-id et convertit ces éléments
dans des widgets Business Messages accessibles. Tous les éléments à convertir
à un 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 le paramètre facultatif
l'attribut data-bm-widget-context dans l'élément HTML qui contient la
data-bm-widget-agent-id. Spécifiez une valeur de chaîne pour
data-bm-widget-context Les messages envoyés à votre webhook incluent le contexte
.
data-bm-widget-context peut avoir n'importe quelle valeur, par exemple une valeur
en fonction de l'emplacement sur la page où le widget s'affiche au moment de l'exécution. Dans les
exemples, la valeur de l'attribut
"eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" est un
Chaîne JSON {"product":"dryer","offer-code":"ASDADSA"} encodée en base64.
data-bm-widget-context est limité à 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 le
La balise <head>, qui analyse ensuite automatiquement la page HTML et effectue une conversion
"myagentid" dans les 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 de widgets programmatiques
Pour un contrôle ultraprécis de votre configuration, vous pouvez initialiser
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 de
l'initialisation ne vous oblige pas à marquer les éléments avec
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é de l'appareil
Utilisez
window.bmwidget.supported
pour vérifier la compatibilité de Business Messages avec un appareil. L'exemple de vérification suivant
pour la compatibilité avec les appareils avant d'initialiser l'élément HTML avec un ID
"monBoutonPersonnalisé" 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 monopages, où 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 initialiser le nouvel élément 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 est réinitialisé lorsque l'état de la page change.
Exemple Angular
Le code suivant initialise window.bmwidget.scan() lors du 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 React
Le code suivant initialise la fonction window.bmwidget.scan() lors de l'appel
le 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 commencer des conversations Business Messages depuis votre site Web et recevoir valeurs de contexte spécifiques aux widgets dans les messages des utilisateurs.