チャットウィンドウをカスタマイズしたい

チャットウィンドウの高さ自動調整や、ヘッダーや吹き出し等の部品毎に細かく色を設定することができます。
※ チャットウィンドウのカスタマイズ機能は、公開先が「Web」の場合のみ利用可能です。

  手順

  1. 左メニューの『アプリケーション』から、チャットウィンドウをカスタマイズしたい、Web公開アプリケーションを選択してください。

  2. 『チャット画面のカスタマイズ』より、以下のカスタマイズが可能となります。

    ・タイトル
    チャットウィンドウのタイトルを変更できます。
    変更内容は、『チャット画面のカスタマイズ』内のプレビューより確認できます。

    ・表示位置
    チャットウィンドウの表示位置を変更できます。

    [表示位置:右寄せ]

    [表示位置:左寄せ]

    ・チャット呼び出しボタン
    タイトルヘッダー部分を従来のバー表示方式以外に、標準のアイコン画像(吹き出しアイコン)や、ユーザがアップロードした画像をチャット呼び出しボタンとして設定できます。
    任意の画像をアップロードして利用することで、UIデザインの幅が広がります。


    「カスタム画像」を選択した場合、ファイルを選択ボタンが表示されますので、対応形式の画像を選択し、アップロードしてください。
    対応画像形式:PNG, JPEG, GIF
    画像サイズ:48px × 48px ~ 400px × 200px
    容量上限:3MB

    ・カラーテーマ
    チャットウィンドウのタイトル、背景、吹き出し等の色をテーマに合わせて変更できます。
    「カスタム」を選択した場合、それぞれの部品の背景色、文字色を細かく設定できます。
    変更内容は、『チャット画面のカスタマイズ』内のプレビューより確認できます。



    「カスタム」を選択した場合、各項目の”clr_back(背景色)”、”clr_font(文字色)”をクリックすることで、カラーパレットが表示され、任意の色をそれぞれ設定できます。

    各項目の色を初期状態に戻したい場合は、”デフォルトカラーに戻す“ボタンをクリックしてください。
    ※ 全項目の色が初期状態に戻ります。

    ・チャットウィンドウの高さを埋め込み先サイトに合わせる
    無効:ブラウザの高さに関わらず、チャットウィンドウの高さは固定となります。
    有効:ブラウザの高さに合わせて、チャットウィンドウの高さを自動調整します。
    ※ スマートフォン表示の場合は、チェックの有無に関わらず全画面表示となります。

    [チェック無効]

    [チェック有効]

  3. チャットウィンドウのカスタマイズ後、”保存と埋め込みタグ生成“ボタンをクリックして、内容を保存してください。

  4. カスタマイズ後のタグが生成されますので、”コピー“ボタンをクリックして、タグの内容をコピーし、htmlファイルに再度埋め込み直してください。
    タグ埋め込みの詳細については、以下をご覧ください。
  5. 「チャット呼び出しボタン」のカスタム画像を変更した場合のみ、カスタム画像の反映が必要となるため、”カスタム画像の反映“ボタンをクリックしてください。

Last updated on 2019/08/06.