Inviare un SMS con Elementor Form

Inviare un SMS con Elementor Form

Elementor Form è sicuramente uno dei widget più adoperati del famoso page builder.

Tuttavia, con l’utilizzo di addons di terze parti come Dynamic for Elementor è possibile estendere le funzionalità ed actions di Form.

Ne avevo parlato precedentemente anche nell’articolo su Come Collegare Elementor e Telegram.

Il progetto è basato su WordPress, per il frontend mi sono affidato ad Elementor + PRO e Dynamic ( se non lo usi, allora il tuo elementor è inutile ).

Come inviare gli SMS?

In questa guida non ci affideremo ad un SaaS classico, difatti utilizzeremo una nostra SIM. Il vantaggio dell’utilizzare una SIM proprietaria risiede nel fatto che:

  • il piano tariffario è gestito dal tuo provider, esistono tante promozioni che permettono di usufruire di infiniti SMS a prezzi accessibili,
  • il numero mostrerà il prefisso italiano (+39)
  • la velocità di delivery è nettamente superiore rispetto ai classici SaaS

A questo punto possiamo intraprendere 2 strade:

  1. Sviluppare l’ennesimo plugin / custom code per estendere la classe di elementor form
  2. Sfruttare l’Action Export di Dynamic for Elementor

L’Action Export tra le tante cose ci permette di poter effettua chiamate in POST e GET. Durello.

Inviare un SMS Gratuitamente

Vediamo quindi quel è il processo necessario per settare e successivamente inviare SMS gratuiti tramite SMSGateway24.

  • Registrarsi a SMS Gateway 24
  • Scaricare l’APP dal Playstore ed effettuare l’accesso con il proprio account
  • Setup del Form su Elementor con action Export

Quindi ricapitolando:

  1. mi registro su SMSGateway24
  2. scarico l’APP ed effettuo l’accesso
  3. il Cliente completa il Form
  4. il Form elabora la richiesta ed effettua la Chiamata API al server di SMS Gateway
  5. SMS Gateway comunica all’APP sul nostro Smartphone l’evento d’invio messaggio
  6. l’APP invia tramite le API di Android l’SMS al Numero comunicato tramite i parametri della chiamata.

Facile, no?

Inviare un SMS tramite CALL API

Una volta registrato con successo, scaricata l’APP ed effettuato l’accesso anche sullo Smartphone, nelle impostazioni di SMS Gateway ( website ) potrai accedere a tutta una serie di informazioni sul device come:

  • ID ( necessario per identificare da quale sim inviare gli sms se disponi di più devices )
  • Device Name e Numero delle Sim trovate con relativo ID: 0 o 1
  • Limitazione del piano ( Gratis fino a 1000 invii al mese )
  • Tutta una serie di metriche relative agli invii
  • Settings avanzati

Le informazioni necessarie per effettuare la chiamata sono: l’ID del device, l’access-token, il Messaggio ed eventualmente la SIM dalla quale vogliamo inviare l’SMS.

Dal menu del sito di SMSGateway24, ci rechiamo nella voce API e copiamo il nostro access token necessario per effettuare le Call API d’invio.

La chiamata per l’invio di un SMS si compone nel seguente modo:

ENDPOINThttps://smsgateway24.com/getdata/addsms
METODIGET o POST
Parametri
tokenIl tuo access token
sendtoIl numero a cui inviare l’sms con prefisso es. +39333333333
bodyIl messaggio da inviare all’utente finale
device_idL’ID del dispositivo dal quale inviare
timetosend *Eventuale data e/o ora in cui inviare il messaggio
sim *L’id della sim da utilizzare per l’invio ( 0 o 1 )
* opzionale

Come effettuare chiamate API con Elementor?

Qui inizia la parte interessante dell’articolo.

( SI PRIMA STAVAMO PERDENDO TEMPO )

Grazie a Dynamic.ooo è possibile effettuare chiamate remote di tipo POST o GET utilizzando l’estensione Export di Elementor Form.

Non ci resta che creare un semplice form con tutti i campi di cui abbiamo bisogno:

  • Nome,
  • Cognome,
  • Numero di peli pubici ecc.
  1. L’utente compila form con le sue info
  2. preme il bottone di submit,
  3. export effettua una chiamata asincrona di tipo GET con tutti i parametri estrapolati dal form
  4. l’endpoint risponderà con codice 200 o differente
  5. in caso di code 200, verrà mostrato un messaggio di successo
Form d’esempio utilizzato per prenotare via SMS

Quando creiamo un form con Elementor, ogni field/campo aggiunto viene identificato univocamente con un ID ( [field id=”nome”] ).

Ti consiglio di verificare ogni singolo ID per renderlo leggibile e facile da ricordare.

Passiamo quindi alla voce “Actions After Submit” e selezioniamo Export, è possibile effettuare anche 2 o più azioni, tipo inviare una mail alla propria casella o l’iscrizione in una lista del nostro autoresponder.

Impostare l’Endpoint per inviare l’SMS

Apriamo quindi la TAB Export e iniziamo a compilare i campi necessari.

Su Endpoint URL inseriamo:

https://smsgateway24.com/getdata/addsms

Preparare i Parametri

Adesso passiamo ai vari parametri che invieremo nella chiamata, aggiungiamo quindi un elemento nella lista Exported Arguments per ogni parametro richiesto.

Access Token

Il primo è il Token, come key inseriamo token e come value il nostro Access Token precedentemente recuperato dal sito di SMSGateway24.

SendTo

Effettuiamo lo stesso con sendto, nel mio caso il campo sendto verrà compilato con un custom field [post:cellulare] collegato ad un custom post type chiamato Menu.

Si tratta del numero di telefono del locale, quindi il numero sul quale il ristoratore riceverà la prenotazione.

Qui viene gestito in maniera dinamica, se invece il numero di telefono è singolo ( es. il tuo numero delle consulenze ), potrai inserirlo manualmente aggiungendo il prefisso +39 e successivamente il numero di cellulare.

Device_ID

Su Device_ID inseriamo l’ID del dispositivo dal quale inviare gli SMS, eventualmente possiamo anche specificare la SIM aggiungendo un altro field con key > sim e come value l’ID della Sim ( 0 o 1 ). Se il cellulare supporta una sola sim allora puoi anche lasciarlo vuoto.

Message / Body

L’ultimo campo è il messaggio, come key inseriamo quindi body e come value inseriamo il testo che riceveremo/riceveranno via SMS.

Questo può essere Statico es:

Ciao Tizio, hai ricevuto una nuova richiesta di preventivo dal sito xyz.it

oppure può essere dinamico, soluzione che ovviamente consiglio, es:

Ciao [post:title], è appena arrivata una richiesta di Prenotazione da TuoSito.it. 
%0a%0aNome e Cognome: [field id="nome"] [field id="cognome"] 
%0aEmail: [field id="email"] 
%0aCellulare: [field id="cellulare"] 
%0a%0aIl Giorno: [field id="giorno"] alle ore: [field id="ora"] 
%0aUn tavolo per [field id="persone"] persone. 
%0a%0aComunica l'esito positivo o negativo a questo numero: [field id="cellulare"]

[post:title] in questo caso è il Nome del Menu sul quale l’utente effettua la richiesta ( il titolo del Custom Post Type ), questo tipo di Token viene gestito da Dynamic, mentre gli altri valori che vedi tra [] sono i field del form di elementor che precedentemente abbiamo provveduto a rinominare.

Questi Field sono appunto gli input che abbiamo messo a disposizione dell’utente finale, quindi: nome, cognome, cellulare ecc.

Formattare gli SMS

La prima volta che sono riuscito ad effettuare una chiamata tramite PostMan, il testo del messaggio è arrivato ovviamente tutto sformattato.

Questo perché gli SMS non interpretano la formattazione classica dell’HTML. Dopo una mezz’oretta passata a cercare di capire come funzionasse la formattazione sono riuscito a trovare la soluzione su un blog stile 2000. Ye.

Gli SMS supportano quindi una formattazione specifica, infatti i vari %0a che vedi nell’esempio sopra citato servono banalmente per andare a capo.

Prendete e abusatene tutti.

Testare la Chiamata API

Salviamo il tutto e proviamo ad effettuare una chiamata e vedere se arriva il tanto amato SMS. a

Quindi ci dirigiamo sulla Pagina appena creata e compiliamo il form con tutte le informazioni richieste.

Non ci resta che premere Invia!

Se la chiamata va a buon fine, dall’Endpoint API ci ritornerà un codice 200 (successo) e il form automaticamente mostrerà un messaggio di successo – che puoi personalizzare.

Al contrario se il codice di risposta è diverso da 200 mostrerà un messaggio d’errore a quel punto sarà necessario visionare i Log di Export e capire dov’è l’errore.

P.S. Per far si che i messaggi vengano inviati con successo, è necessario tenere operativa l’applicazione di SMSGateway sul proprio device android e ovviamente disporre di una connessione ad internet costante.

Una soluzione a questo problema potrebbe essere quella di metter su un sistema con Rapsberry PI + Shield per SIM e ovviamente una versione di Android su.

Subscribe Now!

Subcribe to my newsletter and revice a lot of tips, tricks and other **** like this. 🤍

© 2020 | Alessandro De Cristofaro

🤏 Ehi, It's Me... Alessandro!
main-qimg-2a04eb0564e6d70ee4eeb60b807200ef

Iscriviti alla mia Newsletter e ricevi Tutti i Tutorial più tanti (forse troppi) CONTENUTI SPECIALI

Subscribe to my Newsletter and Recive Now a an HUGE amount of Tips and Trick!