如何使用連結開啟聊天視窗

您可以使用深層連結來開啟聊天視窗，而不需要修改佈景主題的程式碼。在 Shopify Theme Editor 中，只要將井字號 #shoply-ai-chatbot 加到任何按鈕、圖示或文字元素上即可。當顧客點擊這些元素時，聊天視窗就會自動開啟。

即時範例：demo.shoplyai.ai

步驟：

在佈景主題編輯器中編輯您想要的按鈕、文字或圖示。
將連結或 URL 設定為 #shoply-ai-chatbot。

範例：

使用按鈕開啟聊天視窗：

使用帶連結的文字開啟聊天視窗：

開啟含特定商品問題的聊天

在商品頁面加入「對這個商品有問題嗎？」按鈕，幫助購物者針對該商品提問。將它的連結設為 #shoply_product_questions。點擊後會開啟聊天，並帶入商品名稱、商品亮點摘要，以及與該商品相關的自動產生問題。

在 Shopify Theme Editor 中，開啟您的商品範本，新增或編輯一個支援 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 profile，以及 topsheet art 等內容。購物者可以選擇建議問題，或自行輸入問題。

如需查看這些連結的使用情境範例，請參考我們的 FAQ 替代指南中的 AI 驅動商品提問。

這些商品問題會自動產生。而您在 Customize AI Chat 中設定的起始問題則會套用在一般聊天開啟方式。

開啟聊天並預先填入問題

想要在開啟聊天視窗的同時自動送出一個問題嗎？您可以使用 hash fragment（建議）或 URL query parameter 來做到。

這非常適合建立可直接連到常見主題的連結，例如運送政策、退貨政策或商品諮詢。

建議方式：Hash Fragment（不重新載入頁面）

使用 #shoply_question= hash fragment。由於 hash 會完全在瀏覽器中處理，點擊此連結時不會重新載入頁面，而且既有的聊天紀錄也會被保留。

格式：

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

?shoply_question= query parameter 仍支援，以維持向下相容。請注意，如果將 query parameter 加到顧客目前所在的 URL，會導致頁面重新載入。

格式：

plaintext


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

注意： 使用特殊字元或空白時，請記得先將問題做 URL 編碼。大多數瀏覽器會自動處理，但若您是以程式方式加入連結，請使用正確的 URL 編碼（例如空白會變成 %20）。

當顧客點擊任一種連結時，聊天視窗都會自動開啟，並將問題送到 AI 聊天機器人，以立即提供答案。

使用情境：

在頁尾加入「詢問運送相關問題」連結
建立可用特定問題開啟聊天機器人的 QR code
在電子郵件行銷活動或訂單確認信中加入實用連結
在商品頁加入情境式協助連結（例如「詢問尺寸」）

如何使用深層連結開啟聊天視窗（需要編輯佈景主題範本中的程式碼）

在前一節中，我們已說明如何透過 Theme Editor，直接把 hashtag（深層連結）加入任何按鈕、圖示或文字中，以觸發聊天視窗，而不需要編輯佈景主題程式碼。

不過，如果您希望能更彈性地在商店任何地方加入深層連結（例如在頁首建立一個新的圖示），就需要編輯範本程式碼。

以下是一些簡單的 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. 函式呼叫方式

除了使用 hashtag 之外，您也可以將函式呼叫 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 檔案中搜尋圖示旁邊的位置，將聊天深層連結加入商店頁首。

不過，如果您對編輯佈景主題範本中的程式碼還不是很有把握，也不用擔心！

歡迎與我們預約會議，我們很樂意協助您在最理想的位置設定最合適的圖示，讓它與您商店的獨特風格完美搭配。

如何隱藏浮動圖示？

當您設定好用深層連結開啟聊天視窗後，您可能會想隱藏浮動圖示。此外，商店經營者也常提到，網站上有太多浮動圖示可能會讓人感到眼花撩亂。我們理解您的顧慮！因此，我們推出了隱藏聊天圖示的功能。

在應用程式管理後台的「Customize AI Chat」區塊中，於 Select a Chat Icon 設定下，您現在可以選擇：

「Hide floating icon and use deep link to open chat」 選項。

這樣您就能隱藏浮動圖示，同時仍可透過深層連結開啟聊天視窗。