Come aggiungere e personalizzare il pulsante di ordinazione online

La pubblicazione del pulsante di ordinazione online sul tuo sito Web è normalmente una questione di copia incolla. Le cose possono diventare un po’ più complicate quando si incontrano i limiti del costruttore di siti Web, soprattutto se si desidera anche personalizzare il pulsante per adattarlo al meglio al layout e al design.

Abbiamo visto centinaia di pulsanti di ordinazione e come li usi sui tuoi siti web. Grazie ai vostri feedback, siamo stati in grado di migliorare costantemente il codice html e rivolgerci ai più comuni costruttori di siti web. In questo ultimo post del blog abbiamo raccolto i nostri suggerimenti e procedure per sfruttare al meglio il pulsante di ordinazione online.

Fai notare il tuo pulsante di ordinazione online

Affinché gli ordini vengano eseguiti, i visitatori del tuo sito Web devono notare il pulsante e fare clic su di esso. La magia non può accadere altrimenti. Esamina questo elenco di best practice e assicurati di controllarle tutte.

• Mostra il pulsante sulla homepage. Non stiamo escludendo altre pagine, se lo desideri, ma assicurati che il tuo pulsante di ordinazione online o invito all’azione sia presente sulla home page. Anche, posizionalo sopra la piega. I tuoi clienti devono vederlo subito, per assicurarsi che tu lo stia davvero facendo e che il loro ordine non venga ignorato. Inoltre, molti clienti del settore alimentare tendono a non scorrere. Un cattivo esempio che abbiamo visto: il pulsante posto solo in fondo alla pagina dei contatti. Ciò riduce significativamente le possibilità di ricevere ordini online.
• Fai risaltare il pulsante. Il pulsante di ordinazione online dovrebbe essere visibile e attirare l’attenzione. Non limitarti a “buttarlo” in un angolo affollato del tuo sito web. Dagli spazio e assicurati che il colore si distingua dallo sfondo e dall’ambiente circostante.
• La dimensione è importante. Devi rendere il tuo pulsante di ordinazione online leggermente più prominente rispetto agli altri pulsanti o collegamenti nella pagina. Attenzione però a non esagerare. Un pulsante troppo grande ucciderà il resto dei tuoi contenuti nella pagina.
• Testo orientato all’azione. Devi guidare il tuo cliente verso l’obiettivo desiderato: ordinare online. Quando premi il pulsante, il tuo cliente non dovrebbe essere sorpreso dal risultato. Il tuo testo dovrebbe essere invitante ed esplicito su ciò che accadrà dopo. “Vedi menu e ordina” o “Ordina online” sono buone etichette da utilizzare.

Come aggiungere il pulsante personalizzato al tuo sito web

Come detto prima, per aggiungere il pulsante devi solo copiare e incollare il codice nella tua pagina. Tuttavia, la maggior parte dei costruttori di siti Web presenta alcune restrizioni. Dai un’occhiata ai nostri esempi visivi e consigli:

Ultimamente abbiamo apportato diversi miglioramenti per affrontare i limiti dei costruttori di siti web. Ecco alcuni esempi:

• È completamente compatibile con WordPress, il che significa che non sono necessari altri plug-in. Puoi semplicemente copiare e incollare il codice in modalità Testo.
• Il pulsante può essere aggiunto più volte sulla stessa pagina senza ulteriori problemi.
• Il pulsante e il menu del cibo online si caricano più velocemente.

Lo consigliamo ottieni l’ultima versione del tuo codice personalizzato dall’area Admin e aggiornalo sul tuo sito web.

Come prendere ordini online con GloriaFood: aggiungere il pulsante Ordina in diversi costruttori di siti web

Come personalizzare il pulsante Visualizza menu e ordina

Può succedere che il pulsante arancione predefinito Visualizza menu e ordina non vada bene sul tuo sito web. Il colore non risalta, le dimensioni non si adattano al posizionamento, il carattere o lo stile del pulsante stesso non corrispondono agli altri elementi del tuo sito web. In questi casi è necessario modificare l’aspetto del pulsante di ordinazione online.

Se sei un tipo da “fai da te” ma non sai come gestirlo, continua a leggere questa sezione.

Il codice del tuo pulsante è simile al seguente:

<!-- If you would like to customize the button, remove or change the "class" attribute inside the <span> tag -->
<span class="glf-button" data-glf-cuid="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" data-glf-ruid="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" data-glf-auto-open="false"> See MENU & Order</span>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscriptsrc%3D%22https%3A%2F%2Fwww.foodbooking.com%2Fwidget%2Fjs%2Fewm2.js%22%20deferasync%20%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

L’aspetto attuale del pulsante è dato da class="glf-button". In questa classe abbiamo definito le proprietà che fanno apparire il pulsante arancione, avere il carattere bianco e così via. Puoi modificare lo stile del pulsante:

• sostituendo il glf-button class con la tua classe di pulsanti, o
• definire lo stile desiderato in linea.

Ecco alcune proprietà con cui giocare:

Combina le proprietà insieme per ottenere il design desiderato. Ad esempio, il seguente stile:

style="padding:15px; font-size: 16px; border-radius:40px; background-color:#008F00"

inserito nel codice del pulsante in questo modo:

<span class="glf-button" data-glf-cuid="cd6801cb-200c-495d-9b31-66637e177162" data-glf-ruid="ac4a6b17-c1a7-4cee-9d15-8f133982a3b3" data-glf-auto-open="false" style="padding:15px; font-size: 16px; border-radius:40px; background-color:#008F00"> See MENU & Order</span>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fwww.foodbooking.com%2Fwidget%2Fjs%2Fewm2.js%22%20defer%20async%20%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

produrrà il seguente risultato:

Vedi MENU & Ordine

Puoi anche usare la proprietà style per regolare la posizione del pulsante nel suo contenitore. Ecco un esempio di come posizionare il pulsante centrato orizzontalmente e 100 pixel in basso rispetto all’alto:

style: "position: absolute; left: 50%; transform: translateX(-50%); top: 100px;"

Un ultimo suggerimento: C’è un simpatico strumento online (JS Bin) che ti permette di giocare con un pezzo di codice e ti mostra subito il risultato. Aprilo, elimina il codice già presente nella colonna di sinistra e incolla il codice del tuo pulsante. Man mano che apporti modifiche al codice, la colonna di destra si aggiornerà automaticamente. Fai un tentativo, ti farà risparmiare tempo.

Divertiti a personalizzare il tuo pulsante, ma fallo saggiamente! Tieni a mente le best practice di cui abbiamo parlato all’inizio di questo articolo!

Su questo argomento: Vedi altri esempi e consigli su come aggiungere e personalizzare il pulsante di ordinazione online in:

Quando accetti, rifiuti o perdi un ordine, i tuoi clienti ricevono una notifica via e-mail. È tutto molto semplice e diretto.