Cách mở cửa sổ chat bằng liên kết

Bạn có thể mở cửa sổ chat bằng cách sử dụng deep link mà không cần chỉnh sửa mã giao diện của mình. Trong Shopify Theme Editor, chỉ cần thêm hashtag #shoply-ai-chatbot vào bất kỳ nút, biểu tượng hoặc phần tử văn bản nào. Khi khách hàng nhấp vào các phần tử này, cửa sổ chat sẽ tự động mở.

Ví dụ trực tiếp: demo.shoplyai.ai

Các bước:

Chỉnh sửa nút, văn bản hoặc biểu tượng mong muốn trong trình chỉnh sửa giao diện.
Đặt liên kết hoặc URL thành #shoply-ai-chatbot.

Ví dụ:

Dùng một nút để mở cửa sổ chat:

Dùng văn bản có gắn liên kết để mở cửa sổ chat:

Mở chat với các câu hỏi cụ thể theo sản phẩm

Thêm nút “Question About This Product?” vào trang sản phẩm để giúp người mua đặt câu hỏi về mặt hàng đó. Đặt liên kết của nút thành #shoply_product_questions. Khi nhấp vào, cửa sổ chat sẽ mở với tên sản phẩm, phần mô tả nổi bật ngắn của sản phẩm và các câu hỏi được tự động tạo phù hợp với sản phẩm đó.

Trong Shopify Theme Editor, mở template sản phẩm của bạn và thêm hoặc chỉnh sửa một nút hoặc văn bản có liên kết hỗ trợ URL.
Đặt nhãn là “Question About This Product?” và liên kết là #shoply_product_questions.
Lưu lại, truy cập một trang sản phẩm và nhấp vào liên kết để kiểm tra các câu hỏi về sản phẩm.

Nếu giao diện của bạn không có sẵn tùy chọn nút hoặc liên kết phù hợp, hãy thêm liên kết này vào HTML của template sản phẩm:

html


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

Hãy dùng liên kết này trên trang sản phẩm để Shoply có ngữ cảnh về sản phẩm. Bạn cũng có thể chia sẻ URL đầy đủ của sản phẩm với phần kết thúc là #shoply_product_questions.

Hãy thử chat hỏi đáp sản phẩm cho Bent 85 Skis . Các gợi ý bao gồm câu hỏi về trọng lượng ván trượt, lõi, rocker profile và topsheet art. Người mua có thể chọn một gợi ý hoặc tự nhập câu hỏi của riêng họ.

Để xem ví dụ về nơi sử dụng các liên kết này, hãy xem các câu hỏi sản phẩm được hỗ trợ bởi AI trong hướng dẫn thay thế FAQ của chúng tôi.

Các câu hỏi sản phẩm này được tạo tự động. Các câu hỏi khởi đầu bạn cấu hình trong Customize AI Chat sẽ áp dụng cho cách mở chat tiêu chuẩn thay thế.

Mở chat với câu hỏi được điền sẵn

Bạn muốn mở cửa sổ chat đồng thời tự động gửi một câu hỏi? Bạn có thể làm điều này bằng hash fragment (khuyến nghị) hoặc tham số truy vấn URL.

Điều này rất phù hợp để tạo liên kết trực tiếp đến các chủ đề phổ biến như chính sách vận chuyển, chính sách đổi trả hoặc câu hỏi về sản phẩm.

Khuyến nghị: Hash Fragment (không tải lại trang)

Sử dụng hash fragment #shoply_question=. Vì phần hash được xử lý hoàn toàn trong trình duyệt, việc nhấp vào liên kết này sẽ không tải lại trang, và mọi lịch sử chat hiện có vẫn được giữ nguyên.

Định dạng:

plaintext


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

Ví dụ:

Chính sách vận chuyển: https://your-store.com#shoply_question=What is your shipping policy?
Đổi trả: https://your-store.com#shoply_question=How do I return an item?
Trạng thái đơn hàng: https://your-store.com#shoply_question=Where is my order?
Khám phá sản phẩm: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Bạn có thể kết hợp cách này với bất kỳ trang nào trong cửa hàng của mình. Ví dụ: để mở chatbot với một câu hỏi trên một trang sản phẩm cụ thể:

plaintext


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

Phiên bản cũ: Tham số truy vấn URL

Tham số truy vấn ?shoply_question= vẫn được hỗ trợ để tương thích ngược. Lưu ý rằng việc thêm tham số truy vấn vào một URL mà khách hàng đang truy cập sẽ làm tải lại trang.

Định dạng:

plaintext


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

Lưu ý: Hãy nhớ mã hóa URL cho câu hỏi của bạn khi sử dụng ký tự đặc biệt hoặc dấu cách. Hầu hết trình duyệt sẽ tự xử lý việc này, nhưng nếu bạn đang thêm liên kết theo cách lập trình, hãy dùng mã hóa URL phù hợp (ví dụ: dấu cách trở thành %20).

Khi khách hàng nhấp vào một trong hai loại liên kết, cửa sổ chat sẽ tự động mở và câu hỏi sẽ được gửi tới AI chatbot để cung cấp câu trả lời ngay lập tức.

Trường hợp sử dụng:

Thêm liên kết “Ask about shipping” ở chân trang
Tạo mã QR mở chatbot với các câu hỏi cụ thể
Đưa các liên kết hữu ích vào chiến dịch email hoặc email xác nhận đơn hàng
Thêm các liên kết trợ giúp theo ngữ cảnh trên trang sản phẩm (ví dụ: “Ask about sizing”)

Cách dùng deep link để mở cửa sổ chat (cần chỉnh sửa mã trong Theme template)

Ở phần trước, chúng tôi đã đề cập cách dùng hashtag (deep link) để kích hoạt cửa sổ chat bằng cách thêm nó vào bất kỳ nút, biểu tượng hoặc văn bản nào trực tiếp từ Theme Editor mà không cần chỉnh sửa mã giao diện.

Tuy nhiên, nếu bạn muốn có toàn quyền linh hoạt để thêm deep link ở bất kỳ đâu trong cửa hàng của mình (ví dụ: tạo một biểu tượng mới trong header), bạn sẽ cần chỉnh sửa mã template.

Bên dưới là các ví dụ mã HTML đơn giản mà bạn có thể dùng để tạo biểu tượng mới trong Theme template của mình:

Ví dụ mã

1. Biểu tượng chat

Đoạn mã dưới đây thêm một biểu tượng chat:

plaintext


<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. Biểu tượng ngôi sao AI

Đoạn mã dưới đây thêm một ngôi sao AI:

plaintext


<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. Phương thức gọi hàm

Ngoài việc dùng hashtag, bạn cũng có thể đặt lệnh gọi hàm openShoplyAIChatBot() vào thuộc tính onclick của bất kỳ nút/biểu tượng nào, để khách hàng sẽ thấy cửa sổ chat khi họ nhấp vào nút/biểu tượng đó.

plaintext


<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>

Cần trợ giúp?

Bạn có thể dùng bất kỳ ví dụ nào ở trên và chèn mã bên cạnh biểu tượng tìm kiếm trong tệp sections/header.liquid để thêm deep link chat vào phần header của cửa hàng.

Tuy nhiên, nếu bạn chưa thực sự thoải mái với việc chỉnh sửa mã trong Theme template của mình, đừng lo!

Hãy đặt lịch hẹn với chúng tôi , và chúng tôi sẽ rất sẵn lòng giúp bạn thiết lập biểu tượng hoàn hảo ở vị trí lý tưởng để phù hợp với phong cách riêng của cửa hàng bạn.

Cách ẩn biểu tượng nổi?

Sau khi bạn cấu hình deep link để mở cửa sổ chat, bạn có thể muốn ẩn biểu tượng nổi. Ngoài ra, các chủ cửa hàng thường chia sẻ rằng có quá nhiều biểu tượng nổi trên website có thể gây rối mắt. Chúng tôi hiểu những băn khoăn của bạn! Vì vậy, chúng tôi đã giới thiệu một tính năng để ẩn biểu tượng chat.

Trong phần “Customize AI Chat” của bảng điều khiển quản trị ứng dụng, bên dưới cài đặt Select a Chat Icon, giờ đây bạn có thể chọn:

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

Điều này cho phép bạn ẩn biểu tượng nổi trong khi vẫn cho phép mở cửa sổ chat thông qua deep link.