วิธีใช้ Deep Link เพื่อเปิดหน้าต่างแชต (โดยไม่ต้องแก้ไขโค้ดธีม)

คุณสามารถเปิดหน้าต่างแชตได้โดยใช้ deep link โดยไม่ต้องแก้ไขโค้ดของธีม ใน Shopify Theme Editor เพียงเพิ่มแฮชแท็ก #shoply-ai-chatbot ให้กับปุ่ม ไอคอน หรือองค์ประกอบข้อความใด ๆ เมื่อลูกค้าคลิกองค์ประกอบเหล่านี้ หน้าต่างแชตจะเปิดขึ้นโดยอัตโนมัติ

ตัวอย่างใช้งานจริง: demo.shoplyai.ai 

ขั้นตอน:

1. แก้ไขปุ่ม ข้อความ หรือไอคอนที่ต้องการในเครื่องมือแก้ไขธีม
2. ตั้งค่าลิงก์หรือ URL เป็น #shoply-ai-chatbot

ตัวอย่าง:

ใช้ปุ่มเพื่อเปิดหน้าต่างแชต:

ใช้ข้อความที่มีลิงก์เพื่อเปิดหน้าต่างแชต:

เปิดแชตพร้อมคำถามที่กรอกไว้ล่วงหน้า

ต้องการเปิดหน้าต่างแชต และ ส่งคำถามโดยอัตโนมัติใช่ไหม? คุณทำได้โดยใช้ แฮชแฟรกเมนต์ (แนะนำ) หรือ พารามิเตอร์คิวรีของ URL

วิธีนี้เหมาะอย่างยิ่งสำหรับสร้างลิงก์โดยตรงไปยังหัวข้อที่พบบ่อย เช่น นโยบายการจัดส่ง นโยบายการคืนสินค้า หรือคำถามเกี่ยวกับสินค้า

แนะนำ: แฮชแฟรกเมนต์ (ไม่โหลดหน้าใหม่)

ใช้แฮชแฟรกเมนต์ #shoply_question= เนื่องจากแฮชจะถูกประมวลผลทั้งหมดในเบราว์เซอร์ การคลิกลิงก์นี้ จะไม่โหลดหน้าใหม่ และประวัติแชตที่มีอยู่จะยังคงอยู่

รูปแบบ:

https://your-store.com#shoply_question=your question here

ตัวอย่าง:

• นโยบายการจัดส่ง: https://your-store.com#shoply_question=What is your shipping policy?
• การคืนสินค้า: https://your-store.com#shoply_question=How do I return an item?
• สถานะคำสั่งซื้อ: https://your-store.com#shoply_question=Where is my order?
• ค้นหาสินค้า: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

คุณสามารถใช้วิธีนี้ร่วมกับหน้าใดก็ได้ในร้านค้า ตัวอย่างเช่น หากต้องการเปิดแชตบอตพร้อมคำถามบนหน้าสินค้าใดสินค้าหนึ่ง:

https://your-store.com/products/blue-jacket#shoply_question=What sizes are available?

แบบเดิม: พารามิเตอร์คิวรีของ URL

พารามิเตอร์คิวรี ?shoply_question= ยังคงรองรับเพื่อความเข้ากันได้แบบย้อนหลัง โปรดทราบว่าการเพิ่มพารามิเตอร์คิวรีลงใน URL ที่ลูกค้ากำลังเปิดอยู่จะทำให้ โหลดหน้าใหม่

รูปแบบ:

https://your-store.com?shoply_question=your question here

หมายเหตุ: อย่าลืมเข้ารหัส URL ให้กับคำถามเมื่อใช้อักขระพิเศษหรือเว้นวรรค เบราว์เซอร์ส่วนใหญ่จะจัดการเรื่องนี้โดยอัตโนมัติ แต่หากคุณกำลังเพิ่มลิงก์ด้วยโปรแกรม ให้ใช้การเข้ารหัส URL ที่ถูกต้อง (เช่น เว้นวรรคจะกลายเป็น %20)

เมื่อลูกค้าคลิกลิงก์ประเภทใดประเภทหนึ่ง หน้าต่างแชตจะเปิดขึ้นโดยอัตโนมัติ และคำถามจะถูกส่งไปยังแชตบอต AI เพื่อให้ได้คำตอบทันที

กรณีการใช้งาน:

• เพิ่มลิงก์ “สอบถามเกี่ยวกับการจัดส่ง” ในส่วนท้ายของเว็บไซต์
• สร้างคิวอาร์โค้ดที่เปิดแชตบอตพร้อมคำถามเฉพาะ
• ใส่ลิงก์ที่เป็นประโยชน์ในแคมเปญอีเมลหรือการยืนยันคำสั่งซื้อ
• เพิ่มลิงก์ช่วยเหลือตามบริบทในหน้าสินค้า (เช่น “สอบถามเกี่ยวกับขนาด”)

วิธีใช้ Deep Link เพื่อเปิดหน้าต่างแชต (ต้องแก้ไขโค้ดในเทมเพลตธีม)

ในส่วนก่อนหน้านี้ เราได้อธิบายวิธีใช้แฮชแท็ก (deep link) เพื่อเรียกหน้าต่างแชต โดยเพิ่มแฮชแท็กให้กับปุ่ม ไอคอน หรือข้อความใด ๆ ได้โดยตรงจาก Theme Editor โดยไม่ต้องแก้ไขโค้ดธีม

อย่างไรก็ตาม หากคุณต้องการความยืดหยุ่นอย่างเต็มที่ในการเพิ่ม deep link ได้ทุกที่ในร้านค้า (เช่น สร้างไอคอนใหม่ในส่วนหัว) คุณจะต้องแก้ไขโค้ดเทมเพลต

ด้านล่างนี้คือตัวอย่างโค้ด HTML อย่างง่ายที่คุณสามารถใช้สร้างไอคอนใหม่ในเทมเพลตธีมได้:

ตัวอย่างโค้ด

1. ไอคอนแชต

โค้ดด้านล่างจะเพิ่มไอคอนแชต:

<a href="#shoply-ai-chatbot"
   style="display:inline-flex;align-items:center;margin-right:13px">
    <svg viewBox="64 64 896 896" style="height:28px;width:28px;fill:orange">
        <path
            d="M868.2 377.4c-18.9-45.1-46.3-85.6-81.2-120.6a377.26 377.26 0 00-120.5-81.2A375.65 375.65 0 00519 145.8c-41.9 0-82.9 6.7-121.9 20C306 123.3 200.8 120 170.6 120c-2.2 0-7.4 0-9.4.2-11.9.4-22.8 6.5-29.2 16.4-6.5 9.9-7.7 22.4-3.4 33.5l64.3 161.6a378.59 378.59 0 00-52.8 193.2c0 51.4 10 101 29.8 147.6 18.9 45 46.2 85.6 81.2 120.5 34.7 34.8 75.4 62.1 120.5 81.2C418.3 894 467.9 904 519 904c51.3 0 100.9-10.1 147.7-29.8 44.9-18.9 85.5-46.3 120.4-81.2 34.7-34.8 62.1-75.4 81.2-120.6a376.5 376.5 0 0029.8-147.6c-.2-51.2-10.1-100.8-29.9-147.4zm-66.4 266.5a307.08 307.08 0 01-65.9 98c-28.4 28.5-61.3 50.7-97.7 65.9h-.1c-38 16-78.3 24.2-119.9 24.2a306.51 306.51 0 01-217.5-90.2c-28.4-28.5-50.6-61.4-65.8-97.8v-.1c-16-37.8-24.1-78.2-24.1-119.9 0-55.4 14.8-109.7 42.8-157l13.2-22.1-9.5-23.9L206 192c14.9.6 35.9 2.1 59.7 5.6 43.8 6.5 82.5 17.5 114.9 32.6l19 8.9 19.9-6.8c31.5-10.8 64.8-16.2 98.9-16.2a306.51 306.51 0 01217.5 90.2c28.4 28.5 50.6 61.4 65.8 97.8l.1.1.1.1c16 37.6 24.1 78 24.2 119.8-.1 41.7-8.3 82-24.3 119.8zM681.1 364.2c-20.4 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.6 37.1 37.1 37.1s37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1zm-175.2 0c-20.5 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.7 37.1 37.1 37.1 20.5 0 37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1z" />
    </svg>
</a>

2. ไอคอนดาว AI

โค้ดด้านล่างจะเพิ่มดาว AI:

<a href="#shoply-ai-chatbot" style="display:inline-flex;align-items:center">
    <img style="height:28px;width:28px" src="https://[CFN_PRODUCTION_ASSET]/AIStar.svg" alt="Shoply Chatbot"  />
</a>

3. วิธีเรียกใช้ฟังก์ชัน

นอกจากการใช้แฮชแท็กแล้ว คุณยังสามารถใส่การเรียกใช้ฟังก์ชัน openShoplyAIChatBot() ในแอตทริบิวต์ onclick ของปุ่ม/ไอคอนใด ๆ เพื่อให้หน้าต่างแชตแสดงขึ้นเมื่อลูกค้าคลิกปุ่ม/ไอคอน

<button onclick="openShoplyAIChatBot()" style="border-radius:20px;margin:10px;cursor:pointer;background:black">
    <span style="font-size:13px;color:white;margin:5px">Click to Chat</span>
</button>

ต้องการความช่วยเหลือใช่ไหม?

คุณสามารถใช้ตัวอย่างใดก็ได้ด้านบน แล้วแทรกโค้ดไว้ถัดจากไอคอนค้นหาในไฟล์ sections/header.liquid เพื่อเพิ่ม deep link สำหรับแชตในส่วนหัวของร้านค้า

อย่างไรก็ตาม หากคุณไม่ค่อยถนัดแก้ไขโค้ดในเทมเพลตธีม ก็ไม่ต้องกังวล!

เชิญ จองการประชุมกับเรา  ได้เลย และเรายินดีช่วยคุณตั้งค่าไอคอนที่เหมาะสมในตำแหน่งที่ลงตัวกับสไตล์เฉพาะของร้านคุณ

จะซ่อนไอคอนลอยได้อย่างไร?

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

ในส่วน “Customize AI Chat” ของคอนโซลผู้ดูแลระบบของแอป ภายใต้การตั้งค่า Select a Chat Icon ตอนนี้คุณสามารถเลือกตัวเลือกต่อไปนี้ได้:

“Hide floating icon and use deep link to open chat”

ตัวเลือกนี้ช่วยให้คุณซ่อนไอคอนลอยได้ ขณะเดียวกันก็ยังเปิดหน้าต่างแชตผ่าน deep link ได้