Per ampliare la copertura degli agenti di Business Messages, puoi aggiungere punti di contatto per le conversazioni sui tuoi siti web con il widget di Business Messages.
Il widget Business Messages supporta solo i dispositivi mobili con Android 5 o versioni successive. Altri sistemi operativi per dispositivi mobili e ambienti desktop non sono supportati.
Aggiungere un widget di Business Messages a un sito web
Per attivare le conversazioni da un sito web, carica la libreria JavaScript di Business Messages, configura il posizionamento del widget nella pagina e specifica i valori di contesto all'interno del widget.
Per un elenco delle funzioni, delle proprietà e degli eventi relativi alla disponibilità, consulta il widget relativo a Business Messages. Consulta la guida di stile del widget Business Messages per suggerimenti su stile e utilizzo.
Creare un widget
Aggiorna i valori seguenti per creare un widget di Business Messages da inserire nel tuo sito web.
| Valore | Descrizione |
|---|---|
| LAYOUT | Come appare il pulsante sul tuo sito web. Il valore può essere button, floating, inline o advanced. Per utilizzare i tuoi stili personali, usa advanced, copia il foglio di stile nella tua pagina web e modificalo in base alle necessità. |
| AGENT_ID | Il tuo ID agente. |
| BUTTON_TEXT | Il testo da visualizzare. |
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
Widget di esempio
Questo widget 
viene generato dal seguente codice:
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
Personalizzare l'integrazione del widget di Business Messages
Caricare la libreria JavaScript
Per caricare la libreria JavaScript di Business Messages, copia il seguente codice e incollalo immediatamente all'interno del tag <head> in ogni pagina in cui vuoi visualizzare un widget di Business Messages. Ti serve solo un'inclusione della libreria JavaScript per pagina.
<!-- Global Business Messages widget library reference - Business Messages -->
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js?cb=callback">
</script>
Lo snippet scarica e carica la libreria JavaScript, che inizializza gli elementi esistenti della pagina con un attributo data-bm-widget-agent-id. La libreria JavaScript converte gli elementi della pagina identificati in elementi cliccabili che caricano la superficie della conversazione in Business Messages quando vengono toccati.
Il parametro facoltativo cb contiene il nome di una funzione che viene chiamata automaticamente al caricamento della libreria JavaScript.
Configura il posizionamento del widget
Quando viene caricata, la libreria JavaScript di Business Messages cerca nel sito web
gli elementi con un attributo data-bm-widget-agent-id e li converte in widget
di Business Messages toccabili. Ogni elemento da convertire in un widget deve includere un attributo data-bm-widget-agent-id con un valore corrispondente all'ID agente per l'agente avviato.
Esempio: definizioni dei widget
<!-- 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>
Trasmettere valori di contesto
Per configurare il contesto del widget e trasmetterlo al tuo webhook, includi l'attributo facoltativo data-bm-widget-context nell'elemento HTML che contiene l'attributo data-bm-widget-agent-id. Specifica un valore stringa per data-bm-widget-context. I messaggi inviati al tuo webhook includono il valore di contesto.
data-bm-widget-context può avere un valore qualsiasi, ad esempio un valore relativo alla posizione in cui il widget viene mostrato durante l'esecuzione sulla pagina. Negli esempi seguenti, il valore dell'attributo "eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" è una stringa JSON codificata in base64 di {"product":"dryer","offer-code":"ASDADSA"}.
data-bm-widget-context ha un limite di 512 byte.
Esempio: definizioni dei widget con contesto
<!-- 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>
Sito web di esempio
L'esempio seguente carica la libreria JavaScript di Business Messages all'interno del tag <head>, che a sua volta esegue automaticamente la scansione della pagina HTML e converte
"myagentid" nei widget di 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>
Inizializzazione dei widget programmatici
Per un controllo granulare sulla configurazione, puoi scegliere di inizializzare il widget in modo programmatico. Per inizializzare in modo programmatico un elemento, chiama
bmwidget.init
dopo il caricamento della libreria JavaScript di Business Messages. Questa forma di inizializzazione non richiede di contrassegnare gli elementi con l'attributo 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>
Controlla il supporto dei dispositivi
Utilizza window.bmwidget.supported per verificare il supporto di Business Messages per un dispositivo. L'esempio seguente esegue il controllo del supporto dei dispositivi prima di inizializzare l'elemento HTML con ID "myCustomButton" come widget di 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>
Inizializzazione del widget per applicazioni a pagina singola
Per le applicazioni a pagina singola, in cui l'attributo data-bm-widget-agent-id viene creato in fase di esecuzione, la libreria JavaScript di Business Messages espone un oggetto globale window.bmwidget.
Ogni volta che viene aggiunto un nuovo elemento alla pagina, chiama
window.bmwidget.scan()
per inizializzarlo come widget di Business Messages.
window.bmwidget.scan();
Richiama window.bmwidget.scan() nel callback di aggiornamento del DOM per garantire che l'attributo data-bm-widget-agent-id venga reinizializzato quando la pagina cambia il suo stato.
Esempio di Angular
Il seguente codice inizializza window.bmwidget.scan() durante il callback di caricamento del componente in Angular.
import { Component, OnInit} from '@angular/core';
export class AppComponent implements onInit {
ngOnInit() {
// Initialize tag on re-render
window.bmwidget.scan();
}
}
Esempio di reazione
Il codice seguente inizializza la funzione window.bmwidget.scan() durante il rendering di un elemento in 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>);
}
Passaggi successivi
Ora che hai integrato un widget di Business Messages con il tuo sito web, puoi avviare conversazioni dal sito web e ricevere valori di contesto specifici del widget nei messaggi degli utenti.