Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

Inserire ManyChat in WordPress con gli Shortcode

Come spesso accade questo articolo nasce da una necessità di inserire inserire uno dei Growth Tool di ManyChat collegati a Facebook in alcuni articoli. L’unico modo era quello inserire il <div> copiato da ManyChat e incollarlo nell’articolo, ma in questo modo mi sono accorto risultava invisibile nella modalità “Visuale” di WordPress.

Con uno shortcode personalizzabile invece posso inserire il Growth Tool che voglio in ogni articolo, semplicemente cambiando l’ID e il codice dello script fornito da ManyChat. Utilizzare uno shortcode è un metodo semplice e veloce, è visibile in modalità Visuale e può essere registrato nel Visual Composer (WPBakery) per il richiamo rapido.

Se ti stai chiedendo per quale motivo dovresti inserire un diverso bottone per ogni articolo te lo spiego subito. Nel mio caso ho creato diverse sequenze in ManyChat che vorrei attivare in articoli diversi, inoltre posso creare un numero illimitato di landing page richiamando sempre il Growth Tool corretto.

Servono altri motivi? Vediamo insieme come fare.

1. Cosa è uno shortcode in WordPress

Uno shortcode non è altro che una stringa di testo che al momento del rendering della pagina viene convertita in HTML.

Esistono diversi tipi di shortcode che permettono di arricchire le funzionalità, inoltre gli stessi plugin sono in grado di creare shortcode per aggiungere funzionalità.

Non entrerò nei dettagli, ma ti lascio il link alla documentazione di WordPress dove troverai spiegato in modo completo quali sono i tipi e come funzionano.

Noi creeremo con questa guida uno shortcode molto semplice chiamato self-closing perché non richiede il tag di chiusura, inoltre sarà in grado di accettare due attributi, che nel nostro caso sono l’ID e lo script del nostro Growth Tool preso da ManyChat.

2. Requisiti: il tema child

Se non lo avete già fatto create il tema child (figlio) al quale apportare le modifiche.

Senza tema child ad ogni aggiornamento del tema principale perderete le modifiche fatte, quindi più che una raccomandazione è imperativo disporre di un tema child quando si vogliono aggiungere funzionalità a WordPress.

3. Growth Tool di ManyChat

Per poter caricare correttamente il Growth Tool di ManyChat all’interno di wordpress è richiesto l’inserimento all’interno della pagina dove si vuole eseguire il Tool di due elementi

  • uno script Javascript che contiene le impostazione del widget
  • <!-- ManyChat -->
    <script src="//widget.manychat.com/xxxxxxxxxxxxx.js" async="async">
    </script>
  • un tag <div> che serve a richiamare il Growth Tool nel punto specifico nella pagina
  • <div class="mcwidget-embed" data-widget-id="yyyyyyy"></div>

Il nostro obiettivo è quello di creare uno shortcode che accetti 2 parametri, l’ID del widget (yyyyyyy) e il nome dello Script (xxxxxxxxxxxxxx).

Lo shortcode avrà quindi questo aspetto [manychat id=yyyyyyy script=xxxxxxxxxxxx]

In questo modo potremo salvare lo shortcode anche nel Visual Composer e utilizzarlo rapidamente in diverse posizioni all’interno delle nostre pagine. Inoltre in questo modo il file Javascript verrà caricato solo al bisogno riducendo le risorse richieste per caricare la pagina WordPress.

4. Creazione dello shortcode

Dopo la pubblicazione della pagina lo shortcode verrà sostituito con il tag <script> corretto e con il <div> che ManyChat vi suggerisce di copiare. In questo modo potrete inserire Growth Tool diversi nelle pagine che preferite cambiando solo l’ID e ID-Script.

Come dicevo inoltre gli shortcode sono visibili anche dall’interfaccia visuale di WordPress quindi è più semplice vederli e riposizionarli.

Per la creazione dello shortcode ci avvarremo della funzione add_shortcode() presente in WordPress.

//%MINIFYHTMLb13f65169c35b358f3a994e5d5cd23ad27%
function manychat_short( $atts ) { $a = shortcode_atts( array( 'id' => '', ’script’ => '', ), $atts ); return '<!-- ManyChat --><script src="//widget.manychat.com/' . $a["script"] . '.js" async="async"></script><div class="mcwidget-embed" data-widget-id="' . $a["id"] . '"></div>'; } add_shortcode( 'manychat', 'manychat_short' ); // il primo attributo è il nome dello shortcode, il secondo della funzione per crearlo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ricevi i nostri migliori articoli direttamente alla tua mail

Iscriviti ora gratis e ricevi per primo gli ultimi articoli su come creare e gestire al meglio il tuo sito WordPress e i tuoi Social Network preferiti

Designed by The Digital Clinic