Integrazione di WhatsApp in Shopify

In qualità di sviluppatore Shopify per aziende di medie o grandi dimensioni, sai quanto sia importante avere una comunicazione continua con i tuoi clienti. Per raggiungere questo obiettivo, puoi sfruttare la piattaforma WhatsApp Business come strumento per inviare messaggi automatici a migliaia di clienti ed estendere il processo in modo efficiente man mano che la tua base di clienti cresce.

Questo tutorial illustra la procedura di collegamento di WhatsApp a Shopify e l'invio di messaggi di notifica di WhatsApp ai clienti in base agli eventi che attivano nel punto vendita, come aggiungere un prodotto al carrello o effettuare un ordine. Per fare ciò utilizzeremo l'API Cloud, ospitata da Meta.

Prerequisiti

Per seguire questo tutorial, dovrai:

• installare Node.js e npm;
• avere un punto vendita su Shopify con configurazione dell'elaborazione di pagamenti e prodotti;
• registrare un account sviluppatore su Meta for Developer, configurare un'app business e selezionare un account WhatsApp Business.

Al completamento dell'ultimo passaggio ti verrà assegnato un token d'accesso temporaneo. Ti servirà per il resto di questo tutorial, quindi prendine nota.

Una volta soddisfatti questi requisiti, puoi procedere con il resto del tutorial.

Creazione di un modello di messaggio su WhatsApp

I modelli di messaggi di WhatsApp ti aiutano a creare diversi formati di messaggio che puoi utilizzare ripetutamente per inviare messaggi ai clienti che hanno autorizzato la tua app a farlo.

Segui questi passaggi per creare un modello per un messaggio di notifica dell'ordine:

• Accedi al tuo Business Manager e scegli il tuo account business.
• Clicca sull'icona con le tre linee nell'angolo in alto a sinistra della pagina e clicca su WhatsApp Manager.
• Utilizzando la navigazione laterale, passa il mouse sull'icona Strumenti per l'account e clicca su Modelli di messaggi.
• Clicca su Crea modello nell'angolo in alto a destra della pagina.
• Nella pagina successiva, scegli l'opzione Transazioni per la tua categoria, quindi assegna un nome al modello (in questo caso, "order_confirmation") e seleziona la lingua.

• Clicca su Continua per passare all'editor dei modelli.

Ora che il modello order_confirmation è configurato, è il momento di definirne la struttura. Ecco come dovrebbe apparire il messaggio al cliente:

• Abbiamo ricevuto il tuo ordine!

• Ciao [nome del cliente],

• grazie per il tuo acquisto.

• Il tuo ordine è in fase di elaborazione (23190). Il pacco ti verrà spedito entro i prossimi 2-3 giorni lavorativi (esclusi i giorni festivi e i fine settimana).

• Una volta spedito, riceverai un'altra email da parte nostra.

Nell'editor dei modelli, scegli Testo per la sezione Intestazione. Il paragrafo "Abbiamo ricevuto..." sarà l'intestazione, con il resto del messaggio copiato nella sezione Corpo.

Ora, clicca due volte su Aggiungi variabile sotto la casella di testo del corpo per aggiungere due variabili. Copia e incolla la prima variabile — {{1}} — al posto del nome del cliente. Quindi, copia e incolla la seconda variabile — {{2}} — al posto del numero di ordine all'interno delle parentesi.

Al termine, il messaggio dovrebbe avere un aspetto simile a questo. Puoi fare riferimento all'area di anteprima presente nella pagina.

Clicca su Invia per salvare il modello di messaggio.

Ora che il modello è pronto, puoi utilizzare la piattaforma WhatsApp Business per creare un webhook nella sezione di amministrazione di Shopify e mappare un'applicazione che invii automaticamente il messaggio a un cliente quando effettua un ordine.

Utilizzo dei webhook per l'invio di notifiche a un server express

Supponi di voler inviare un messaggio automatico ai clienti ogni volta che effettuano un ordine dal tuo punto vendita Shopify. Potresti controllare la presenza di nuovi ordini nel punto vendita ogni cinque minuti circa. Tuttavia, l'invio costante di richieste API al tuo punto vendita è inefficiente, soprattutto se non sono stati effettuati nuovi ordini.

È molto più efficiente configurare un webhook che sia in ascolto dell'evento di "creazione dell'ordine" nel tuo punto vendita e che ti informi ogni volta che un cliente effettua un ordine.

Ecco i passaggi di base per creare un webhook di "creazione dell'ordine" e mapparlo a un server express.

Configurazione di un progetto Node.js

Inizia creando una cartella denominata "whatsapp-demo" per il tuo progetto.

Quindi, avvia il terminale di comando cd in "whatsapp-demo" ed esegui il seguente comando per inizializzare un progetto Node.js:

npm init -y

Installa express, la libreria utilizzata per creare un server Web su Node.js, eseguendo il seguente comando:

npm i express

Ora che il tuo ambiente di sviluppo è impostato, puoi procedere a creare il server express.

Creazione di un server express

Crea un file denominato test.js all'interno della cartella whatsapp-demo. Aprilo con l'editor di codice sorgente che preferisci e copia e incolla il seguente codice al suo interno:

const express = require('express')
const app = express()

app.post('/webhooks/orders/create', (req, res) => {
 console.log('Yes, We got an order!')
 res.sendStatus(200)
})

app.listen(3000, () => console.log('Now running on port 3000!'))

Utilizzando il codice sopra, hai configurato un server express di base che visualizza un messaggio sul terminale del server quando il webhook invia una notifica di "creazione dell'ordine".

Prima di mapparlo al webhook di Shopify, devi configurare un tunnel.

Configurazione di un tunnel di traffico HTTPS

Quando configuri un webhook, Shopify ti richiede di fornire un URL pubblico dove inviare la notifica.

Se stai seguendo questo tutorial su un server pubblico, usa l'URL corrispondente. Se stai seguendo questo tutorial sul tuo computer locale, dovrai creare un tunnel con un URL HTTPS accessibile pubblicamente.

Come prima cosa, installa ngrok eseguendo il seguente comando:

npm install -g ngrok

Quindi, avvia una finestra di terminale diversa ed esegui il seguente comando per ottenere l'URL del tunnel per il tuo server locale:

ngrok http 3000
Forwarding                    https://xxxx-xxx-xxx-xxx-xxx.ngrok.io

Prendi nota dell'URL perché ti servirà nel passaggio successivo. Tieni presente che se riavvii questo client, otterrai un nuovo URL e dovrai aggiornare tutti i riferimenti ad esso.

Creazione di un webhook in Shopify

Accedi alla sezione di amministrazione del tuo punto vendita Shopify e vai a Impostazioni > Notifiche. Scorri verso il basso fino a Webhook e clicca su Crea webhook.

Aggiungi un webhook per la "creazione dell'ordine" e specifica l'URL del tuo tunnel o l'URL pubblico che hai creato nella sezione precedente.

Esegui il server locale su un terminale diverso con nodo index.js, quindi clicca su Invia notifica di prova.

Se l'operazione è andata a buon fine, riceverai questo messaggio sul terminale del tuo server: "Yes we got an order" (Abbiamo ricevuto un ordine).

Ora hai una connessione funzionante tra il tuo punto vendita Shopify e il server express. A questo punto, puoi inviare il modello di messaggio WhatsApp al cliente dopo che avrà effettuato un ordine.

Invio di un messaggio personalizzato con il modello "order_notification"

Per iniziare, installa Axios eseguendo il seguente comando sul tuo terminale:

npm i axios

Utilizzerai Axios per affidare alla richiesta POST l'invio del messaggio WhatsApp al cliente.

Dopo aver installato Axios, crea un altro file nella cartella di progetto denominata customMessage.js, quindi importa axios ed express nel file con il seguente codice:

const axios = require('axios').default
const express = require('express')
const app = express()

Ora, crea un percorso per gestire la notifica di creazione dell'ordine da Shopify eseguendo quanto segue:

app.post('/webhooks/orders/create', async (req, res) => {
const body = await getRawBody(req);

const order = JSON.parse(body.toString());

console.log("Yes, We got an order!", order.customer.phone);
  
// Remaining code will go here

})

Quando Shopify chiama /webhooks/orders/create con un ordine, i dettagli dell'ordine verranno inviati al percorso all'interno di res, il secondo argomento della tua funzione di callback asincrona e un oggetto JavaScript.

Recupera le informazioni relative a numero di telefono, nome e ID dell'ordine del cliente dai dettagli dell'ordine e utilizzale per costruire i parametri della richiesta API:

        const data = {
        "messaging_product": "whatsapp", 
         "to": `${order.customer.phone}`, 
        "type": "template", 
         "template": { 
        "name": "order_confirmation", 
        "language": { "code": "en_GB" },
        "components": [
        {
          "type": "body",
          "parameters": [
          {
            "type": "text",
            "text": `${order.customer.first_name}`
          },
          {
            "type": "text",
            "text": `${order.id}`
          }
        ]
      }
    ] 
  } 
} 

L'oggetto sopra contiene tutti i parametri necessari per completare la richiesta. Assicurati che il nome del modello specificato nell'oggetto corrisponda a quello creato in precedenza nel tuo Business Manager di WhatsApp.

Procedi a creare un oggetto config con un oggetto headers nidificato. All'interno di headers, imposta il tuo token d'accesso WhatsApp come valore di Autorizzazione (sostituisce ACCESS_TOKEN con il token) e application/json come Tipo di contenuto:

 const config = {
 headers: { Authorization: `Bearer <ACCESS_TOKEN>`, 'Content-Type':   'application/json'}
};

Crea una richiesta POST con Axios e passa sia l'oggetto config che l'oggetto data come argomenti. A questo punto nidifica e acquisisci i metodi per visualizzare il risultato (o il messaggio di errore in caso di esito negativo della promessa):

  if (order.customer.phone) {
   return res.sendStatus(403);
  } else {
  axios
  .post(
    "https://graph.facebook.com/<API_VERSION>/<YOUR_WABA_ID>/messages",
  data,
  config
  )
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

  return res.sendStatus(200);
}

Sostituisci YOUR_WABA_ID con il tuo ID WhatsApp Business che puoi recuperare dalla Dashboard gestione app di WhatsApp e API_VERSION con una versione dell'API Cloud compatibile (per impostazione predefinita v15.0).

L'app è pronta!

Per testarla, il tunnel ngrok deve essere in esecuzione e dovrai avviare il server express in un terminale a parte:

node customMessages.js

Altri eventi Shopify

Oltre al posizionamento degli ordini, Shopify offre oltre 50 webhook per eventi diversi. Puoi attivare l'iscrizione per la creazione e gli aggiornamenti del carrello, la creazione e gli aggiornamenti delle collezioni di prodotti, i tentativi di fatturazione andati a buon fine e non, oltre a molti altri ancora.

Per utilizzare uno qualsiasi di questi webhook, segui uno schema simile a quello descritto sopra creando un nuovo webhook nella sezione di amministrazione di Shopify e registrando l'argomento come percorso nel tuo server express.

Come hai visto, la piattaforma WhatsApp Business ti aiuta a comunicare senza problemi con i tuoi clienti, sia manualmente che in modo programmatico, in base agli eventi nel tuo punto vendita Shopify.

L'integrazione WhatsApp di Shopify ti consente di inviare messaggi di massa ai tuoi clienti in tempo reale, sia automaticamente (ad esempio sulla base di un evento) che manualmente. Non solo è facile da configurare, ma anche decisamente scalabile. L'associazione di WhatsApp e Shopify rende la comunicazione con i clienti coerente, efficace e di grande impatto.

Per maggiori informazioni su come integrare WhatsApp in app e progetti, consulta tutti i nostri tutorial per gli sviluppatori.