วิธีเพิ่มปุ่มแชทของ Apple Business ลงในเว็บไซต์ WordPress ของคุณ

เผยแพร่แล้ว: 2021-03-01

Apple Message เป็นคุณสมบัติที่ช่วยให้เว็บมาสเตอร์สามารถเพิ่มปุ่มแชทธุรกิจและปุ่มโทรศัพท์ / โทรไปยังเว็บไซต์ของตน มีประโยชน์และสะดวกมากเพราะผู้ใช้สามารถติดต่อเจ้าของเว็บไซต์ได้โดยตรงเพื่อขอความช่วยเหลือ ดังนั้น ในฐานะเจ้าของเว็บไซต์ คุณควร เพิ่มปุ่มแชทธุรกิจลงในเว็บไซต์ WordPress ของคุณ เพื่อเพิ่มประสบการณ์ผู้ใช้

สารบัญ ซ่อน

1. ขั้นตอนที่ 1: ลงชื่อสมัครใช้ Business Chat
2. ขั้นตอนที่ 2: เพิ่ม Javascript Library
1. 2.1. วิธีที่ 1: แก้ไขโค้ดในไฟล์ธีม
2. 2.2. วิธีที่ 2: การใช้ปลั๊กอิน Slim SEO
3. ขั้นตอนที่ 3: แสดงปุ่มสนทนาทางธุรกิจในตำแหน่งที่ต้องการ
4. คำพูดสุดท้าย

ระหว่างการใช้งาน คุณต้องใช้โค้ด HTML บางส่วน ดังนั้นจึงค่อนข้างยากสำหรับผู้ที่ไม่ใช่เทคโนโลยี แต่อย่ากังวลเพราะเราจะแนะนำคุณตลอดกระบวนการนี้ทีละขั้นตอน

หมายเหตุ : ปุ่มแชทธุรกิจมีให้ใช้งานบนอุปกรณ์ Apple เท่านั้น หากผู้ใช้ไม่ได้ใช้อุปกรณ์เหล่านี้ ปุ่มจะถูกซ่อนไว้

ขั้นตอนที่ 1: ลงชื่อสมัครใช้ Business Chat

ขั้นแรก ไปที่หน้าลงทะเบียนของ Apple Business และสมัครใช้งาน Business Chat ด้วย Apple ID ของคุณ มันค่อนข้างง่ายฉันจะไม่ลงรายละเอียด

ตอนนี้ คุณมี Business Chat ID ของคุณเองแล้ว บันทึก ID นี้ไว้ที่ใดที่หนึ่งเพราะคุณจะต้องใช้ในขั้นตอนถัดไป

ขั้นตอนที่ 2: เพิ่ม Javascript Library

ถัดไป คุณต้องเพิ่ม Javascript Library เพื่อแสดงปุ่ม Business Chat ไปที่เว็บไซต์ มีสองวิธีในการทำ:

วิธีที่ 1: แก้ไขโค้ดในไฟล์ธีม

ค้นหาแท็ก <head></head> หรือ </body> ในไฟล์ธีมของคุณ สถานที่ตั้งจะแตกต่างกันไปตามธีม ตัวอย่างเช่น ฉันใช้ธีม Justread ดังนั้นแท็ก <head><head> จะอยู่ใน header.php และแท็ก </body> จะอยู่ในไฟล์ footer.php

หลังจากที่คุณพบแท็กด้านบนเหล่านี้แล้ว ให้เพิ่มโค้ดนี้ก่อนแท็ก </body> หรือลงในแท็ก <head><head> :

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

วิธีที่ 2: การใช้ปลั๊กอิน Slim SEO

นอกเหนือจากการแก้ไขโค้ดในไฟล์ธีม คุณสามารถใช้ปลั๊กอิน Slim SEO เพื่อเพิ่มโค้ดโดยไม่ต้องไปที่ไฟล์ธีมและมองหาแท็ก <head><head> และ </body>

Slim SEO เป็นบริการฟรี ดังนั้นคุณจึงสามารถค้นหาบน wordpress.org ได้อย่างง่ายดาย บน Admin Dashboard ให้ไปที่ Plugins > Add New จากนั้นติดตั้งและเปิดใช้งานปลั๊กอินตามปกติ

Slim SEO – ปลั๊กอิน WordPress SEO ที่รวดเร็วและอัตโนมัติ

ผู้แต่ง: eLightUp

เวอร์ชันปัจจุบัน: 3.11.1

ปรับปรุงล่าสุด: 16 พฤศจิกายน 2564

slim-seo.3.11.1.zip

92% การ ให้คะแนน 10,000+ การ ติดตั้ง WP 4.5+ Requires

หลังจากนั้น ไปที่การ ตั้งค่า > Slim SEO และเพิ่มโค้ดด้านบนนี้ใน ส่วน Header Code หรือ Body Code

และอย่าลืมคลิก บันทึก

นอกจากนี้ Slim SEO ยังมีฟีเจอร์ที่มีประโยชน์อีกมากมายที่จะช่วยให้คุณปรับแต่งเว็บไซต์ WordPress สำหรับ SEO ได้โดยอัตโนมัติ คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติเหล่านี้ได้ที่นี่

ขั้นตอนที่ 3: แสดงปุ่มแชทธุรกิจในตำแหน่งที่ต้องการ

ในขั้นตอนสุดท้ายนี้ คุณต้องแสดงปุ่ม Business Chat ในพื้นที่วิดเจ็ตที่คุณต้องการ สามารถทำได้โดยการเพิ่มโค้ด HTML ลงในวิดเจ็ต รหัส HTML ต้องมีโครงสร้างดังต่อไปนี้:

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

ฉันสร้างตัวอย่างด้วยแอตทริบิวต์ในรูปแบบของ data-apple-business-id คุณจำ ID ที่ใช้ในขั้นตอนที่ 1 ได้หรือไม่? ตอนนี้เป็นเวลาที่จะใช้มัน ID ของฉันคือ ca0db090 และฉันต้องการเพิ่มปุ่มแชทในแบนเนอร์ container-style ดังนั้นแท็ก <div> ของฉันคือ:

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

โปรดทราบว่าต้องมีแอตทริบิวต์ data-apple-business-id ใช้เพื่อระบุเจ้าของ Business Chat ID และส่งข้อความของคุณถึงพวกเขา

นอกจากนี้ยังมีคลาสและแอตทริบิวต์อื่นๆ อีกมากมายที่คุณสามารถใช้สำหรับโค้ด HTML คุณสามารถค้นหาคลาสและคุณสมบัติที่ได้รับความนิยมสูงสุดในรายการด้านล่าง:

ชั้นเรียนที่จะแสดงปุ่มแชทหรือโทร:

apple-business-chat-banner-container : แสดงทั้งปุ่มแชทและโทร
apple-business-chat-message-container : แสดงปุ่มแชทเท่านั้น
apple-business-chat-phone-container : แสดงปุ่มโทรเท่านั้น
ฯลฯ

คุณสมบัติเพื่อปรับแต่งการแสดงปุ่มสนทนา / โทร (สี แบบอักษร ขนาด …)

data-apple-banner-font-family : เลือกแบบอักษรครอบครัวสำหรับปุ่มคำ กระตุ้นการตัดสินใจ
data-apple-banner-icon-background-color : เลือกสีพื้นหลัง (วงกลม) ของไอคอน
data-apple-banner-icon-color : เลือกสีของปุ่มแชทและโทร
เป็นต้น

คุณลักษณะที่เกี่ยวข้องกับการโต้ตอบระหว่างลูกค้าและเจ้าของเว็บไซต์:

data-apple-business-group-id : กำหนดแผนกที่รับสาย / ข้อความ ตัวอย่างเช่น คุณสามารถกำหนด ID ของแผนก "บริการลูกค้า" หรือ "ฝ่ายสนับสนุนด้านเทคนิค" ให้กับแอตทริบิวต์นี้ได้
Data-apple-business-phone : ป้อนหมายเลขโทรศัพท์ที่ผู้ใช้ใช้เพื่อติดต่อคุณหากพวกเขาไม่สามารถแชทได้ ในกรณีที่คุณไม่เพิ่มแอตทริบิวต์นี้ ปุ่ม โทร จะถูกซ่อนไว้
เป็นต้น

นอกจากนี้ คุณสามารถค้นหาคุณลักษณะและคลาสทั้งหมดของ Apple ได้ที่นี่

หลังจากมีแท็ก <div> จำเป็นแล้ว ให้เพิ่มแท็กไปยังตำแหน่งที่ต้องการโดยใช้โปรแกรมแก้ไข HTML ตัวอย่างเช่น ฉันต้องการแสดงปุ่ม Business Chat ในวิดเจ็ตที่ส่วนท้ายของธีม Justread และนี่คือวิธีการดำเนินการดังกล่าว

บน แดชบอร์ดการดูแลระบบ ให้ไปที่ ลักษณะที่ปรากฏ > วิดเจ็ ต เลือกวิดเจ็ต HTML ที่กำหนดเอง แล้วเลือกแสดงวิดเจ็ตที่ส่วนท้าย

ถัดไป ใส่รหัสต่อไปนี้ในวิดเจ็ต:

 <div>
	class="apple-business-chat-banner-container"
	ข้อมูล-apple-business-
	data-apple-business-phone="0987725475"
	data-apple-banner-cta="มีคำถามไหม เราช่วยได้"
	data-apple-banner-context="แชทกับหนึ่งในผู้เชี่ยวชาญของเราเพื่อรับข้อเสนอสำหรับ 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>

สุดท้าย คลิก บันทึก

เราแสดงปุ่ม Business Chat ที่ส่วนท้ายของเว็บไซต์ WordPress เสร็จแล้ว จากนี้ไป ผู้ใช้ Apple จะเห็นปุ่ม Business Chat ปรากฏขึ้นที่ส่วนท้ายดังนี้:

คุณสามารถจัดรูปแบบปุ่มและแสดงในตำแหน่งอื่นในลักษณะเดียวกันกับโค้ด คลาส และแอตทริบิวต์ด้านบน ลองและแสดงให้เราเห็นในส่วนความคิดเห็น!

คำสุดท้าย

การใช้โค้ดเพื่อเพิ่มปุ่ม Business Chat ลงในเว็บไซต์ WordPress อาจเป็นเรื่องยากสำหรับผู้เริ่มต้นใช้งาน WordPress แต่ถ้าคุณทำตามบทช่วยสอนนี้อย่างเคร่งครัด มันจะได้ผลแน่นอน หลังจากที่คุณมีปุ่ม Business Chat บนไซต์ของคุณแล้ว อย่าลืมตอบกลับการโทรและข้อความของลูกค้า จะช่วยสร้างความไว้วางใจระหว่างลูกค้าและเจ้าของเว็บไซต์ ซึ่งจะช่วยปรับปรุงแบรนด์ของคุณและเพิ่มการแปลง

นอกจากการเพิ่มปุ่มแชทเพื่อธุรกิจแล้ว คุณยังสามารถเพิ่มปุ่มแชทสดและปุ่มแชทกับลูกค้าบน Facebook ลงในเว็บไซต์ WordPress ของคุณได้อีกด้วย คุณสมบัติเหล่านี้ช่วยให้คุณตอบคำถามของลูกค้าได้รวดเร็วยิ่งขึ้น