Cum să adăugați butonul Apple Business Chat pe site-ul dvs. WordPress

Publicat: 2021-03-01

Apple Message este o caracteristică care permite webmasterilor să adauge butonul de chat de afaceri și butonul de telefon/apel pe site-ul lor. Este foarte util și convenabil, deoarece utilizatorii pot contacta direct proprietarii site-ului web pentru a cere ajutor. Prin urmare, în calitate de proprietar de site, ar trebui să adăugați cu siguranță butonul de chat de afaceri pe site-ul dvs. WordPress pentru a crește experiența utilizatorului.

Cuprins ascunde
  1. 1. Pasul 1: Înscrieți-vă pentru Business Chat
  2. 2. Pasul 2: Adăugați biblioteca Javascript
    1. 2.1. Metoda 1: Editați codul în fișierul temă
    2. 2.2. Metoda 2: Utilizarea pluginului Slim SEO
  3. 3. Pasul 3: Afișați butonul Business Chat în poziția dorită
  4. 4. Ultimele cuvinte

În timpul implementării, trebuie să utilizați un cod HTML, deci este relativ dificil pentru cei care nu cunosc tehnologie. Dar nu vă faceți griji pentru că vă vom ghida prin acest proces pas cu pas.

Notă : butonul de chat pentru afaceri este disponibil numai pe dispozitivele Apple. Dacă utilizatorii nu folosesc aceste dispozitive, butonul va fi ascuns.

Pasul 1: Înscrieți-vă pentru Business Chat

Mai întâi, accesați pagina Apple Business Register și înscrieți-vă la Business Chat cu ID-ul dvs. Apple. Este destul de ușor, așa că nu voi intra în detalii.

accesați pagina Apple Business Register și înscrieți-vă la Business Chat cu ID-ul dvs. Apple

Acum, aveți deja propriul ID de Business Chat. Salvați acest ID undeva pentru că veți avea nevoie de el la pasul următor.

Pasul 2: Adăugați biblioteca Javascript

Apoi, trebuie să adăugați Biblioteca Javascript pentru a afișa butonul Business Chat pe site. Există două metode de a face acest lucru:

Metoda 1: Editați codul în fișierul temă

Găsiți etichetele <head></head> sau </body> în fișierul dvs. temă. Locațiile lor vor fi diferite în funcție de temă. De exemplu, folosesc tema Justread, deci eticheta <head><head> este în fișierul header.php , iar eticheta </body> este în fișierul footer.php .

După ce găsiți aceste etichete de mai sus, adăugați acest cod înainte de eticheta </body> sau în eticheta <head><head> :

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

Metoda 2: Utilizarea pluginului Slim SEO

În afară de editarea codului în fișierul temă, puteți utiliza pluginul Slim SEO pentru a adăuga codul fără a merge la fișierul temă și a căuta etichetele <head><head> și </body> .

Slim SEO este complet gratuit, așa că îl puteți găsi cu ușurință pe wordpress.org. Pe tabloul de bord admin , accesați Plugin-uri > Adăugați nou , apoi instalați și activați pluginul ca de obicei.

Slim SEO – Plugin SEO rapid și automatizat pentru WordPress Slim SEO – Plugin SEO rapid și automatizat pentru WordPress

Autor(i): eLightUp

Versiunea curentă: 3.11.1

Ultima actualizare: 16 noiembrie 2021

slim-seo.3.11.1.zip

92% Evaluări 10.000+ Instalări WP 4.5+ Necesită

După aceea, accesați Setări > Slim SEO și adăugați codul de mai sus la secțiunile Header Code sau Body Code .

utilizați pluginul Slim SEO pentru a adăuga codul pentru a afișa butonul de chat de afaceri Apple

Și nu uitați să faceți clic pe Salvați .

În plus, Slim SEO are multe alte caracteristici utile pentru a vă ajuta să optimizați automat site-urile WordPress pentru SEO. Puteți afla mai multe despre aceste caracteristici aici.

Pasul 3: Afișați butonul Business Chat în poziția dorită

În acest pas final, trebuie să afișați butonul Business Chat în zona widget pe care o doriți. Acest lucru se poate face prin adăugarea unui cod HTML la widget. Codul HTML trebuie să aibă următoarea structură:

 <div class="apple-class-name" apple-attribute-name ></div>

Fac un exemplu cu un atribut sub forma data-apple-business-id . Vă amintiți ID-ul luat la pasul 1? Acum, este momentul să-l folosești. ID-ul meu este ca0db090 și vreau să adaug butonul de chat într container-style banner în container-style , așa că eticheta mea <div> este:

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

Rețineți că este necesar atributul data-apple-business-id . Este folosit pentru a specifica proprietarul ID-ului Business Chat și pentru a le trimite mesajele dvs.

În plus, există multe alte clase și atribute pe care le puteți utiliza pentru codul HTML. Puteți găsi cele mai populare clase și atribute în lista de mai jos:

Cursuri pentru afișarea butoanelor de chat sau de apel:

  • apple-business-chat-banner-container : afișați atât butoanele de chat, cât și de apel
  • apple-business-chat-message-container : afișați numai butonul de chat
  • apple-business-chat-phone-container : afișați numai butonul de apel
  • etc

Atribute pentru a personaliza afișarea butoanelor de chat/apel (culori, fonturi, dimensiune, …)

  • data-apple-banner-font-family : alegeți un font de familie pentru butonul Îndemn la acțiune
  • data-apple-banner-icon-background-color : alegeți culoarea de fundal (cercul) pictogramei
  • data-apple-banner-icon-color : alegeți culorile butoanelor de chat și de apel
  • etc.

Atribute legate de interacțiunea dintre clienți și proprietarii site-ului web:

  • data-apple-business-group-id : determină departamentul care primește apelurile/mesajele. De exemplu, puteți atribui ID-ul departamentelor „Serviciul clienți” sau „Suport tehnic” acestui atribut.
  • Data-apple-business-phone : introduceți numărul de telefon pe care utilizatorii îl folosesc pentru a vă contacta dacă nu pot conversa prin chat. În cazul în care nu adăugați acest atribut, butonul Apelare va fi ascuns.
  • etc.

În plus, puteți găsi aici toate atributele și clasele Apple.

După ce aveți etichetele <div> necesare, adăugați-le în poziția dorită folosind editorul HTML. De exemplu, vreau să afișez butonul Business Chat într-un widget la subsolul temei Justread și aici este modalitatea de a face asta.

În Tabloul de bord de administrare , accesați Aspect > Widget , alegeți widgetul HTML personalizat , apoi alegeți să afișați widgetul în subsol.

afișați widgetul în subsolul site-ului WordPress

Apoi, introduceți următorul cod în widget:

 <div>
	class="apple-business-chat-banner-container"
	date-apple-business-
	data-apple-business-phone="0987725475"
	data-apple-banner-cta="Aveți întrebări? Vă putem ajuta."
	data-apple-banner-context="Conversați cu unul dintre profesioniștii noștri pentru a obține oferta dvs. pentru 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>

Utilizați codul pentru a introduce butonul de chat de afaceri

În cele din urmă, faceți clic pe Salvare .

Am terminat de afișat butonul Business Chat în subsolul site-ului WordPress. De acum înainte, utilizatorii Apple vor vedea butonul Business Chat afișat în subsol astfel:

Afișează butonul Business Chat în subsolul site-ului WordPress.

Puteți stila butonul și îl puteți afișa în alte poziții în același mod cu codul, clasele și atributele de mai sus. Încearcă-l și arată-ne în secțiunea de comentarii!

Ultimele Cuvinte

Utilizarea codului pentru a adăuga butonul Business Chat pe site-ul WordPress poate fi destul de dificilă pentru începătorii WordPress. Dar dacă urmați cu strictețe acest tutorial, cu siguranță va funcționa. După ce aveți butonul Business Chat pe site-ul dvs., nu uitați să răspundeți la apelurile și mesajele clienților. Va ajuta la construirea încrederii între clienți și proprietarul site-ului web, îmbunătățind astfel marca dvs. și sporind conversia.

Pe lângă adăugarea butonului de chat pentru afaceri, puteți adăuga și butonul de chat live și butonul de chat pentru clienți Facebook pe site-ul dvs. WordPress. Aceste funcții vă ajută să răspundeți mai prompt la întrebările clienților.