チャットボットの外観をカスタマイズする方法

Shoply AI Chat と AI Search には、アプリの外観をカスタマイズするための40以上のオプションが用意されています。

このセクションでは、AI Chatbotで利用できるさまざまなカスタマイズオプションをご案内します。ブランドに合わせて、外観、チャットウィンドウのデザイン、メッセージ体験をパーソナライズできます。

始める準備はできましたか？ Shopify を使っている場合でも、その他のウェブサイトプラットフォームを使っている場合でも、Shoply AI Admin Console で Customize AI Chat を開いてください。まだチャットボットが表示されていない場合は、インストールと表示のチェックリストに従ってください。

チャットウィンドウをプレビューする

管理画面で使われているものと同じテーマとデスクトップ幅のイラストを試せます。ライトまたはダークの外観を選び、チャットウィンドウがどれくらいのスペースを占有するか比較してください。

見た目ではなくAIの話し方を変更したい場合は、AIの個性をカスタマイズする方法をご覧ください。

チャットアイコンの選択

Select an icon

17種類の定義済みアイコンからチャットアイコンを選ぶことも、画像をアップロードして独自のチャットアイコンとして使用することもできます。

チャットアイコンの色とサイズ

Primary Color

これはメインのテーマカラーであり、チャットウィンドウ内の強調テキストの色としても使われます。

ウェブサイトでライトモードを使用している場合は、テーマカラーとして白以外の色を選択してください。これは、明るい背景でも強調テキストの可読性を保つためです。 ウェブサイトでダークモードを使用している場合は、テーマカラーとして黒以外の色を選択してください。

Complementary Color

これは、メインカラーと組み合わせてグラデーション（2色間の滑らかな色の移り変わり）を作る補完色です。チャットアイコンやチャットウィンドウのヘッダーに使用され、チャットアイコンをより視覚的に魅力的にし、ブランドとの一貫性を高めます。

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

ダークモードを選択すると、チャットウィンドウの背景は黒になり、文字色は白になります。ストアのテーマもダークモードである場合は、ダークモードオプションを採用することをおすすめします。

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)

ウェルカムメッセージを空欄のままにすると、チャットアイコンの上にウェルカムメッセージは表示されません。

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搭載の商品質問の仕組みを確認するか、商品質問ボタンを追加する手順に従ってください。

定義済みメッセージの各種類の例はこちらです。