วิธีเปิดหน้าต่างแชตด้วยลิงก์

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

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

ขั้นตอน:

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

ตัวอย่าง:

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

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

เปิดแชตพร้อมคำถามเฉพาะสินค้า

เพิ่มปุ่ม “Question About This Product?” ลงในหน้าสินค้าเพื่อช่วยให้ผู้ซื้อถามเกี่ยวกับสินค้านั้นได้ ตั้งค่าลิงก์เป็น #shoply_product_questions เมื่อคลิก ระบบจะเปิดแชตพร้อมชื่อสินค้า จุดเด่นสั้น ๆ ของสินค้า และคำถามที่สร้างอัตโนมัติซึ่งเกี่ยวข้องกับสินค้านั้น

1. ใน Shopify Theme Editor ให้เปิด product template ของคุณ และเพิ่มหรือแก้ไขปุ่มหรือข้อความลิงก์ที่รองรับ URL
2. ตั้งค่าป้ายข้อความเป็น “Question About This Product?” และตั้งค่าลิงก์เป็น #shoply_product_questions
3. บันทึก ไปที่หน้าสินค้า แล้วคลิกลิงก์เพื่อตรวจสอบคำถามเกี่ยวกับสินค้า

หากธีมของคุณไม่มีการตั้งค่าปุ่มหรือลิงก์ที่เหมาะสม ให้เพิ่มลิงก์นี้ใน HTML ของ product template:

<a href="#shoply_product_questions">Question About This Product?</a>

ใช้ลิงก์นี้บนหน้าสินค้าเพื่อให้ Shoply มีบริบทของสินค้า คุณยังสามารถแชร์ URL ของหน้าสินค้าแบบเต็มที่ลงท้ายด้วย #shoply_product_questions ได้เช่นกัน

ลองใช้แชตคำถามเกี่ยวกับสินค้าสำหรับ Bent 85 Skis  คำแนะนำจะมีคำถามเกี่ยวกับน้ำหนักสกี แกนสกี โปรไฟล์ rocker และลวดลาย topsheet ผู้ซื้อสามารถเลือกคำถามแนะนำหรือพิมพ์คำถามของตนเองได้

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

คำถามเกี่ยวกับสินค้าเหล่านี้ถูกสร้างขึ้นโดยอัตโนมัติ ส่วน คำถามเริ่มต้นที่คุณกำหนดไว้ใน Customize AI Chat จะนำไปใช้กับการเปิดแชตแบบมาตรฐานแทน

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

ต้องการเปิดหน้าต่างแชต และ ส่งคำถามโดยอัตโนมัติด้วยใช่ไหม? คุณสามารถทำได้โดยใช้ทั้ง hash fragment (แนะนำ) หรือ URL query parameter

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

แนะนำ: Hash Fragment (ไม่รีโหลดหน้า)

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

รูปแบบ:

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?

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

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

แบบเดิม: URL Query Parameter

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

รูปแบบ:

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

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

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

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

• เพิ่มลิงก์ “Ask about shipping” ใน footer ของคุณ
• สร้าง QR code ที่เปิด chatbot พร้อมคำถามเฉพาะ
• ใส่ลิงก์ที่เป็นประโยชน์ในแคมเปญอีเมลหรือการยืนยันคำสั่งซื้อ
• เพิ่มลิงก์ช่วยเหลือตามบริบทบนหน้าสินค้า (เช่น “Ask about sizing”)

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

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

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

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

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

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 ของแชตลงใน header ของร้านค้าคุณ

อย่างไรก็ตาม หากคุณยังไม่ค่อยมั่นใจในการแก้ไขโค้ดใน Theme template ของคุณ ก็ไม่ต้องกังวล!

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

วิธีซ่อนไอคอนลอย?

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

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

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

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