Author:
Logo Facebook Messenger
Integrare la chat Facebook Messenger nel proprio sito web
Extrowebsite Logo

Da un po' di tempo è possibile installare la chat Facebook Messenger nel proprio sito web.

Consiste di un plugin, altrimenti detto snippet di codice generato da Facebook stesso, che va scritto nelle pagine in cui si desidera rimanere in contatto diretto con potenziali clienti oppure utenti, attraverso il Messenger della propria pagina Facebook, senza lasciare il sito.

Che si tratti di un sito web "statico" o realizzato con un CMS, il risultato è perfettamente uguale.

La chat Facebook Messenger è anche possibile integrarla in Joomla!, senza alcuna estensione aggiuntiva.

N.B. Prima di addentrarci nel tutorial, accertarsi di essere in possesso di due requisiti molto importanti:

  1. disporre di una pagina Facebook ed essere amministratori della stessa
  2. il sito nel quale installare la chat Facebook Messenger deve "rispondere" con protocollo https://

Accesso alla pagina Facebook

Dopo aver effettuato l'accesso a Facebook, portarsi nella pagina e NON nel proprio profilo . Nella parte superiore fare clic su Impostazioni.

Impostazioni della pagina Facebook

Nella colonna di sinistra, fare clic sul link Piattaforma Messenger.

Piattaforma Messenger

Nella parte destra individuare la sezione Plug-in per la chat con i clienti. Premere il pulsante Configura.

Plugin per la chat con i clienti

Configura la chat con i clienti

Da questo momento comincia la configurazione vera e propria, che consta di tre passaggi, per ottenere lo snippet di codice.

Premere il pulsante Avanti in basso a destra.

Aggiunta di messenger al sito web

Step 1: scelta della lingua e del messaggio di benvenuto

Il primo step consiste nella scelta della lingua e del messaggio di saluto che il potenziale cliente, o utente, vedrà prima di cominciare a scrivere.

Per quanto riguarda la lingua, scegliamo "Italiano". Per il messaggio di saluto, possiamo personalizzarlo come desideriamo.

Sempre rimanendo nella stessa schermata, le scelte appena menzionate saranno subito attive e visibili.

Premere il pulsante Avanti.

Passaggio 1: configurare la chat con i clienti

Step 2: personalizzare chat Facebook Messenger

In questo secondo step è possibile personalizzare l'aspetto della chat. Accertarsi, nella parte sinistra, che il pulsante Colori personalizzati sia su ON. Immediatamente sotto scrivere il colore esadecimale che più si avvicina, oppure identico, al proprio sito web.

Anche in questo caso le scelte appena fatte sono immediatamente visibili nell'anteprima della chat.

Passaggio 2: configurare la chat con i clienti

Step 3: generazione snippet di codice chat Facebook Messenger

Siamo giunti al terzo ed ultimo passaggio, prima che Facebook generi il codice per copiarlo ed incollarlo nel proprio sito.

In questa ultima schermata sono molto importanti 4 passaggi, così come riportati nell'immagine di seguito. Essi sono:

  1. Aggiunta del nome del dominio del sito. Come spiegato all'inizio dell'articolo, il sito deve necessariamente "rispondere" con protocollo https://. Punto 1.
  2. Nella textarea di Facebook, scrivere il nome del proprio sito, comprensivo del protocollo https:// Punto 2. Subito dopo salvare attraverso il pulsante blu.
  3. Lasciare la spunta di default sulla installazione automatica del codice. Come viene spiegato in maniera molto chiara, è sufficiente includere lo snippet di codice solo nell'HTML delle pagine in cui si vuole che venga visualizzata la chat Facebook Messenger. Punto 3.
  4. Copiare il codice generato, situato nella parte destra della schermata. Punto 4.
Passaggio 3: configurare la chat con i clienti

Premendo il pulsante Fine, riceviamo la conferma che tutti i passaggi sono stati eseguiti in maniera corretta e che possiamo cominciare ad usare la chat Facebook Messenger nel nostro sito.

Fine configurazione chat Facebook Messenger

Installare il codice chat Facebook Messenger nel sito

Il codice generato da Facebook deve essere incollato nella pagina, o più di una, del nostro sito. Esattamente in quelle in cui desideriamo essere contattati.

Come anticipato all'inizio, lo snippet di codice puo' essere incluso tranquillamente sia in un sito HTML statico, sia in un CMS come Joomla!

La mia prova demo è stata fatta, appunto, in una installazione di Joomla! versione 3.9.2, utilizzando il template Protostar.

Una volta aperto il file index.php, immediatamente dopo il tag <body> va inserito il codice generato da Facebook.

Salvare il tutto e trasferire il file via FTP, nella cartella del template.

Il risultato che si otterrà, sarà il seguente per la versione desktop:

Chat Facebook Messenger versione desktop

Per la versione smartphone, invece, avremo:

Chat Facebook Messenger versione mobile

Una volta che la chat Facebook Messenger è stata installata nel sito, possiamo apportare, se lo desideriamo, qualche modifica.

Di default, come mostrato nell'immagine, la chat è chiusa. Nel caso volessimo che apparisse aperta, si deve aggiungere un rigo di codice a quello di Facebook.

Dove è scritto:

div class="fb-customerchat"
attribution=setup_tool
page_id="AAABBBXXXYYYZZZ"
theme_color="#AABBCC"

aggiungere, immediatamente dopo theme_color="#AABBCC"

minimized="false"

Questo codice fa sì che, appena la pagina è stata caricata, appaia la chat aperta.

Conclusioni

La chat Facebook Messenger è un ottimo strumento di comunicazione. Inserirla nel proprio sito web, oltre ad essere un'operazione molto semplice, può offrire una migliore ed efficiente assistenza per potenziali clienti o per coloro che già lo sono.