Come utilizzare i webhook con i moduli di WordPress

Vuoi integrare i tuoi moduli WordPress con diverse applicazioni e servizi web?

Se hai bisogno di un modo semplice per inviare dati su un'applicazione web direttamente dal tuo modulo WordPress, i webhook sono la soluzione perfetta. Con un modulo webhook, non è necessario avvalersi dell'aiuto di un connettore di terze parti come Zapier.

In questo post, ti mostreremo come utilizzare i webhook sui tuoi moduli WordPress in modo da poter inviare facilmente dati in tempo reale alle tue app e servizi preferiti.

Ma prima, se sei un principiante, tratteremo cosa sono i webhook e perché sono importanti. Tieni presente che il metodo che useremo oggi non richiede che tu abbia alcuna capacità di programmazione.

Cosa sono i Webhook?

I webhook consentono a due applicazioni web di comunicare tra loro. Quindi, ad esempio, se qualcuno invia un modulo d'ordine di acquisto sul tuo sito Web, puoi inviare tali dati al tuo canale Slack per aggiornare il team del prodotto che è stato effettuato un ordine. Puoi farlo anche quando ottieni un nuovo lead o abbonato.

In termini tecnici, i webhook sono callback HTTP definiti dall'utente che vengono attivati ​​da un evento in un sistema di origine e inviati al sistema di destinazione.

Ciò significa che quando si verifica un evento o un trigger sul tuo sito Web, i messaggi automatici vengono inviati a un servizio connesso. Un trigger può essere qualsiasi cosa come commenti sul blog, registrazioni degli utenti per l'acquisto di prodotti e invii di moduli.

Se ti stai chiedendo perché dovresti usare i webhook, ecco alcuni vantaggi:

• Trasferisci automaticamente le informazioni tra due servizi/app
• Automatizza le attività e riduci il tempo di amministrazione
• Riduci il costo dell'utilizzo di servizi di connessione come Zapier e Hubspot per elaborare i dati nelle app.

I webhook sono incredibilmente utili per gli sviluppatori e gli utenti WordPress esperti di tecnologia.

Detto ciò, iniziamo la nostra guida passo passo su come creare un modulo webhook in WordPress.

Creazione di un modulo webhook in WordPress [Metodo facile]

Esistono molti modi in cui puoi utilizzare i webhook per inviare i tuoi invii di moduli WordPress ad altre applicazioni web.

Utilizzeremo WPForms per questo tutorial in quanto offre un componente aggiuntivo Webhooks facile da usare per chiunque, compresi i principianti. Non c'è assolutamente alcuna codifica coinvolta.

WPForms è il miglior plug-in per la creazione di moduli per siti WordPress. E quello che devi sapere è che offre tonnellate di modelli predefiniti e campi modulo pronti per l'uso che ti consentono di creare tutti i tipi di moduli WordPress. Ciò include l'ordine del prodotto, la registrazione, la prenotazione di appuntamenti, semplici moduli di contatto e altro ancora.

WPForms viene fornito con un generatore di moduli drag and drop che rende la personalizzazione dei moduli un gioco da ragazzi. Ha tonnellate di componenti aggiuntivi e integrazioni che puoi utilizzare per connetterti ad app di posta elettronica, pagamento e marketing.

Con il suo componente aggiuntivo Webhooks, puoi connettere facilmente il tuo WordPress con qualsiasi servizio o app. Bastano pochi clic per abilitare questa funzionalità.

Inoltre, WPForms consente di utilizzare regole condizionali per attivare un'azione webhook in base alla risposta del modulo dell'utente. Quindi, solo se il valore di un campo viene soddisfatto, il webhook verrà eseguito. Questo ti dà un maggiore controllo su quali dati vuoi inviare e a quale app.

Puoi connetterti a tantissime app e servizi. Per questo tutorial, ti mostreremo come connetterti a Slack. Ma ricorda, puoi utilizzare gli stessi passaggi anche per connetterti ad altre app ed endpoint.

Passaggio 1: crea una nuova app Slack

Collegando il tuo modulo webhook a Slack, puoi inviare automaticamente messaggi e informazioni dal tuo sito web ai tuoi canali Slack. Puoi aggiornare i membri del tuo team o i reparti quando una persona invia un modulo, abbandona un modulo e altro ancora.

Ora per inviare dati da WordPress a un altro servizio utilizzando i webhook, dovrai creare un ponte tra le due app. Quindi, per connetterti a Slack, dovrai creare un'app Slack (il bridge).

Se non conosci questo, non preoccuparti, è abbastanza facile e ti guideremo passo dopo passo. Innanzitutto, dovrai aprire la pagina dell'API Slack e fare clic sul pulsante Crea un'app .

Nella finestra popup successiva, puoi scegliere come creare un'app con Slack. Ci sono due opzioni:

• Da zero
• Da un manifest dell'app.

Qui creeremo un'app Slack da zero. Sembra un sacco di lavoro, ma in realtà bastano pochi clic.

Quindi, vedrai il popup in cui puoi aggiungere il nome dell'app e scegliere il tuo posto di lavoro Slack. Al termine, fai clic su Crea app .

Si apre la pagina Informazioni di base. Qui, devi fare clic sull'opzione Webhook in entrata.

Nella schermata successiva, abilita le impostazioni Attiva webhook in entrata . Ciò ti consente di pubblicare messaggi su Slack da servizi esterni.

Una volta abilitato, vedrai la sezione URL Webhook per il tuo spazio di lavoro nella pagina.

Ora devi creare un nuovo webhook per ottenere informazioni dal tuo modulo WordPress. Quindi, fai clic sul pulsante Aggiungi nuovo webhook all'area di lavoro .

Successivamente, puoi vedere il popup in cui puoi selezionare un canale Slack per pubblicare i tuoi invii di moduli.

Dopo aver scelto un canale Slack, fare clic su Consenti .

Ora potrai vedere il nuovo URL webhook per la tua app Slack.

Tutto quello che devi fare ora è copiare l'URL del webhook. Ti servirà qualche passaggio dopo.

Passaggio 2: installa e attiva WPForms

Una volta che hai il tuo URL webhook, puoi aggiungerlo al tuo modulo WordPress.

Per iniziare, registra un account sul sito Web WPForms.

Esiste una versione gratuita del plug-in, ma avrai bisogno della versione premium per accedere a funzionalità avanzate dei moduli come i webhook. WPForms viene fornito con una garanzia di rimborso al 100% senza rischi, così puoi provare il servizio prima di prendere un impegno.

Dopo esserti registrato, troverai il file di download del plug-in e il codice di licenza nella scheda Download .

Ora vai alla dashboard di WordPress e installa il plug-in. Se desideri maggiori dettagli, puoi consultare la nostra guida su come installare un plugin per WordPress.

Dopo aver installato e attivato WPForms sul tuo sito, dovrai inserire la tua chiave di licenza per goderti tutte le tue funzionalità premium e i componenti aggiuntivi.

Prima di iniziare a creare il tuo modulo, devi installare il componente aggiuntivo Webhooks.

Per questo, vai alla scheda WPForms »Componenti aggiuntivi e troverai tonnellate di componenti aggiuntivi che ti aiutano a estendere la funzionalità dei tuoi moduli WordPress. Qui, fai clic sul pulsante Installa componente aggiuntivo per il componente aggiuntivo Webhooks.

Ora sei pronto per creare il tuo modulo webhook in WordPress.

Passaggio 3: crea un modulo webhook

Per creare un nuovo modulo, vai alla pagina WPForms »Aggiungi nuovo dove vedrai un elenco di modelli predefiniti. Questi modelli sono precompilati con i campi necessari in base allo scopo del modulo. La libreria di modelli include:

• Modulo di contatto semplice
• Richiedi un Modulo Preventivo
• Modulo di donazione
• Modulo di fatturazione/ordine
• Modulo di sondaggio
• Modulo di suggerimento

…e altro ancora! Per questo tutorial, sceglieremo il modello di modulo di suggerimento perché abbiamo creato un'app Slack per il feedback degli utenti nel passaggio precedente. Sentiti libero di scegliere quello più adatto a ciò di cui hai bisogno.

Tutto quello che devi fare è dare un nome al tuo modulo nella parte superiore della pagina. Quindi scegli un modello qualsiasi a seconda delle tue esigenze oppure puoi scegliere il modello vuoto per iniziare da zero.

Dopo aver selezionato un modello, vedrai il generatore di moduli trascina e rilascia nella finestra successiva.

Se desideri aggiungere più campi, trascina e rilascia i nuovi campi dal menu a sinistra nell'anteprima del modulo.

WPForms offre molte opzioni di personalizzazione in modo da poter fare clic su qualsiasi campo per modificarle. Ti consente di modificare i nomi dei campi, la descrizione e le impostazioni più avanzate.

Dopo aver aggiunto i campi del modulo, fai clic sul pulsante Salva .

Nel passaggio successivo, impareremo come configurare webhook per questo modulo e connettere la tua app Slack.

Passaggio 4: imposta un webhook per Slack

Affinché i webhook funzionino sul tuo modulo, devi accedere alla scheda Impostazioni »Webhook e fare clic sull'opzione Abilita webhook .

Verrà creato un nuovo webhook che puoi modificare per configurare la tua integrazione Slack.

Innanzitutto, puoi cambiare il nome del webhook. Questo ti aiuterà a riconoscerlo in seguito.

Ora ricordi l'URL Webhook che hai copiato dalla tua app Slack nel passaggio 1? Dovrai incollarlo qui nell'opzione URL di richiesta . Ciò ti consentirà di connettere il tuo modulo WordPress con altri servizi come Slack.

Successivamente, vedrai varie impostazioni per configurare il tuo webhook. Discuteremo cosa fa ciascuno e cosa aggiungere a questi campi qui.

• Metodo di richiesta: ti consente di scegliere il tipo di connessione che desideri creare con il tuo servizio connesso. Esistono molti tipi di metodi HTTP che puoi utilizzare in base al tipo di connessione che stai cercando di creare:
  • OTTIENI : otterrà i dati dal modulo inviato e invierà i dettagli a un'app connessa.
  • POST : invierà i dati a un servizio secondario. Utilizzeremo la richiesta HTTP POST poiché abbiamo bisogno di inviare i dati dal tuo modulo al tuo canale Slack.
  • PUT : ti consente di aggiornare i dati quando il webhook è in esecuzione.
  • PATCH : consente di sostituire i dati durante l'esecuzione del webhook.
  • DELETE : consente di eliminare le informazioni durante l'esecuzione di questo webhook specifico.
• Formato richiesta: questa opzione mostrerà al server quale tipo di contenuto stai inviando. Questo è un po' tecnico, ma fondamentalmente sono disponibili due diversi tipi di formati di richiesta:
  • JSON : formatta i tuoi dati in un formato application/json e imposterà il tipo di contenuto come charset=utf-8 .
  • FORM : formatta i tuoi dati in un formato application/x-www-form-urlencoded e imposterà il tipo di contenuto come charset=utf-8 .
• Segreto: se sei uno sviluppatore e desideri integrare la tua API per l'autenticazione, puoi utilizzare una chiave segreta. Ma per il nostro tutorial, non abbiamo bisogno di questa opzione, quindi la lasceremo vuota.
• Intestazioni della richiesta: invia valori specifici quando la richiesta viene inviata all'app. Quando il webhook viene eseguito, i campi verranno generati automaticamente. Lasceremo vuoto anche questo campo.
• Corpo della richiesta: per questa opzione, è necessario impostare il tipo di messaggio e selezionare un campo per inviare i messaggi. Poiché gli utenti inseriranno suggerimenti in formato testo, imposteremo la chiave su Testo . Quindi, seleziona il campo in cui gli utenti inseriranno il loro messaggio.

Dopo aver terminato con le impostazioni della richiesta webhook, fare clic sul pulsante Salva .

Passaggio 5: imposta le notifiche dei moduli

Successivamente, puoi impostare notifiche e-mail per il modulo WordPress. Ciò ti consente di inviare e-mail automatizzate all'amministratore, a qualsiasi membro del team e al cliente/utente una volta inviato il modulo.

Per configurare questi flussi di lavoro e-mail, vai alla scheda Impostazioni »Notifiche , seleziona l'opzione Abilita notifiche per vedere le impostazioni predefinite.

Qui puoi personalizzare le impostazioni di notifica e aggiungere gli indirizzi e-mail dei destinatari.

WPForms ti consente anche di inviare notifiche e-mail automatiche anche agli utenti del modulo. Per configurarlo, fai clic sul pulsante Aggiungi nuova notifica nell'angolo in alto a destra della pagina.

Quindi, è necessario utilizzare l'opzione Mostra smart tag e selezionare Email . Con questo tag, WPForms rileverà automaticamente l'indirizzo e-mail inserito dall'utente nel modulo.

Nella sezione Messaggio e-mail , puoi aggiungere il tuo messaggio personalizzato e utilizzare lo smart tag {all_fields} per mostrare tutti i dati del modulo inseriti dall'utente.

Non dimenticare di salvare le impostazioni alla fine.

Passaggio 6: personalizza il messaggio di conferma

WPForms ti consente anche di visualizzare messaggi di conferma sul front-end del tuo sito dopo che gli utenti hanno inviato correttamente il modulo.

Nella scheda Impostazioni »Conferme , vedrai le impostazioni di conferma. Per impostazione predefinita, il tipo di conferma è impostato su "Messaggio", ma ci sono 3 opzioni in questo menu:

• Messaggio: aggiungi un messaggio di conferma che viene visualizzato sul frontend dopo che i clienti hanno inviato l'ordine.
• Mostra pagina: reindirizza i tuoi utenti a qualsiasi pagina del tuo sito.
• Vai a URL (Reindirizzamento): invia gli utenti a un URL specifico.

Per saperne di più, puoi consultare la nostra guida su come impostare le notifiche e le conferme dei moduli nel modo giusto.

Una volta terminate le impostazioni, fare clic sul pulsante Salva .

Dobbiamo anche menzionare qui che WPForms ti consente di integrarti con il tuo servizio di posta elettronica preferito come Constant Contact e Mailchimp.

Devi semplicemente accedervi nella scheda Marketing e seguire le istruzioni sullo schermo per collegare il tuo account e-mail. Nella maggior parte dei casi, dovrai fornire una chiave API che puoi generare con il provider di posta elettronica.

Se desideri collegare anche i moduli online a un gateway di pagamento, puoi imparare a farlo qui: Come creare un modulo d'ordine online

Tutto quello che devi fare ora è pubblicare il tuo modulo webhook sul tuo sito WordPress.

Passaggio 7: pubblica il modulo Webhook sul tuo sito

Per iniziare a inviare invii di moduli a servizi esterni, devi prima pubblicare il modulo webhook. Con il blocco personalizzato WPForms, puoi aggiungere i tuoi moduli a qualsiasi pagina o pubblicare sul tuo sito WordPress.

Per questo tutorial, aggiungeremo il modulo a una nuova pagina del nostro sito. Quindi vai alla scheda Pagine »Aggiungi nuovo nel pannello di amministrazione di WP. Nella schermata dell'editor dei blocchi, aggiungi un nuovo blocco e cerca "WPForms".

Quando aggiungi il blocco WPForms alla tua pagina, vedrai un menu a discesa che ti consente di selezionare il modulo webhook che hai appena creato.

Quindi, puoi pubblicare la tua pagina sul tuo sito.

Se stai utilizzando l'editor classico di WordPress, puoi aggiungere il modulo utilizzando il pulsante Aggiungi modulo nell'editor.

Puoi persino inserire il tuo modulo webhook in un'area pronta per il widget come un piè di pagina o una barra laterale. Per fare ciò, vai alla scheda Aspetto »Widget e trascina e rilascia il widget WPForms nella barra laterale o nel menu a piè di pagina a destra.

Quindi, puoi selezionare il modulo che hai creato dal menu a discesa e salvare le modifiche.

Ora il tuo modulo webhook è pubblicato sul tuo sito. Quando gli utenti compilano e inviano il modulo, riceverai notifiche Slack dal tuo sito web.

In questo modo, puoi utilizzare WPForms per connetterti a diverse app utilizzando gli URL webhook. Ottieni il controllo completo sui dati che desideri recuperare e inviare ad altre app.

È tutto! Ci auguriamo che questo post ti abbia aiutato a imparare come utilizzare i Webhook sui tuoi moduli WordPress. Con WPForms, puoi creare un modulo webhook e connetterti con un servizio di terze parti con facilità.

Puoi anche usarlo per creare altri moduli WordPress professionali come moduli d'ordine, moduli di prenotazione, moduli di registrazione e altro ancora.

Per i tuoi prossimi passi, puoi controllare queste risorse:

• Come aggiungere l'opzione "Salva e continua in seguito" ai moduli di WordPress
• Come ridurre l'abbandono della forma e aumentare le conversioni
• I migliori strumenti di acquisizione e-mail e generatori di moduli per WordPress

Questi post ti aiuteranno ad aggiungere la funzionalità di salvataggio e ripristino in un secondo momento sui tuoi moduli WordPress e a ridurre i tassi di abbandono dei moduli. L'ultimo ti aiuterà a far crescere la tua lista di email marketing.