フロートチャットウィジェットは、ページがスクロールされてもブラウザー内を移動し、常に表示されます。訪問者のページ閲覧を妨げることなく、Webサイトを通して訪問者の注意を引くことができます。
フロートウィジェットのデザインは、Zoho SalesIQであらかじめ用意されたデザインから選択でき、すぐに利用を開始できます。
フロートウィジェットを変更するには:
- [設定]→[ブランド]→[(ブランド名)]→[カスタマイズ]に移動すると、フロートウィジェットを変更できます。 画面左側のメニューにある [表示画像] をクリックします。
- [フロート] タブで、対象のフロートウィジェットを選択します。画面の上部に表示されたポップアップ画面で、 [保存する] をクリックして、変更内容を保存します。

ボタンウィジェット
ボタンウィジェットは、ページ上の任意の場所に固定して表示されます。顧客の目に留まりやすく、アクセスしてもらいやすい位置を指定できます。ボタンのデザインは、Zoho SalesIQであらかじめ用意されたデザインから選択でき、すぐに利用を開始できます。
ボタンウィジェットを変更するには:
- [設定]→[ブランド]→[(ブランド名)]→[カスタマイズ]に移動すると、ボタンウィジェットを変更できます。 画面左側のメニューにある [表示画像] をクリックします。
- [ボタン] タブで、対象のフロートウィジェットを選択します。画面の上部に表示されたポップアップ画面で、 [保存する] をクリックして、変更内容を保存します。

独自の表示画像のアップロード:
あらかじめ用意されているデザインではなく、ブランドに合わせたデザインでウィジェットをカスタマイズしたい場合は、表示画像のアップロード機能を使用して、独自の表示画像を追加できます。
- [表示画像]ページの下部にある[独自の表示画像 - フロート]または[独自の表示画像 - ボタン]設定のスイッチを切り替えて、有効にします。[オンライン時の画像をアップロードする]をクリックします。

- 表示画像ファイルをドラッグ&ドロップするか、コンピューターを参照して画像ファイルを選択し、アップロードできます。

メモ :表示画像は正方形の画像にしてください。画像の推奨サイズは最小50x50ピクセル、最大1MBです。
チャットウィジェットのメッセージの変更:
チャットウィジェットに表示するメッセージをカスタマイズして、訪問者の注意を引き、やりとりしやすくすることができます。
オンライン時のメッセージのカスタマイズ:
[表示画像]ページで、下にスクロールして [チャットウィジェットのメッセージ - オンライン] を表示します。メッセージの内容と署名メッセージの欄のテキストを編集します。画面の上部に表示されたポップアップ画面で、 [保存する] をクリックして、変更内容を保存します。

オフライン時のメッセージのカスタマイズ:
[表示画像]ページで、下にスクロールして [チャットウィジェットのメッセージ - オフライン] を表示します。メッセージの内容と署名メッセージの欄のテキストを編集します。画面の上部に表示されたポップアップ画面で、 [保存する] をクリックして、変更内容を保存します。
ウィジェットの位置の変更
Webサイトのデザインや好みに応じて、チャットフロートウィジェットの表示位置を[左下]または[右下]に設定できます。初期設定では、ウィジェットは[右下]に表示されます。Webサイトの右下に重要なコンテンツがある場合など、必要に応じて、ウィジェットを左下に配置できます。
- [表示画像]ページで下にスクロールし、[ウィジェットの位置]設定を表示します。チャットウィジェットの表示位置として、[左下]または[右下]を選択します。画面の上部に表示されたポップアップ画面で、 [保存する] をクリックして、変更内容を保存します。

チャットウィンドウの外観のカスタマイズ
チャットウィンドウについて、次の内容をカスタマイズできます:
- チャットウィンドウのテーマの選択
- チャットウィンドウの色の選択
- チャットウィンドウでの組織ロゴの表示
- 担当者のプロフィール画像の表示
- 独自のCSSファイルのアップロード
チャットウィンドウをカスタマイズするには?
- [設定]→[ブランド]→[(ブランド名)]→[カスタマイズ]に移動し、画面左側のメニューにある[外観]をクリックします。
- あらかじめ用意されているテーマから1つを選択します。画面の上部に表示されたポップアップ画面で、 [保存する] をクリックして、変更内容を保存します。

チャットウィンドウの色の変更:
テーマには、あらかじめ用意されている標準の色が適用されています。Webサイトのイメージに標準の色が合わない場合は、色を変更できます。独自の色を設定することもできます。
- [設定]→[ブランド]→[(ブランド名)]→[カスタマイズ]に移動し、画面左側のメニューにある[外観]をクリックします。
- 下にスクロールして [チャットウィンドウの色の選択] 設定を表示します。標準の色のいずれかを選択するか、カラーピッカーを使用して独自の色を設定します。
- 色コードを入力するか、カラーパレット(色の選択ツール)で任意の色を選択することができます。
- 画面右側にチャットウィンドウのプレビューが表示されます。選択した色がチャットウィンドウに反映されます。

チャットウィンドウのサイズの選択
- [設定]→[ブランド]→[(ブランド名)]→[カスタマイズ] に移動し、画面左側のメニューにある[外観]をクリックします。
-
画面を下にスクロールし、 [チャットウィンドウのサイズの選択] 設定を表示します。 チャットウィンドウのサイズは、 [中]または[大] のいずれかから選択できます。

メモ :チャットウィンドウのサイズの選択は、モバイルブラウザーには適用されません。モバイルブラウザーでのチャットウィンドウのサイズは、モバイル端末の画面サイズに応じて異なります。
独自のCSSファイルをアップロードして、チャットウィンドウの外観をカスタマイズするには
独自のCSSファイルをアップロードして、チャットウィンドウをカスタマイズできます。独自のCSSファイルの設定方法については、 独自のCSSファイルの設定ガイド をご参照ください。
- [設定]→[ブランド]→[(ブランド名)]→[カスタマイズ] に移動し、画面左側のメニューにある [外観] をクリックします。
- 下にスクロールして [独自のCSSファイルのアップロード] を表示します。[アップロード]ボタンをクリックし、コンピューターからCSSファイルを選択して [保存する] をクリックします。
- 右側のプレビューチャットウィンドウで、独自のCSSファイルを適用したチャットウィンドウを確認できます。

ナレッジベース名のカスタマイズ
管理するコンテンツに応じて、チャットウィンドウに表示するナレッジベース名を変更できます。たとえば、ナレッジベースで記事のみを管理する場合は、ナレッジベース名を「記事」に変更できます。また、訪問者からのよくある質問と回答を管理する場合には、「FAQ」に変更できます。
- [外観]ページで、下にスクロールして [チャットウィンドウで表示するナレッジベース名の設定] を表示します。入力欄のテキストを変更します。
- 右側のプレビューチャットウィンドウで、設定したナレッジベース名を確認できます。

記事の分類:
作成時に割り当てられたカテゴリー別に記事を表示して、訪問者が必要な情報を検索しやすくすることができます。
- [外観]ページで、下にスクロールして [チャットウィンドウでの記事の表示方法の選択] 設定を表示します。 [カテゴリーのみ表示する] を選択します。画面の上部に表示されたポップアップ画面で、 [保存する] をクリックして、変更内容を保存します。

チャットウィンドウの言語の変更:
初期設定では、チャットウィンドウにはWebサイトの言語が適用されます。他の言語を使用する場合は、言語を変更できます。たとえば、言語別に複数のWebサイトを管理している場合に、この設定を利用すると便利です。
- [設定]→[ブランド]→[(ブランド名)]→[カスタマイズ] に移動し、画面左側のメニューにある [言語とフォント] をクリックします。
- ドロップダウンから対象の言語を選択します。画面の上部に表示されたポップアップ画面で、 [保存する] をクリックして、変更内容を保存します。
- 設定したい言語がない場合や、Webサイトの設定に基づく言語に変更したい場合は、ドロップダウンの一番上にある [Webサイトの言語] を選択します。
チャットウィンドウのフォントのカスタマイズ:
言語と同様に、チャットウィンドウには初期設定でWebサイトのフォントが適用されます。必要に応じて、任意のフォントに変更できます。
- [言語とフォント] ページの下部にある [チャットウィンドウフォント] 設定で、あらかじめ用意されているフォントからいずれかをクリックします。画面の上部に表示されたポップアップ画面で、[保存する]をクリックして、変更内容を保存します。
