如何使用深層連結開啟聊天視窗（無需編輯佈景主題程式碼）
你可以使用深層連結開啟聊天視窗，無需修改佈景主題程式碼。
在 Shopify 佈景主題編輯器中，只需將井號 #shoply-ai-chatbot 加入任何按鈕、圖示或文字元素。
顧客點擊這些元素時，聊天視窗就會自動開啟。
線上範例：demo.shoplyai.ai
步驟：
- 在佈景主題編輯器中編輯所需的按鈕、文字或圖示。
- 將連結或 URL 設為
#shoply-ai-chatbot。
範例：
使用按鈕開啟聊天視窗：
使用連結文字開啟聊天視窗：
開啟聊天並預先填入問題
想要開啟聊天視窗，同時自動傳送問題嗎？你可以使用雜湊片段（推薦）或 URL 查詢參數來完成。
這非常適合建立指向配送政策、退貨政策或商品諮詢等常見主題的直接連結。
推薦：雜湊片段（不重新載入頁面）
使用 #shoply_question= 雜湊片段。由於雜湊片段完全在瀏覽器中處理，點擊此連結不會重新載入頁面，也會保留現有的聊天記錄。
格式：
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?
你可以將這項功能與商店中的任何頁面結合。例如，在特定商品頁面上透過問題開啟聊天機器人：
https://your-store.com/products/blue-jacket#shoply_question=What sizes are available?舊版：URL 查詢參數
為了維持向後相容性，目前仍支援 ?shoply_question= URL 查詢參數。請注意，將查詢參數附加到顧客目前所在的 URL 會導致頁面重新載入。
格式：
https://your-store.com?shoply_question=your question here**注意：**使用特殊字元或空格時，請記得對問題進行 URL 編碼。大多數瀏覽器會自動處理，但如果你要以程式方式加入連結，請使用正確的 URL 編碼（例如空格會變成 %20）。
顧客點擊任一類型的連結時，聊天視窗會自動開啟，問題也會傳送給 AI 聊天機器人，立即提供回答。
使用情境：
- 在頁尾加入「詢問配送資訊」連結
- 建立掃描後會以特定問題開啟聊天機器人的 QR code
- 在電子郵件行銷活動或訂單確認信中加入實用連結
- 在商品頁面加入情境相關的協助連結（例如「詢問尺寸」）
如何使用深層連結開啟聊天視窗（需要編輯佈景主題範本中的程式碼）
在上一節中，我們說明了如何在不編輯佈景主題程式碼的情況下，直接從佈景主題編輯器將井號（深層連結）加入任何按鈕、圖示或文字，以觸發聊天視窗。
然而，如果你希望更彈性地將深層連結加入商店的任何位置（例如在頁首建立新圖示），就需要編輯範本程式碼。
以下是可用來在佈景主題範本中建立新圖示的簡單 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. 函式呼叫方法
除了使用井號之外，你也可以將函式呼叫 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 檔案中搜尋圖示旁邊，將聊天深層連結加入商店頁首。
然而，如果你不太熟悉編輯佈景主題範本中的程式碼，別擔心！
歡迎預約與我們開會 ，我們很樂意協助你在理想位置設定完美的圖示，搭配商店獨有的風格。
如何隱藏浮動圖示？
設定深層連結以開啟聊天視窗後，你可能會想隱藏浮動圖示。 此外，商店擁有者也經常提到，網站上有太多浮動圖示可能會讓人感到眼花撩亂。 我們理解你的顧慮！因此，我們推出了隱藏聊天圖示的功能。
在應用程式管理主控台的「自訂 AI 聊天」區段中，於選取聊天圖示設定下，現在可以選取：
**「隱藏浮動圖示，並使用深層連結開啟聊天」**選項。
這樣一來，你可以隱藏浮動圖示，同時仍能透過深層連結開啟聊天視窗。