Para ampliar el alcance de tus agentes de Business Messages, puedes agregar los puntos de entrada de tus sitios web con el widget de Business Messages.
El widget de Business Messages solo admite dispositivos móviles con Android 5 o versiones posteriores. No se admiten otros sistemas operativos para dispositivos móviles ni entornos de escritorio.
Cómo agregar un widget de Business Messages a un sitio web
Para habilitar las conversaciones desde un sitio web, debes cargar Business Messages Biblioteca de JavaScript, configurar la ubicación del widget en la página y especificar el contexto dentro del widget.
Para obtener una lista de las funciones, las propiedades y los eventos disponibles, consulta Empresas Mensajes automático. Consulta la guía de estilo para el widget de Business Messages para obtener recomendaciones de estilo y usar.
Cómo crear un widget
Actualiza los siguientes valores para crear un widget de Business Messages para insertarlo en tu sitio web.
| Valor | Descripción |
|---|---|
| LAYOUT | Cómo aparece el botón en
tu sitio web. Puede ser button, floating, inline o advanced. Para
usar tus propios estilos, usar advanced, copiar la hoja de estilo en tu página web
y modificarlos según sea necesario. |
| AGENT_ID | Tu ID de agente. |
| BUTTON_TEXT | El texto que como el botón para mostrar. |
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
Widget de ejemplo
El siguiente código genera el widget 
:
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
Personaliza la integración del widget de Business Messages
Carga la biblioteca de JavaScript
Para cargar la biblioteca de JavaScript de Business Messages, copia el siguiente código y
pégalo inmediatamente en la etiqueta <head> en todas las páginas donde desees
mostrar un widget de Business Messages. Solo necesitas una biblioteca JavaScript
inclusión por página.
<!-- Global Business Messages widget library reference - Business Messages -->
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js?cb=callback">
</script>
El fragmento descarga y carga la biblioteca JavaScript, que se inicializa
elementos de página existentes con un atributo data-bm-widget-agent-id El
La biblioteca de JavaScript convierte los elementos de página identificados en elementos en los que se puede hacer clic
que cargan la plataforma de conversación de Business Messages cuando se presionan.
El parámetro opcional cb contiene el nombre de una función que se
se llama automáticamente una vez que se carga la biblioteca JavaScript.
Configura la posición del widget
Cuando se carga la biblioteca de JavaScript de Business Messages, se escanea el sitio web para detectar
elementos con un atributo data-bm-widget-agent-id y los convierte
en widgets que se pueden presionar con Business Messages. Cada elemento que quieres convertir
a un widget debe incluir un atributo data-bm-widget-agent-id con un valor
correspondiente al ID del agente para el agente que se lanzó.
Ejemplo: Definiciones 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>
Cómo pasar valores de contexto
Para configurar el contexto del widget y pasarlo a tu webhook, incluye el
El atributo data-bm-widget-context del elemento HTML que contiene el elemento
data-bm-widget-agent-id. Especifica un valor de cadena para
data-bm-widget-context Los mensajes enviados a tu webhook incluyen el contexto
valor.
data-bm-widget-context puede tener cualquier valor, como un valor
relevante para el lugar en el que se muestra el widget durante el tiempo de ejecución en la página. En la siguiente
ejemplos, el valor del atributo de
"eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" es un
Es la cadena JSON codificada en base64 de {"product":"dryer","offer-code":"ASDADSA"}.
data-bm-widget-context tiene un límite de 512 bytes.
Ejemplo: Definiciones de widgets con contexto
<!-- 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>
Sitio web de muestra
En el siguiente ejemplo, se carga la biblioteca de JavaScript de Business Messages en la
<head>, que escanea automáticamente la página HTML y genera una conversión
"myagentid" en los widgets de 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>
Inicialización del widget programático
Para obtener un control detallado de la configuración, puedes optar por inicializar tu
de forma programática. Para inicializar un elemento de forma programática, llama a
bmwidget.init
después de que se cargue la biblioteca de JavaScript de Business Messages. Esta forma de
no requiere que marques los elementos con el
atributo 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>
Cómo verificar la compatibilidad de tus dispositivos
Usa
window.bmwidget.supported
para verificar la compatibilidad con Business Messages de un dispositivo. El siguiente ejemplo verifica
para admitir el dispositivo antes de inicializar el elemento HTML con el ID
“myCustomButton” como un widget de 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>
Inicialización de widgets para aplicaciones de una sola página
En las aplicaciones de una sola página, en el que el elemento data-bm-widget-agent-id
se crea en el tiempo de ejecución, la biblioteca JavaScript de Business Messages
expone un objeto global window.bmwidget.
Cada vez que se agregue un nuevo elemento a la página, llama
window.bmwidget.scan()
para inicializar el elemento nuevo como un widget de Business Messages.
window.bmwidget.scan();
Llama a window.bmwidget.scan() en la devolución de llamada de actualización del DOM para asegurarte de que el elemento
El atributo data-bm-widget-agent-id se reinicia cuando la página cambia de estado.
Ejemplo de Angular
El siguiente código inicializa window.bmwidget.scan() durante la carga de componentes.
en Angular.
import { Component, OnInit} from '@angular/core';
export class AppComponent implements onInit {
ngOnInit() {
// Initialize tag on re-render
window.bmwidget.scan();
}
}
Ejemplo de React
Con el siguiente código, se inicializa la función window.bmwidget.scan() durante la
procesamiento de un elemento en 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>);
}
Próximos pasos
Ahora que integraste el widget de Business Messages en tu sitio web, puedes iniciar conversaciones de Business Messages desde tu sitio web y recibir valores de contexto específicos del widget en los mensajes de los usuarios.