メモ：この記事は、メッセージングWeb Widgetを使用するアカウントを対象としています。Web Widget（従来版）を使用している場合は、「Web Widget（従来版）でコンポーネントを設定する方法」を参照してください。
Web Widgetページの「スタイル」タブで、Web Widgetの外観についてさまざまな設定を行うことができます。
この記事では、次のトピックについて説明します。
ウィジェットのフレームを設定する
Web Widgetのフレームには、カスタマーとエージェントがメッセージングで会話を行うためのウィンドウの構成要素が含まれています。ページ上のフレーム位置を定義したり、テキストとフレーム要素の色を選択したり、ロゴをアップロードするなどのさまざまな設定が可能です。
ウィジェットのフレームを設定するには
- 管理センターで、サイドバーの「
チャネル」をクリックし、「メッセージングとソーシャル」>「メッセージング」を選択します。 - 編集するチャネルの名前をクリックします。ウィジェットの編集ページが開きます。
- 「スタイル」タブをクリックして、以下の項目を設定します。
- メインの色：ランチャーボタンおよびウィジェットのヘッダーのメインの色。16進数を入力するか、カラースウォッチをクリックしてカラーピッカーを開きます。Web Widget（従来版）から移行する場合、デフォルトの色はそのブランドのウィジェット設定の色になります。
- 位置：Webサイトやヘルプセンターのページ画面上のウィジェットやランチャーの位置。「左下」または「右下」を選択し、ページ画面の下辺および右辺との余白を指定します。デフォルトの余白は、それぞれ16ピクセルずつです。
- 境界線：ウィジェットの外枠の四隅の丸み（半径）。スライダーを使って、半径を直角（0ピクセル）～角丸（20ピクセル）の間で選択します。
- メッセージの色：カスタマーのメッセージを囲む吹き出しの色。16進数を入力するか、カラースウォッチをクリックしてカラーピッカーを開きます。
- アクションの色：ボタンの色やカスタマーのアクション（選択したオプションなど）の色。16進数を入力するか、カラースウォッチをクリックしてカラーピッカーを開きます。
- カスタマーに添付ファイルのアップロードを許可する：カスタマーがメッセージング会話に添付ファイルを追加できるようにするには、このチェックボックスを選択します。カスタマーが添付ファイルを追加できないようにするには、選択を解除します。添付ファイルはデフォルトで許可されています。
- ロゴ（オプション）：フレームの上部に表示するJPGまたはPNG。ロゴは会話フロー内で、ブランドのアイコンとして表示されます。「画像をアップロード」をクリックし、追加する画像を選択します。
- タイトル：フレームの上部に表示される名前。「お問合せ」のようなCTA（コールトゥアクション）や、会社名などです。
- 説明：タイトルの下に表示される短いテキスト。共有したい情報やキャッチコピーなどです。テキストボックスに入力します。
- Zendeskのロゴを表示：Web WidgetやモバイルチャネルでZendeskのロゴの表示と非表示を切り替えます。Suite Enterpriseのアカウントで使用可能です。
- 新規メッセージの通知音を再生する（Web Widgetのみ）：非アクティブなWeb Widgetメッセージングの会話にエージェントまたはボットから応答があったときに、通知音でカスタマーに知らせることができます。カスタマーが通知音を無効にしたい場合は、メッセージングの会話を終えたときに無効にすることができます。
- 「設定を保存」をクリックします。
ウィジェットのランチャーを設定する
ランチャーは、カスタマーがクリックしてウィジェットを開くためのボタンです。Webブラウザやヘルプセンターのページ内の表示位置やボタンの形状、テキストなどを設定することができます。
また、Web Widget APIを使用してカスタムのWeb Widgetランチャーを作成し、その動作を定義することができます。詳しくは「Web Widget API」を参照してください。
ランチャーを設定するには
- 管理センターで、サイドバーの「チャネル」をクリックし、「メッセージングとソーシャル」>「メッセージング」を選択します。
- 編集するチャネルの名前をクリックします。ウィジェットの編集ページが開きます。
- 「スタイル」タブをクリックします。
- 「位置」を指定し、ブラウザウィンドウ内でのランチャーボタンの表示位置を変更します。「右下」または「左下」のラジオボタンを選択します。
- 「形状」で、ランチャーボタンの形状を変更します（Web Widgetのみ）。次のいずれかを選択します。
- 四角（スライダーを使ってランチャーボタンの四隅の丸みを調整可能）
- 円
-
カスタムランチャーメモ：カスタムランチャーを選択すると、Webサイトやヘルプセンターからランチャーがいったん削除されます。その後、open API、close API、unread messages APIを使って、Webやヘルプセンターのページにランチャーを追加することができます。詳しくは「Web Widget API」を参照してください。
- テキスト（オプション）：ランチャーボタンの横に表示されるテキストを作成します。
- モバイルに表示：モバイルSDKに表示するテキストを選択します。
- 「設定を保存」をクリックします。