Cách sử dụng liên kết sâu để mở cửa sổ trò chuyện (không cần chỉnh sửa mã giao diện)

Bạn có thể mở cửa sổ trò chuyện bằng liên kết sâu mà không cần sửa đổi mã giao diện. Trong Trình chỉnh sửa giao diện Shopify, 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ổ trò chuyện 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ổ trò chuyện:

Dùng văn bản có liên kết để mở cửa sổ trò chuyện:

Mở trò chuyện với câu hỏi điền sẵn

Bạn muốn mở cửa sổ trò chuyện và tự động gửi một câu hỏi? Bạn có thể thực hiện việc này bằng đoạn mã hash (được khuyến nghị) hoặc tham số truy vấn URL.

Tính năng này rất phù hợp để tạo các liên kết trực tiếp đến những 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ị: Đoạn mã hash (không tải lại trang)

Sử dụng đoạn mã hash #shoply_question=. Vì 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, đồng thời lịch sử trò chuyện hiện có đượ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. Ví dụ, để mở chatbot kèm một câu hỏi trên trang sản phẩm cụ thể:

plaintext


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

Cách cũ: Tham số truy vấn URL

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

Đị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 khi sử dụng các ký tự đặc biệt hoặc khoảng trắng. Hầu hết trình duyệt sẽ tự động xử lý việc này, nhưng nếu bạn đang thêm liên kết bằng mã chương trình, hãy sử dụng cách mã hóa URL phù hợp (ví dụ: khoảng trắng 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ổ trò chuyện sẽ tự động mở và câu hỏi sẽ được gửi đến chatbot AI, mang lại câu trả lời ngay lập tức.

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

Thêm liên kết “Hỏi về vận chuyển” vào chân trang
Tạo mã QR để mở chatbot với các câu hỏi cụ thể
Thêm 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 liên kết trợ giúp theo ngữ cảnh trên trang sản phẩm (ví dụ: “Hỏi về kích cỡ”)

Cách sử dụng liên kết sâu để mở cửa sổ trò chuyện (cần chỉnh sửa mã trong mẫu giao diện)

Ở phần trước, chúng ta đã trao đổi về cách sử dụng hashtag (liên kết sâu) để kích hoạt cửa sổ trò chuyện bằng cách thêm hashtag vào bất kỳ nút, biểu tượng hoặc phần tử văn bản nào trực tiếp từ Trình chỉnh sửa giao diện mà không cần chỉnh sửa mã giao diện.

Tuy nhiên, nếu bạn muốn linh hoạt hoàn toàn trong việc thêm liên kết sâu ở bất kỳ đâu trong cửa hàng (ví dụ: tạo một biểu tượng mới trong phần đầu trang), bạn sẽ cần chỉnh sửa mã mẫu.

Dưới đây là các ví dụ mã HTML đơn giản mà bạn có thể sử dụng để tạo biểu tượng mới trong mẫu giao diện:

Ví dụ mã

1. Biểu tượng trò chuyện

Mã dưới đây thêm một biểu tượng trò chuyện:

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

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 sử 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 để cửa sổ trò chuyện xuất hiện khi khách hàng 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ể sử dụng bất kỳ ví dụ nào ở trên và chèn mã ngay cạnh biểu tượng tìm kiếm trong tệp sections/header.liquid để thêm liên kết sâu trò chuyện vào phần đầu trang của cửa hàng.

Tuy nhiên, nếu bạn không hoàn toàn thoải mái khi chỉnh sửa mã trong mẫu giao diện, đừng lo!

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

Làm thế nào để ẩn biểu tượng nổi?

Sau khi cấu hình liên kết sâu để mở cửa sổ trò chuyện, 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 cho biết rằng việc có quá nhiều biểu tượng nổi trên trang web có thể gây rối mắt. Chúng tôi hiểu mối quan tâm của bạn! Vì vậy, chúng tôi đã ra mắt tính năng ẩn biểu tượng trò chuyện.

Trong phần “Tùy chỉnh trò chuyện AI” của bảng điều khiển quản trị ứng dụng, bên dưới tùy chọn Chọn biểu tượng trò chuyện, giờ đây bạn có thể chọn tùy chọn:

“Ẩn biểu tượng nổi và sử dụng liên kết sâu để mở trò chuyện”.

Tùy chọn này cho phép bạn ẩn biểu tượng nổi mà vẫn mở được cửa sổ trò chuyện thông qua liên kết sâu.