NEWT Chatドキュメント
Chat

デザイン修正

チャットウィジェットの表示内容と見た目を設定する

サイドバーの Chat → デザイン修正 では、チャットウィジェットに表示する文言や色、表示位置などを設定します。画面右側のプレビューで、変更内容をその場で確認しながら編集できます。

  • タブは 「コンテンツ」 と 「スタイル」 の2つです(スマートフォンでは「プレビュー」タブも表示されます)。
  • タブごとに 「設定を保存」 で保存します。保存せずにタブを切り替えたりページを離れようとすると、確認メッセージが表示されます。
  • プレビューは「初期状態」「会話中」「お問い合わせ」の3つの表示を切り替えられます。

コンテンツ

チャット設定

項目説明文字数
表示名(必須)チャット画面の上部に表示される名前。施設名やサービス名がおすすめです60文字まで
ウェルカムメッセージ(必須)チャットを開いたときに最初に表示されるメッセージ250文字まで
入力欄のプレースホルダーメッセージ入力欄に薄く表示される案内文50文字まで

よくある質問の設定

チャットを開いたときに表示される質問候補です。お客様はタップするだけで質問できます。

  • 最大 5個、1つあたり 20文字 まで
  • 入力欄に質問を入力して「+」または Enter で追加し、ゴミ箱アイコンで削除します

エージェント作成時に、ウェブサイトの情報をもとにウェルカムメッセージと質問候補が自動で設定されます。内容を確認して、必要に応じて調整してください。

お問い合わせ機能

チャットの中から、お客様がお問い合わせフォームを送信できるようにします。設定方法はお問い合わせフォームを設定するをご覧ください。

ウォーターマーク設定

ウィジェット下部の「Powered by NEWT Chat」の表示を切り替えます。非表示にできるのは Suiteプラン以上 です。

スタイル

ウィジェットの外観

  • ヘッダー・送信ボタンのカラー:チャット画面のヘッダーと送信ボタンの色。「リセット」で標準のブランドカラーに戻ります。

チャットバブル設定

チャットバブルは、ウェブサイトの画面端に表示されるチャットを開くボタンです。

項目説明
バブルテキストアイコンの横に表示するテキスト(15文字まで。初期値「Contact」)。空にするとアイコンのみになります
チャットバブルの背景色バブルの背景色
チャットバブルの文字色バブルのテキスト・アイコンの色
アイコン「メッセージ」「チャット」「ヘルプ」から選択

表示位置

項目説明
ベース位置「右下」または「左下」
下端からの距離画面下端からの余白(0〜200px、初期値20px)
右端/左端からの距離画面の左右端からの余白(0〜200px、初期値20px)

表示位置の設定はプレビューには反映されません。また、保存後に埋め込み先のサイトへ反映されるまで数分かかる場合があります。

設定を確認する

保存した内容は、埋め込みタグを貼り直さなくても自動でサイトに反映されます。動作テストや設置済みのサイトで、実際の見た目を確認してください。

デザイン修正