如何使用 Deep Link 開啟聊天視窗（無需編輯佈景主題程式碼）
您可以使用 Deep Link 開啟聊天視窗，而無需修改佈景主題的程式碼。
在 Shopify 佈景主題編輯器中，只需將 hashtag #shoply-ai-chatbot 加入任何按鈕、圖示或文字元素。
當客戶點擊這些元素時，聊天視窗便會自動開啟。
即時例子：demo.shoplyai.ai
步驟：
- 在佈景主題編輯器中編輯所需的按鈕、文字或圖示。
- 將連結或 URL 設定為
#shoply-ai-chatbot。
例子：
使用按鈕開啟聊天視窗：
使用連結文字開啟聊天視窗：
使用預先填寫的問題開啟聊天
想開啟聊天視窗並自動發送問題嗎？您可以使用hash 片段（建議）或 URL 查詢參數來完成。
這非常適合為常見主題建立直接連結，例如配送政策、退貨政策或產品查詢。
建議：Hash 片段（不重新載入頁面）
使用 #shoply_question= hash 片段。由於 hash 完全在瀏覽器中處理，點擊此連結不會重新載入頁面，而且現有的聊天記錄會獲得保留。
格式：
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：
https://your-store.com/products/blue-jacket#shoply_question=What sizes are available?舊版：URL 查詢參數
?shoply_question= 查詢參數仍受支援，以維持向後兼容性。請注意，將查詢參數附加到客戶目前所在的 URL，會導致頁面重新載入。
格式：
https://your-store.com?shoply_question=your question here**注意：**使用特殊字元或空格時，請記得對問題進行 URL 編碼。大多數瀏覽器會自動處理，但如果您以程式方式加入連結，請使用正確的 URL 編碼（例如空格會變成 %20）。
當客戶點擊任何一種連結時，聊天視窗會自動開啟，而問題會發送給 AI chatbot，立即提供答案。
使用情境：
- 在頁尾加入「查詢配送」連結
- 建立可帶著特定問題開啟 chatbot 的 QR 碼
- 在電郵推廣活動或訂單確認中加入實用連結
- 在產品頁面加入情境相關的求助連結（例如「查詢尺寸」）
如何使用 Deep Link 開啟聊天視窗（需要編輯佈景主題範本中的程式碼）
在上一節，我們討論了如何在不編輯佈景主題程式碼的情況下，直接從佈景主題編輯器將 hashtag（Deep Link）加入任何按鈕、圖示或文字，以觸發聊天視窗。
不過，如果您希望更靈活地將 Deep Link 加入商店的任何位置（例如在頁首建立新圖示），便需要編輯範本程式碼。
以下是一些簡單的 HTML 程式碼例子，您可以使用它們在佈景主題範本中建立新圖示：
程式碼例子
1. 聊天圖示
以下程式碼會加入聊天圖示：
<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 星星：
<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 屬性，讓客戶點擊按鈕／圖示時看到聊天視窗。
<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 檔案中的搜尋圖示旁邊，為商店頁首加入聊天 Deep Link。
不過，如果您不太熟悉編輯佈景主題範本中的程式碼，也不用擔心！
歡迎預約與我們會面 ，我們很樂意協助您在理想位置設定最合適的圖示，配合您商店的獨特風格。
如何隱藏浮動圖示？
設定開啟聊天視窗的 Deep Link 後，您可能會想隱藏浮動圖示。 商店擁有人也經常提到，網站上有太多浮動圖示可能會令人感到困擾。 我們明白您的顧慮！因此，我們推出了隱藏聊天圖示的功能。
在應用程式管理主控台的「自訂 AI 聊天」部分，於選擇聊天圖示設定中，您現在可以選取：
**「隱藏浮動圖示並使用 Deep Link 開啟聊天」**選項。
這樣便可隱藏浮動圖示，同時仍能讓聊天視窗透過 Deep Link 開啟。