如何自訂您的聊天機械人的外觀

How to Customize the Shoply AI Chat

Shoply AI Chat 和 AI Search 提供超過 40 項選項,讓您自訂應用程式的外觀。

本節將帶您了解 AI Chatbot 可用的各種自訂選項。您可以個人化其外觀、聊天視窗設計及訊息體驗,以配合您的品牌。

準備開始了嗎?請在您的 Shoply AI Admin Console 中開啟 Customize AI Chat,無論您使用的是 Shopify 還是其他網站平台皆可。如果聊天機械人仍未顯示,請先按照安裝與顯示檢查清單操作。

預覽您的聊天視窗

您可以試用與管理後台相同的主題和桌面寬度示意圖。選擇淺色或深色外觀,並比較聊天視窗所佔用的空間。

Chat window preview
Shopping assistant
Can you help me find a winter jacket?
Of course! Are you looking for a lightweight shell or extra warmth for colder days?
Type your message…
Light theme: light surfaces with dark text.
Desktop preview · 480 px chat window
Shopping assistantType your message…
Scaled view of a 1200 px desktop. Adjust the slider to compare widths.

These examples do not change your store. Set your preferences in Customize AI Chat and save them there.

如果您想更改的是 AI 的說話方式而不是外觀,請參閱如何自訂您的 AI 個性。

Customize AI Chat includes icon selection, uploads, background, corner roundness, and shadow controls.
Customize AI Chat includes icon selection, uploads, background, corner roundness, and shadow controls. Click the screenshot to view it at full size.

選擇聊天圖示

Select an icon

您可以從我們預設的 17 款不同聊天圖示中選擇,或上載圖片作為您自己的聊天圖示。

Choose different icons for the AI Chat button

設定聊天圖示的顏色和大小

Customize the AI Chat button

Primary Color

這是主要主題顏色,同時亦會用作聊天視窗中的重點文字顏色。

如果您的網站使用淺色模式,請選擇非白色作為主題顏色——這樣可確保重點文字在淺色背景上仍然清晰易讀。 如果您的網站使用深色模式,請選擇非黑色作為主題顏色。

Complementary Color

這是與主要顏色配合使用的輔助色,會與主色一起建立漸層效果(兩種顏色之間的平滑過渡),用於聊天圖示和聊天視窗標題列,令聊天圖示在視覺上更吸引,亦更配合您的品牌。

Icon’s Line Color

這是聊天圖示的外框顏色。

Whether to remove the background color of the chat icon.

如果您上載圖片作為聊天圖示,並希望移除聊天圖示的背景顏色(主色),此選項通常會很有用。

Whether to remove the shadow of the chat icon.

此選項可讓您移除聊天圖示的陰影效果,呈現更扁平、更簡約的設計。若您的商店採用簡潔現代的美感,或您已上載包含自身陰影或立體效果的自訂圖示,這項設定尤其有用。

Floating Icon Size for desktop and mobile.

在手機裝置上,您可能會希望將聊天圖示設定為較小尺寸,以免遮擋顧客觀看手機畫面的視野。

聊天圖示的位置設定

Chat icon positioning’s on desktop and on mobile.

Z-index of Chat Icon:

如果您希望圖示保持顯示在其他 UI 元素之前,請使用較高的數值。

Auto-hide chat icon on mobile

在手機裝置上,於指定秒數後隱藏聊天圖示。

此選項僅適用於手機裝置。它有助避免聊天圖示遮擋顧客觀看手機畫面的視野。

聊天視窗自訂

當您點擊 Shoply AI 的聊天圖示後,聊天視窗便會彈出。顧客可透過該聊天視窗與 Shoply AI 互動。

本節將帶您了解可用來自訂聊天視窗的不同選項。

Color Theme (dark mode or light mode) of the chat window

如果您選擇深色模式,聊天視窗的背景將會是黑色,而字體顏色則會是白色。我們建議如果您的商店主題同樣使用深色模式,便採用深色模式選項。

Dark or Bright Mode for AI Chat Window

Width of the chat window on desktop

此選項只適用於桌面裝置。在手機裝置上,聊天視窗一律會佔滿整個畫面。

Select the branding image and background image

您可以選擇上載自己的品牌圖片和聊天視窗背景圖片,或直接讓 Shoply AI 為您生成這些圖片。

如果您選擇使用 AI 生成圖片,Shoply AI 會根據您商店的描述來生成品牌圖片和背景圖片。

Adjust the transparency and aspect ratios of the background image for the chat window.

聊天視窗中的背景圖片可能會令其上的文字變得難以閱讀。因此,預設情況下,我們會在背景圖片上方加上一層半透明圖層。

Whether to remove Shoply AI’s Logo in Input Bar

此選項可讓您從聊天輸入列中移除 Shoply AI 標誌,帶來更簡潔、更具品牌一致性的體驗。如果您希望整個商店維持一致的品牌形象而不顯示第三方標誌,或偏好更簡約的聊天介面設計,這項設定尤其有用。

此選項僅適用於付費方案。

AI Chat 的預設訊息

您亦可以設定或編輯預設訊息,以便在顧客首次與您的聊天機械人互動時提供引導。此外,您亦可以為這些訊息設定翻譯選項(詳情請參閱此 FAQ 頁面)。

Popup Welcome message (shows above chat icon if not empty)

如果您將歡迎訊息留空,我們便不會在聊天圖示上方顯示歡迎訊息。

Popup Welcome Message

Pre-defined messages in chat window

您最多可以在聊天視窗中設定 3 類預設訊息:

  1. 聊天視窗中的第一則訊息 - 這是顧客首次打開聊天視窗時自動顯示的初始問候訊息。您可用它來歡迎顧客,並為對話定下基調。

  2. 最多 4 條起始問題 - 這些是在聊天開始時顯示的可點擊問題建議。它們透過提供常見問題讓顧客點擊以開始對話,協助引導顧客,更容易開始使用。

  3. 輸入框提示訊息 - 這是在顧客開始輸入前顯示於聊天輸入欄位中的提示文字。它可引導顧客知道可以詢問甚麼,例如 “Ask me anything 🤗” 或 “How can I help you today?”

這些設定控制的是標準聊天開場方式。當顧客透過 “Question About This Product?” 連結開啟聊天時,Shoply 會改為顯示產品名稱、簡短的產品重點,以及關於該商品的自動生成問題。您無需為每件商品撰寫起始問題。了解AI 驅動的產品問題如何運作,或按照步驟加入產品問題按鈕。

請參閱各類預設訊息的範例:

Pre-defined Messages in Chat Window