如何透過連結開啟聊天視窗

你可以使用深層連結來開啟聊天視窗，而無需修改佈景主題的程式碼。在 Shopify Theme Editor 中，只需將 hashtag #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 能取得產品內容背景。你亦可以分享完整的產品 URL，並在結尾加上 #shoply_product_questions。

試用 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?

你可以將此方式與商店內任何頁面結合使用。例如，要在特定產品頁面以某條問題開啟 chatbot：

plaintext


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

舊版支援：URL Query Parameter

?shoply_question= query parameter 仍然支援，以保持向後相容。請注意，如果顧客已在該 URL 頁面上，再附加 query parameter 會導致頁面重新載入。

格式：

plaintext


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

注意： 當問題包含特殊字元或空格時，請記得對問題進行 URL 編碼。大多數瀏覽器會自動處理，但如果你是以程式方式加入連結，請使用正確的 URL 編碼（例如空格會變成 %20）。

當顧客點擊上述任一類型的連結時，聊天視窗會自動開啟，並將問題發送給 AI chatbot，即時提供答案。

使用情境：

在頁尾加入「查詢運送資訊」連結
建立可用指定問題開啟 chatbot 的 QR code
在你的電郵推廣活動或訂單確認中加入實用連結
在產品頁面加入情境式說明連結（例如「查詢尺寸」）

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

在上一節中，我們介紹了如何使用 hashtag（深層連結），直接在 Theme Editor 中加入到任何按鈕、圖示或文字，以觸發聊天視窗，而無需編輯佈景主題程式碼。

不過，如果你希望有完全彈性，可在商店中的任何位置加入深層連結（例如在頁首建立一個新圖示），你便需要編輯範本程式碼。

以下是一些簡單的 HTML 程式碼範例，你可以用來在 Theme template 中建立新圖示：

程式碼範例

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 檔案中的搜尋圖示旁邊，為你的商店頁首加入聊天深層連結。

不過，如果你對編輯佈景主題範本中的程式碼不太熟悉，也不用擔心！

歡迎預約與我們會面，我們很樂意協助你在最合適的位置設定最理想的圖示，以配合你商店的獨特風格。

如何隱藏浮動圖示？

當你已設定好使用深層連結來開啟聊天視窗後，你可能會想隱藏浮動圖示。另外，商店店主亦經常提到，網站上有太多浮動圖示會令人感到眼花繚亂。我們明白你的顧慮！因此，我們推出了可隱藏聊天圖示的功能。

在 app 管理控制台的「Customize AI Chat」部分，於 Select a Chat Icon 設定下，你現在可以選擇：

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

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