Come aggiungere la chat di Messenger al tuo sito web

Vuoi integrare nel tuo sito web la chat di Messenger in modo da intrattenere conversazioni per generare risultati?
Ecco i punti di forza del plug-in per la chat con i clienti di Messenger:

Consente ai clienti di parlare con te sul tuo sito web con un semplice clic. Il plug-in per la chat con i clienti di Messenger ti consente di integrare Messenger direttamente nel sito web della tua azienda. I clienti possono interagire con la tua azienda in qualsiasi momento usufruendo della stessa esperienza personalizzata che hanno su Messenger.
Consente di continuare con facilità le conversazioni. Questa esperienza unica per i clienti ti consente di continuare le conversazioni anche dopo che hanno lasciato la tua pagina web. Non dovrai acquisire le loro informazioni per ricontattarli; ti basterà usare la stessa conversazione di Messenger.
Fornisce assistenza tramite chat integrata ai clienti. Con il plug-in per la chat con i clienti, puoi fornire efficacemente assistenza ai tuoi clienti. Rispondi alle domande su prezzi, configurazione dei prodotti e servizi che offri per fare in modo che i clienti siano soddisfatti.

Un cliente potenziale visita il sito web di un’azienda che vende articoli sportivi e invia un messaggio all’azienda per scoprire di più sui colori disponibili per le fasce per i capelli. L’azienda offre al cliente un’esperienza personalizzata facendogli sapere quali colori sono più popolari e conclude la vendita da lì

Il plug-in per la chat è gratuito e facile da configurare

Nella tua Pagina, clicca su Impostazioni e seleziona Piattaforma Messenger.
Nella sezione Plug-in per la chat con i clienti, clicca su Configura.
Puoi personalizzare il plug-in. Imposta un saluto, il tempo di risposta e il tema colori più adatti per la tua azienda.
Aggiungi il dominio del sito web a cui vuoi aggiungere Messenger. Ecco un esempio di dominio di un sito web: https://www.roccobalzama.it
Al termine, lo strumento di configurazione genererà automaticamente un codice che puoi copiare e incollare nella tua pagina web.

Plug-in della chat di Messenger (versione beta)

Il plug-in della chat con i clienti della Piattaforma Messenger ti consente di integrare l’esperienza Messenger direttamente nel tuo sito web. In questo modo, i clienti potranno interagire con la tua azienda in qualsiasi momento con la stessa esperienza personalizzata e ricca di contenuti multimediali elaborati di Messenger.

Come aggiungere Messenger al tuo sito web
Il plug-in della chat con i clienti carica in automatico la cronologia della chat recente tra l’utente e la tua azienda: ciò implica che le interazioni recenti con la tua azienda su messenger.com, nell’app Messenger o nel plug-in della chat con i clienti saranno visibili sul tuo sito web. Questa soluzione aiuta a creare un’esperienza singola per i tuoi clienti e ti consente di continuare le conversazioni anche dopo che hanno abbandonato la tua pagina web. Non dovrai acquisire le informazioni per i contatti successivi, ti basterà usare la stessa conversazione di Messenger.

Funzioni supportate da Messenger per il tuo sito

Browser supportati

Il plug-in della chat con i clienti è supportato per computer e mobile con la seguente eccezione:

Browser nell’app Messenger

Supporto di tipi e modelli di messaggi

Al momento, il plug-in della chat messenger per il tuo sito supporta i seguenti tipi di messaggi e modelli di messaggi strutturati:

Funzioni	supportate
Messaggio di testo	Sì
Video/immagini/audio/GIF	Sì
Modello generico/con pulsante	Sì (supporto limitato per i tipi con pulsante) Postback Pulsante con URL Pulsante Chiama Pulsante Acquista Pulsante Condividi Pulsante Accedi Pulsante Esci Pulsante Utilizzo del gioco
Modello lista/contenuto multimediale/Open Graph	No
Risposte rapide	Sì (supporto limitato per i tipi di risposte rapide) Risposte rapide di testo Risposte rapide con numero di telefono dell’utente Risposte rapide con e-mail Risposta rapida con luogo
Menu permanente	Sì
Azioni del mittente	Sì

Inserimento dell’SDK

Per usare il plug-in della chat con i clienti, devi includere l’SDK JavaScript di Facebook nella pagina in cui sarà visualizzato il plug-in.

Localizzazione e internazionalizzazione

Per sfruttare i vantaggi dell’internazionalizzazione, tra cui la traduzione automatica, devi modificare la lingua dell’SDK affinché corrisponda a quella del tuo sito. Nello specifico, all’avvio dell’SDK, devi modificare en_US sul codice di una lingua supportata.

Controlli dinamici del plug-in

Forniamo anche alcune API che ti consentono di controllare in modo dinamico determinate funzioni del plug-in, ad esempio l’apertura e la chiusura della finestra di dialogo.

Configurazione del plug-in

Per inserire il plug-in della chat con i clienti nella tua pagina web, segui questa procedura:

Aggiungi il dominio del tuo sito web alla whitelist.
Per motivi di sicurezza, il plug-in viene visualizzato solo se caricato in un dominio aggiunto alla whitelist. Consulta il riferimento per whitelisted_domains per scoprire come aggiungere il dominio alla whitelist in modo programmatico.
Nome del dominio e HTTPS richiesti
I domini devono soddisfare i seguenti requisiti per essere aggiunti alla whitelist:
- Devono essere mostrati su HTTPS.
- Devono usare un nome del dominio interamente qualificato (ad es. https://www.messenger.com/). Indirizzi IP e localhost non sono supportati per l’inserimento in whitelist.
Le aziende che offrono l’esperienza Messenger attraverso un fornitore di servizi non dispongono dell’accesso al generatore di token della Pagina nelle impostazioni dell’app poiché non possiedono l’app Facebook. In questi casi, potresti aggiungere o rimuovere i domini aggiunti alla whitelist tramite le impostazioni della Pagina. Per aggiungere alla whitelist un dominio, attieniti alla procedura seguente:
1. Clicca su Impostazioni nella parte superiore della Pagina.
2. Clicca su Piattaforma Messenger a sinistra.
3. Modifica i domini aggiunti alla whitelist per la tua Pagina nella sezione Domini aggiunti alla whitelist.
Inserisci il plug-in nella tua pagina web
Per aggiungere il plug-in alla tua pagina web, inserisci div con i seguenti attributi nel tuo HTML:
```
<div class="fb-customerchat"
 page_id="<PAGE_ID>">
</div>
```

Per impostazione predefinita, la finestra di dialogo del saluto verrà visualizzata sui computer e nascosta su mobile. Per personalizzare il comportamento, puoi usare l’attributo greeting_dialog_display e personalizzare ulteriormente il tuo plug-in.

Posizionamento consigliato

Ti suggeriamo di non modificare la posizione predefinita del plug-in della chat con i clienti (angolo inferiore destro della pagina).

Per una lista completa di attributi, consulta il riferimento per il plug-in della chat con i clienti.

Facoltativo Gestisci l’evento messaging_postbacks per le nuove conversazioni.
Se una nuova conversazione viene avviata tramite il plug-in e il tuo bot ha configurato il pulsante Inizia, invieremo un evento del webhook messaging_postbacks al tuo webhook ogni volta che un utente clicca sul pulsante Inizia.
Se l’attributo ref è impostato nell’inserimento del plug-in della chat con i clienti, questo verrà inserito nell’evento di postback.
Facoltativo Gestisci l’evento messaging_referrals per le conversazioni esistenti.
Se l’attributo ref è impostato nell’inserimento del plug-in della chat con i clienti, verrà inviato un evento del webhook messaging_referrals al tuo webhook quando la conversazione esistente viene proseguita tramite il plug-in.
ref può essere qualsiasi stringa e può essere usato per diversi scopi. Ad esempio, puoi usarlo per monitorare quali clienti hanno interagito con la tua azienda attraverso il plug-in.

Personalizzazione del plug-in

Il plug-in per la chat con i clienti supporta le seguenti personalizzazioni. Tutte le personalizzazioni sono impostate come attributo quando il plug-in è incluso nella tua pagina web:

Attributo	Descrizione
`theme_color`	*Facoltativo.* Il colore da usare come tema per il plug-in, compreso il colore di sfondo dell’icona del plug-in per la chat con i clienti e il colore di sfondo di tutti i messaggi inviati dagli utenti. Supporta qualsiasi codice colore esadecimale con un cancelletto iniziale (ad es. #0084FF), tranne il bianco. Ti consigliamo vivamente di scegliere un colore che abbia un contrasto elevato con il bianco.
`logged_in_greeting`	*Facoltativo.* Il testo del saluto che verrà mostrato se attualmente l’utente ha effettuato l’accesso a Facebook. Massimo 80 caratteri.
`logged_out_greeting`	*Facoltativo.* Il testo del saluto che verrà mostrato se attualmente l’utente non ha effettuato l’accesso a Facebook. Massimo 80 caratteri.
`greeting_dialog_display`	*Facoltativo.* Imposta il modo in cui verrà visualizzata la finestra di dialogo del saluto. Sono supportati i valori seguenti: `show`: la finestra di dialogo del saluto verrà sempre mostrata al caricamento del plug-in. `hide`: la finestra di dialogo del saluto verrà sempre nascosta finché un utente non clicca sul plug-in. `fade`: la finestra di dialogo del saluto verrà sempre mostrata, quindi scomparirà e resterà nascosta successivamente. L’impostazione predefinita è `show` su computer e `hide` su mobile.
`greeting_dialog_delay`	*Facoltativo.* Imposta il numero di secondi di ritardo prima che venga mostrata la finestra di dialogo del saluto dopo il caricamento del plug-in. Questo attributo può essere usato per personalizzare il momento in cui desideri che venga visualizzata la finestra di dialogo del saluto.
`minimized`	Avviso: attributo obsoleto Questo attributo è diventato obsoleto. Usa `greeting_dialog_display` per personalizzare il tuo plug-in. L’attributo `greeting_dialog_delay` avrà precedenza sull’attributo `minimized`. *Facoltativo.* `true`: quando impostato su “true”, avrà lo stesso effetto dell’impostazione di greeting_dialog_delay su “fade”. `false`: quando impostato su “false”, avrà lo stesso effetto dell’impostazione di greeting_dialog_delay su “show”.
`ref`	*Facoltativo.* Puoi passare un parametro ref facoltativo se vuoi includere altro contesto da restituire all’evento del webhook. Puoi usarlo per diversi scopi, come monitorare la Pagina dalla quale l’utente ha avviato la conversazione, indirizzare l’utente a contenuti o funzioni specifiche del tuo bot o correlare un utente Messenger a una sessione o un account sul sito web.

Utilizzo dello strumento di configurazione

Per gli amministratori delle Pagine, la Piattaforma Messenger fornisce anche un semplice strumento di configurazione per personalizzare il plug-in per la chat con i clienti. Per usare lo strumento di configurazione, segui questa procedura:

Accedi a Impostazioni della Pagina > Piattaforma Messenger.
Nella sezione “Plug-in per la chat con i clienti”, clicca sul pulsante “Configura”.

Lo strumento di configurazione presenta un’interfaccia utente intuitiva per la personalizzazione di messaggio di saluto, colore del tema, tempo di risposta visualizzato e per l’impostazione dei domini aggiunti alla whitelist per il plug-in.

Al termine, lo strumento di configurazione genera in automatico lo snippet di codice che puoi copiare o incollare per inserire il plug-in per la chat con i clienti nella tua pagina web.

Disabilitazione del menu permanente

In alcuni casi potrebbe essere preferibile disabilitare il menu permanente per il tuo bot nel plug-in per la chat con i clienti. A tale scopo, aggiungi "disabled_surfaces": ["CUSTOMER_CHAT_PLUGIN"] quando imposti il menu permanente:

{
"persistent_menu":[
{
"locale":"default",
"disabled_surfaces":["CUSTOMER_CHAT_PLUGIN"],
"composer_input_disabled": false,
"call_to_actions":[
{
"title":"My Account",
"type":"postback",
"payload":"PAYBILL_PAYLOAD"
}
]
}
]
}

Accesso utente

Se l’utente ha già effettuato l’accesso al suo account Facebook, potrà avviare la chat con il tuo bot immediatamente. Se non ha effettuato l’accesso, verrà visualizzato un messaggio di benvenuto predefinito e verrà richiesto di accedere o creare un nuovo account Facebook.

Limitazioni in base al Paese per l’uso delle Pagine

Se per la tua Pagina hai impostato le limitazioni in base al Paese in Impostazioni della Pagina, il plug-in della chat personalizzato non verrà visualizzato dagli utenti che non hanno effettuato l’accesso al proprio account Facebook quando visitano il tuo sito web.

Comportamento del salvataggio nella cache

Per impostazione predefinita, la finestra di dialogo del saluto verrà visualizzata sui computer e ridotta a icona su mobile. Gli utenti possono anche cliccare per mostrare o ridurre a icona la finestra di dialogo. Questo stato viene salvato nella cache sul browser per la durata della sessione della pagina (compresi i ricaricamenti della pagina).

Rilevamento dell’origine del messaggio

In alcune occasioni, potrebbe essere necessario stabilire se un utente interagisce con la tua azienda tramite il plug-in per la chat con i clienti. Per consentire questa operazione, la Piattaforma Messenger includerà una proprietà "source": "customer_chat_plugin" per tutti gli eventi di postback e nell’array tags del payload del messaggio per tutti i messaggi inviati dal plug-in:












"message": {
  "mid":"mid.14577641449818:41d102a3e1ae206a38",
  "text":"hello, from customer chat!",
  "tags": 



[
    {
      "source": "customer_chat_plugin"
    }
  ] 

}

Suggerimenti per la risoluzione dei problemi

In caso di problemi nella visualizzazione del plug-in, segui i suggerimenti qui sotto:

Se ricevi un errore della console come “Refused to display *** in a frame because an ancestor violates the following Content Security Policy directive: ***”, verifica che il dominio della pagina in cui il plug-in viene visualizzato sia stato aggiunto alla whitelist. Inoltre, assicurati di non aver impostato l’intestazione Referrer-Policy su no-referrer.

Inserire la chat di Messenger sul tuo sito WordPress

Se usi WordPress puoi usare Facebook Messanger Live chatdi Zotabox e Wp Chatbot for Facebook Messenger di Holithemes.

Ricerche correlate: facebook customer chat, facebook messenger integration, plugin facebook chat, customer chat plugin messenger, plugin messenger chat, messenger web plugin, messenger chat widget, integrare chat facebook sito,

Rocco Balzamà

Ethical & Growth Hacker | CEH | OSCP | Marketing Manager | Information Security Senior Manager | Data Governance & Privacy Solutions | Cyber Security | Penetration Tester
[ Divulgatore, formatore e consulente in ambito Branding - Comunicazione - IT ]
Tutto ebbe inizio nell'estate del 1983, quando le mie mani toccarono per la prima volta una tastiera ancora oggi, con lo stesso entusiasmo che avevo da bambino quando ero un piccolo artigiano, aiuto le aziende a proteggersi ed evolversi nel mondo digitale.