Come aggiungere il pulsante di chat aziendale di Apple al tuo sito Web WordPress

Pubblicato: 2021-03-01

Apple Message è una funzione che consente ai webmaster di aggiungere il pulsante della chat aziendale e il pulsante del telefono/chiamata al proprio sito web. È molto utile e conveniente perché gli utenti possono contattare direttamente i proprietari del sito Web per chiedere aiuto. Pertanto, come proprietario di un sito Web, dovresti assolutamente aggiungere il pulsante della chat aziendale al tuo sito Web WordPress per aumentare l'esperienza dell'utente.

Sommario nascondi

1. Passaggio 1: iscriviti alla chat aziendale
2. Passaggio 2: aggiungi la libreria Javascript
1. 2.1. Metodo 1: modifica il codice nel file del tema
2. 2.2. Metodo 2: utilizzo del plug-in Slim SEO
3. Passaggio 3: visualizza il pulsante della chat aziendale nella posizione desiderata
4. Ultime parole

Durante l'implementazione, è necessario utilizzare del codice HTML, quindi è relativamente difficile per i non esperti di tecnologia. Ma non preoccuparti perché ti guideremo attraverso questo processo passo dopo passo.

Nota : il pulsante della chat aziendale è disponibile solo sui dispositivi Apple. Se gli utenti non utilizzano questi dispositivi, il pulsante verrà nascosto.

Passaggio 1: iscriviti alla chat aziendale

Innanzitutto, vai alla pagina del registro delle imprese di Apple e iscriviti a Business Chat con il tuo ID Apple. È abbastanza facile, quindi non entrerò nei dettagli.

Ora hai già il tuo ID chat aziendale. Salva questo ID da qualche parte perché ti servirà nel passaggio successivo.

Passaggio 2: aggiungi la libreria Javascript

Successivamente, devi aggiungere la libreria Javascript per visualizzare il pulsante Business Chat sul sito web. Ci sono due metodi per farlo:

Metodo 1: modifica il codice nel file del tema

Trova i <head></head> o </body> nel file del tema. Le loro posizioni saranno diverse a seconda del tema. Ad esempio, sto usando il tema Justread, quindi il <head><head> è nel file header.php e il </body> è nel file footer.php .

Dopo aver trovato questi tag sopra, aggiungi questo codice prima del </body> o nel tag <head><head> :

 <script src="https://static.cdn-apple.com/businesschat/start-chat-button/2/index.js"></script>

Metodo 2: utilizzo del plug-in Slim SEO

Oltre a modificare il codice nel file del tema, puoi utilizzare il plug-in Slim SEO per aggiungere il codice senza accedere al file del tema e cercare i <head><head> e </body> .

Slim SEO è totalmente gratuito, quindi puoi trovarlo facilmente su wordpress.org. Nella dashboard di amministrazione , vai su Plugin > Aggiungi nuovo , quindi installa e attiva il plug-in come al solito.

Slim SEO – Plugin SEO WordPress veloce e automatizzato

Autore/i: eLightUp

Versione corrente: 3.11.1

Ultimo aggiornamento: 16 novembre 2021

slim-seo.3.11.1.zip

92% Valutazioni 10.000+ Installa WP 4.5+ Richiede

Successivamente, vai su Impostazioni > Slim SEO e aggiungi il codice sopra alle sezioni Codice intestazione o Codice corpo .

E non dimenticare di fare clic su Salva .

Inoltre, Slim SEO ha molte altre utili funzioni per aiutarti a ottimizzare automaticamente i siti Web WordPress per la SEO. Puoi saperne di più su queste funzionalità qui.

Passaggio 3: visualizza il pulsante della chat aziendale nella posizione desiderata

In questo passaggio finale, devi visualizzare il pulsante Business Chat nell'area del widget che desideri. Questo può essere fatto aggiungendo del codice HTML al widget. Il codice HTML deve avere la seguente struttura:

 <div class="nome-classe-apple" nome-attributo-apple ></div>

Faccio un esempio con un attributo sotto forma di data-apple-business-id . Ricordi l'ID preso al punto 1? Ora è il momento di usarlo. Il mio ID è ca0db090 e voglio aggiungere il pulsante chat in un banner in container-style , quindi il mio tag <div> è:

 <div class="apple-business-chat-banner-container" data-apple-business-></div>

Tieni presente che l'attributo data-apple-business-id è obbligatorio. Viene utilizzato per specificare il proprietario dell'ID di Business Chat e inviare loro i messaggi.

Inoltre, ci sono molte altre classi e attributi che puoi usare per il codice HTML. Puoi trovare le classi e gli attributi più popolari nell'elenco seguente:

Classi per visualizzare i pulsanti di chat o chiamata:

apple-business-chat-banner-container : visualizza sia i pulsanti di chat che quelli di chiamata
apple-business-chat-message-container : mostra solo il pulsante di chat
apple-business-chat-phone-container : visualizza solo il pulsante di chiamata
eccetera

Attributi per personalizzare la visualizzazione dei pulsanti di chat/chiamata (colori, caratteri, dimensione, …)

data-apple-banner-font-family : scegli un carattere familiare per il pulsante Call to action
data-apple-banner-icon-background-color : scegli il colore di sfondo (il cerchio) dell'icona
data-apple-banner-icon-color : scegli i colori dei pulsanti di chat e chiamata
Eccetera.

Attributi relativi all'interazione tra clienti e proprietari di siti web:

data-apple-business-group-id : determina il reparto che riceve le chiamate/messaggi. Ad esempio, è possibile assegnare a questo attributo l'ID dei reparti "Servizio clienti" o "Assistenza tecnica".
Data-apple-business-phone : inserisci il numero di telefono che gli utenti utilizzano per contattarti se non possono chattare. Se non aggiungi questo attributo, il pulsante Chiama sarà nascosto.
Eccetera.

Inoltre, puoi trovare tutti gli attributi e le classi di Apple qui.

Dopo aver ottenuto i tag <div> necessari, aggiungili nella posizione desiderata utilizzando l'editor HTML. Ad esempio, voglio visualizzare il pulsante Business Chat in un widget nel piè di pagina del tema Justread ed ecco il modo per farlo.

Nella dashboard di amministrazione , vai su Aspetto > Widget , scegli il widget HTML personalizzato , quindi scegli di visualizzare il widget a piè di pagina.

Successivamente, inserisci il seguente codice nel widget:

 <div>
	class="contenitore-banner-chat-apple-business"
	dati-apple-business-
	data-apple-business-phone="0987725475"
	data-apple-banner-cta="Hai domande? Possiamo aiutarti."
	data-apple-banner-context="Chatta con uno dei nostri professionisti per ottenere la tua offerta per iPhone Xs."
	data-apple-banner-scale="1"
	data-apple-banner-background-color="rgb(27, 63, 104)"
	data-apple-banner-text-color="rgb(255, 255, 255)"
	data-apple-banner-icon-background-color="rgb(255, 255, 255)"
	data-apple-banner-icon-color="rgba(0, 210, 143, 0.3)"></div>

Infine, fai clic su Salva .

Abbiamo finito di visualizzare il pulsante Business Chat a piè di pagina del sito WordPress. D'ora in poi, gli utenti Apple vedranno il pulsante Business Chat visualizzato nel piè di pagina in questo modo:

Puoi modellare il pulsante e visualizzarlo in altre posizioni allo stesso modo con il codice, le classi e gli attributi sopra. Provalo e mostracelo nella sezione commenti!

Ultime parole

L'utilizzo del codice per aggiungere il pulsante Business Chat al sito Web di WordPress può essere piuttosto difficile per i principianti di WordPress. Ma se segui rigorosamente questo tutorial, funzionerà sicuramente. Dopo aver inserito il pulsante Business Chat sul tuo sito, non dimenticare di rispondere alle chiamate e ai messaggi dei clienti. Aiuterà a creare fiducia tra i clienti e il proprietario del sito web, migliorando così il tuo marchio e aumentando la conversione.

Oltre ad aggiungere il pulsante della chat aziendale, puoi anche aggiungere il pulsante della chat dal vivo e il pulsante della chat dei clienti di Facebook al tuo sito Web WordPress. Queste funzionalità ti aiutano a rispondere più prontamente alle domande dei clienti.