Usare Telegram in sostituzione o in aggiunta alle Email post compilazione di un Form è il metodo migliore per rimanere sempre aggiornato – in tempo reale – sul proprio Smartphone.

Spesso i client mail si aggiornano con differenti delay che possono andare dal minuto fino all’ora. In alcune situazioni tuttavia è necessario ricevere queste “notifiche” in tempo reale.

Sfruttando la potenza di Telegram e il modus delle Email è possibile quindi cambiare il nostro approccio al ricevimento di notifiche, email di conferma o richieste di consulenze.

Il vantaggio maggiore risiede nel fatto che ogni qualvolta riceviamo un nuovo Lead, allo stesso modo riceveremo una Notifica Push ( immediata ) sul nostro Telegram, con tutte le info da noi scelte.

In questo tutorial andremo a dare dei super poteri al nostro Elementor Form, sfruttando:

Impostare Telegram e il BOT

Telegram, o meglio i suoi BOT ci permettono di poter automatizzare tutta una serie di processi utilizzando un Utente Virtuale non direttamente collegato al nostro numero di Telefono. Questo vuol dire che potenzialmente possiamo creare infiniti BOT per gestire infinite Funzioni/Situazioni automatiche.

La potenza dei Bot risiede nella possibilità di poter comunicare con queste entità utilizzando degli Endpoints API.

L’endpoint che utilizzeremo in questo tutorial è il /SendMessage, e banalmente ci permette di poter dire al nostro Bot di inviare un messaggio alla Chat/Utente X con uno specifico testo.

Difatti gli argomenti accettati da questo Endpoint sono:

  • chat_id : l’ID della Chat a cui inviare il Messaggio
  • text : il testo che verrà inviato al chat_id
  • parse_mode : eventuali formattazioni specifiche come markdownv2 o html

Proseguiamo nella creazione del nostro Killer di Email.

Creare il Bot di Telegram

Creare un bot di telegram è un processo piuttosto facile e veloce, ovviamente in questo tutorial non vedremo nel dettaglio tutti i settings disponibili – anche perché sono tantissimi -, bensì ci focalizzeremo sulle funzioni strettamente necessarie al suo corretto funzionamento.

Digitiamo quindi nella ricerca il tag BotFather, ci uscirà un simpatico “utente” con l’immagine del Padrino (?).

Il famoso (e famigerato) BotFather ( minchiaaaa, ok scusate)

BotFather a sua volta è un BOT sviluppato dal team di telegram che ci permette di poter creare i famosi Bot direttamente dall’app di telegram ( Smartphone e Desktop ).

I Bot dispongono di una serie di Comandi che performano tutta una serie di azioni, in questo caso BotFather tramite i suoi comandi ci permette di poter Creare, Gestire e Modificare i nostri Bot.

Per creare il nostro Bot dobbiamo digitare o cliccare il comando /newbot, a questo punto ci chiederà di inserire il Nome del Bot.

Fatto ciò, ci chiederà di inserire un identificativo unico del nostro BOT ( un username ) che però deve finire con la stringa _bot. Ad esempio alessandro_bot.

Una volta inserito il nome, ci ritornerà un messaggio di successo con tutta una serie di informazioni, quelle che ci interessano sono:

  • Il Link della Chat/Bot
  • L’Access Token del Bot
Messaggio di Successo post-creazione del Bot

Settare il nostro BOT

Passiamo quindi alla preparazione del nostro Bot.

La prima cosa che dobbiamo fare è cliccare sul Link rilasciato da BotFather, e una volta dentro il bot cliccare su Inizia / Start. A questo punto ci basterà inviare un messaggio a caso al bot in questione.

Questo semplice quanto – apparentemente – inutile processo ci servirà per capire qual è il nostro Chat ID. Ricordi i 2 parametri della chiamata API?

Per vedere adesso qual è il chat_id in questione, dobbiamo aprire una nuova Scheda del browser e digitare questo URL.

https://api.telegram.org/bot<access_token>/getUpdates

Ovviamente al posto di <access_token>, inseriremo il nostro, fornitoci precedentemente da BotFather durante il processo di creazione.

Se siete stati brrravi nel copia e incolla vi ritornerà indietro un Json simile a questo:

Il parametro che ci interessa è l’ID, o meglio il suo valore numerico. Questo ID è relativo alla Chat generata tra NOI e il nostro BOT, ci servirà per comunicare al BOT in quale CHAT inviare il Testo una volta effettuata la chiamata API.

Creare il Form di Elementor

Creiamo quindi il nostro Form di Elementor, impostiamo i fields, e ci assicuriamo di rinominare ogni singolo ID dei fields in questione, in modo da avere a disposizione shortcode chiari.

Un Field di Elementor Form rinominato Correttamente con relativo ID e Shortcode

A questo punto ti sarai chiesto: A cosa serve Dynamic? Bene è arrivato il momento di scoprirlo.

Quei PAZZI FURIOSI hanno integrato una feature che personalmente sfrutto tantissimo nei forms, ovvero : Export.

Export banalmente ( haha ) ci permette di poter effettuare chiamate API GET e POST tramite il Form di Elementor, se il response code è 200 ( success ), allora ci risponderà con il messaggio di successo.

In Azioni dopo l’Invio inseriamo Export.

Possiamo scegliere di inviare anche un’email una volta compilato e inviato il form. Quindi performare ben 2 diverse Actions. L’invio della mail e la chiamata API.

L’Action Export inserita nelle Azioni dopo l’Invio.

Comparirà quindi una nuova Tab chiamata proprio Export, e da questa possiamo settare la nostra Chiamata API.

Schermata della Tab Export.

Il primo field è relativo all’Endpoint sul quale verrà effettuata la chiamata, l’Endpoint in questione è il seguente:

https://api.telegram.org/bot<access_token>/sendMessage

Come già fatto prima, sostituiamo <access_token> con il nostro.

Passiamo quindi ai Parametri/Argomenti da inviare tramite GET.

Chat_ID

Il primo è il chat_id, ed è il valore che precedentemente abbiamo estrapolato tramite /getUpdates, quindi in Field Key inseriamo chat_id, e in Field Value inseriamo il valore numerico.

Field Keychat_id
Field ValueIl nostro Chat ID es. 12312384
Un esempio di compilazione dell’argomento chat_id

Text

Il Valore Text è relativo al Testo che invieremo, dato che si tratta di un Form, il nostro intento è quello di inoltrare il valore dei Field compilati dall’utente.

Per fare ciò possiamo sfruttare gli shortcode generati da Elementor Stesso. Di seguito un esempio:

Nome: [field id="nome"] %0A Cognome: [field id="cognome"] %0A Chi Sei: [field id="chi_sei"] %0A Azienda: [field id="azienda"]%0A Email: [field id="email"]%0A Cell: [field id="cell"]

Una volta creato il nostro “template” contenente gli Shortcode del nostro form, aggiungiamo un nuovo Argomento e in Field Key inseriremo text e in Field Value incolleremo il template in questione.

Field Keytext
Field ValueNome: [field id=”nome”] %0A Cognome: [field id=”cognome”] %0A Chi Sei: [field id=”chi_sei”] %0A Azienda: [field id=”azienda”]%0A Email: [field id=”email”]%0A Cell: [field id=”cell”]
Un Esempio di Compilazione dell’Argomento Text

Come avrai notato, all’interno del Template oltre ad esservi Testo normale e Shortcode, vi sono anche dei caratteri speciali come %0A.

Questi banalmente dicono a telegram di andare accapo ogni qual volta viene visualizzato, e quindi ci permette di poter formattare un minimo il nostro messaggio ( siamo pur sempre dei tipi ordinati ).

Parse_Mode

I developers di Telegram non hanno lasciato nulla al caso, difatti è possibile formattare i nostri messaggi utilizzando tag HTML come <b> per il bold, <i> per l’italic ecc.

Qui Trovi una lista completa dei tag supportati.

Tuttavia per comunicare a telegram l’utilizzo di questa formattazione, dobbiamo inserirlo all’interno di un nuovo argomento.

Quindi Field Key: parse_mode e Field Value : HTML.

Field Keyparse_mode
Field ValueHTML
Comunicare a Telegram l’utilizzo della formattazione HTML.

Testare il nuovo Form

Una volta completato il tutto, possiamo passare al Test del nostro nuovo Mostro invia Notifiche, per fare ciò, salviamo il Form o la pagina in questione e la visualizziamo in una Nuova Scheda.

Compiliamo quindi il form con tutte le informazioni necessarie e clicchiamo sul bottone di Submit.

Il risultato finale sarà più o meno questo:

Conclusione

Questo metodo non vuole – forse – sostituire le email di notifica derivanti dai Form di richiesta informazioni, bensì punta a diminuire i tempi di ricezione di quest’ultime, la deliverability di un servizio o prodotto, o ritorna utile nella ricezione di semplici Notifiche d’aggiornamento, anche senza dati personali.

Inoltre, per chi gestisce campagne di marketing per terzi, ritorna molto utile nel tracking delle performance di questi, non lasciando nulla al caso ed evitando che i clienti facciano i furbi sui numeri e le metriche generate.