如何使用链接打开聊天窗口

您可以使用深度链接打开聊天窗口，而无需修改主题代码。在 Shopify 主题编辑器中，只需将标签 #shoply-ai-chatbot 添加到任意按钮、图标或文本元素。当客户点击这些元素时，聊天窗口将自动打开。

在线示例：demo.shoplyai.ai

步骤：

在主题编辑器中编辑所需的按钮、文本或图标。
将链接或 URL 设置为 #shoply-ai-chatbot。

示例：

使用按钮打开聊天窗口：

使用带链接的文本打开聊天窗口：

打开包含特定商品问题的聊天

在商品页面添加“关于此商品有疑问？”按钮，帮助购物者询问该商品相关问题。将其链接设置为 #shoply_product_questions。点击后会打开聊天，并附带商品名称、简短的商品亮点，以及与该商品相关的自动生成问题。

在 Shopify 主题编辑器中，打开您的商品模板，并添加或编辑一个支持 URL 的按钮或带链接的文本。
将标签设置为“关于此商品有疑问？”，并将链接设置为 #shoply_product_questions。
保存，访问一个商品页面，然后点击该链接以检查商品问题。

如果您的主题没有提供合适的按钮或链接设置，请在商品模板的 HTML 中添加此链接：

html


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

请在商品页面上使用此链接，以便 Shoply 获取商品上下文。您也可以分享以 #shoply_product_questions 结尾的完整商品 URL。

试试 Bent 85 Skis 的商品问题聊天。建议问题包括有关滑雪板重量、板芯、rocker 轮廓和 topsheet 艺术的问题。购物者可以选择一个建议问题，或输入他们自己的问题。

有关这些链接可用位置的示例，请参阅我们的 FAQ 替代指南中的 AI 驱动商品问题。

这些商品问题会自动生成。您在自定义 AI 聊天中配置的起始问题则适用于标准聊天打开方式。

打开带有预填问题的聊天

想要打开聊天窗口，并且自动发送一个问题？您可以使用哈希片段（推荐）或 URL 查询参数 来实现。

这非常适合为常见主题创建直达链接，例如配送政策、退货政策或商品咨询。

推荐：哈希片段（不重新加载页面）

使用 #shoply_question= 哈希片段。由于哈希完全在浏览器中处理，点击此链接不会重新加载页面，并且会保留现有聊天记录。

格式：

plaintext


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?

您可以将其与商店中的任何页面结合使用。例如，要在特定商品页面上打开带问题的聊天机器人：

plaintext


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

旧版：URL 查询参数

?shoply_question= 查询参数仍然受支持，以保持向后兼容。请注意，如果将查询参数附加到客户当前所在的 URL，将会导致页面重新加载。

格式：

plaintext


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

注意： 使用特殊字符或空格时，请记得对您的问题进行 URL 编码。大多数浏览器会自动处理这一点，但如果您是通过程序添加链接，请使用正确的 URL 编码（例如，空格会变成 %20）。

当客户点击任一类型的链接时，聊天窗口都会自动打开，并且问题会发送给 AI 聊天机器人，从而即时提供答案。

使用场景：

在页脚中添加“询问配送问题”链接
创建可打开带特定问题聊天机器人的二维码
在电子邮件营销活动或订单确认中包含有用链接
在商品页面添加上下文帮助链接（例如“询问尺码”）

如何使用深度链接打开聊天窗口（需要编辑主题模板中的代码）

在上一节中，我们讨论了如何通过将标签（深度链接）直接添加到任意按钮、图标或文本，从主题编辑器中触发聊天窗口，而无需编辑主题代码。

但是，如果您希望拥有完全的灵活性，可以在商店的任何位置添加深度链接（例如，在页眉中创建一个新图标），那么您就需要编辑模板代码。

以下是一些简单的 HTML 代码示例，您可以使用它们在主题模板中创建新图标：

代码示例

1. 聊天图标

以下代码会添加一个聊天图标：

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. AI 星形图标

以下代码会添加一个 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. 函数调用方法

除了使用标签之外，您还可以将函数调用 openShoplyAIChatBot() 放到任意按钮/图标的 onclick 属性中，这样客户在点击按钮/图标时就会看到聊天窗口。

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>

需要帮助？

您可以使用上述任一示例，并将代码插入到 sections/header.liquid 文件中的搜索图标旁边，以便将聊天深度链接添加到您商店的页眉中。

不过，如果您对编辑主题模板中的代码不太放心，也不用担心！

欢迎与我们预约会议，我们很乐意帮助您在最理想的位置设置最合适的图标，以匹配您商店的独特风格。

如何隐藏悬浮图标？

在您配置好用于打开聊天窗口的深度链接后，您可能会想要隐藏悬浮图标。此外，店主也经常提到，他们网站上有太多悬浮图标会让人感到不堪重负。我们理解您的顾虑！这就是为什么我们推出了隐藏聊天图标的功能。

在应用管理控制台的“自定义 AI 聊天”部分，在 选择聊天图标 设置下，您现在可以选择：

“隐藏悬浮图标并使用深度链接打开聊天” 选项。

这样，您就可以隐藏悬浮图标，同时仍然通过深度链接打开聊天窗口。