Web Widgetの外観の設定

メモ：この記事は、メッセージングWeb Widgetを使用するアカウントを対象としています。Web Widget（従来版）を使用している場合は、「Web Widget（従来版）でコンポーネントを設定する方法」を参照してください。

「Web Widgetを編集」ページの「スタイル」タブから、Web Widgetの外観についてさまざまな設定を行うことができます。

この記事では、次のトピックについて説明します。

• ウィジェットのフレームを設定する
• ウィジェットのランチャーを設定する

ウィジェットのフレームを設定する

Web Widgetのフレームには、カスタマーとエージェントがメッセージングで会話を行うためのウィンドウの構成要素が含まれています。ページ上のフレーム位置を定義したり、テキストとフレーム要素の色を選択したり、ロゴをアップロードしたりするなどの操作ができます。

ウィジェットのフレームを設定するには

1. 管理センターで、サイドバーの「チャネル」をクリックし、「メッセージングとソーシャル」>「メッセージング」を選択します。
2. 編集するチャネルの名前をクリックします。ウィジェットの編集ページが開きます。
3. 「スタイル」タブをクリックします。
4. メインの色：ランチャーボタンおよびウィジェットのヘッダーのメインの色を設定します。16進数を入力するか、カラースウォッチをクリックしてカラーピッカーを開きます。Web Widget（従来版）から移行する場合、デフォルトの色はそのブランドのウィジェット設定の色になります。
5. メッセージの色：カスタマーのメッセージを囲む吹き出しの色を設定します。16進数を入力するか、カラースウォッチをクリックしてカラーピッカーを開きます。
6. アクションの色：ボタンの色やカスタマーのアクション（選択したオプションなど）の色を設定します。16進数を入力するか、カラースウォッチをクリックしてカラーピッカーを開きます。
7. ロゴ：フレームの上部に表示するJPGまたはPNGを設定します。ロゴは会話フローのビジュアルIDです。「画像をアップロード」をクリックし、追加する画像を選択します。
8. タイトル：フレームの上部に表示するテキストを設定します。通常はCTA（「問い合わせ先」など）またはビジネス名です。
9. 説明：タイトルの下に表示する短いテキストを作成します。共有したい情報やタグラインなどです。テキストボックスに説明を入力します。
10. 「設定を保存」をクリックします。

ウィジェットのランチャーを設定する

ランチャーは、カスタマーがクリックしてウィジェットを開くためのボタンです。Webブラウザやヘルプセンターのページ内の表示位置やボタンの形状、テキストなどを設定することができます。

ランチャーを設定するには

1. 管理センターで、サイドバーの「チャネル」をクリックし、「メッセージングとソーシャル」>「メッセージング」を選択します。
2. 編集するチャネルの名前をクリックします。ウィジェットの編集ページが開きます。
3. 「スタイル」タブをクリックします。
4. ブラウザウィンドウ内での位置：ブラウザウィンドウ内でのランチャーボタンの表示位置を設定します。ラジオボタンを使用して「右下」または「左下」を選択します。
5. 「形状」（Web Widgetのみ）：ランチャーボタンの形状。「四角」または「円」を選択します。
6. テキスト（オプション）：ランチャーボタンの横に表示されるテキストを作成します。
7. モバイルに表示：モバイルSDKに表示するテキストを選択します。
8. 「設定を保存」をクリックします。