チャットボット作成方法

①ダッシュボードの「クリエイティブ」から「チャットボット一覧」をクリックします。

②「作成」をクリックします。

③チャットボット登録画面が表示されるので、1つずつ設定します。

【全体】

・コンテンツ名：チャットボットの名前を登録します。

・コンバージョンURL：コンバージョン（目的達成）となるページのURLを入力します。

【初期表示設定】

ページに表示するチャットボットの初期デザイン（アイコン）を設定します。
PCとスマートフォン別々に設定します。

・初期表示方法：チャット欄を閉じた状態か、開いた状態か選択します。

・アイコンの種類：画像かテキストかを選択します。
・表示位置：左か右かを選択します。

アイコンについて

■画像アイコン（デフォルト）

アイコンカラーの変更が可能です。

任意の画像アイコンを使用したい場合は、画像ファイルをアップロードしてください。

■テキストアイコン
※アイコンカラーはチャット欄の設定のテーマカラーが自動設定されます。

・タイトル部分のみ

・タイトル＋コメント・ボタン

文言は任意設定いただけます。
「タイトル部分の高さ」はアイコンの縦幅設定です。

・余白/サイズ/ボタン
　∟右（左）余白：画面右端からどのくらい余裕を持たせるかを設定します。
　　　　　　　　　（※表示位置の設定によって左右が変わります。）
　　下余白：画面下からどのくらい余裕を持たせるかを設定します。

　∟横幅：アイコンの横幅を設定します。

　∟閉じるボタン：閉じるボタンの有無を設定します。なしの場合は任意で消すことができなくなります。
　　閉じるボタンの色：閉じるボタンの「×」の色を設定します。

【チャット欄の設定】

チャットボットが開いた状態を設定します。

変更すると、右側のプレビューがリアルタイムで変化しますので確認しながら調整してください。

・テーマカラー：チャットボットのテーマカラーを決めます。後から変更可能です。

・ボットアイコン画像ファイル：ボットアイコン画像の設定です。（任意）

「ファイルを選択」から画像をアップロードします。

・配置：チャットボットの表示位置やボタンの位置、フォントサイズ等を設定します。

　▽表示位置設定
　チャット欄の表示位置と大きさを設定します。
　※スマートフォンは画面いっぱいに表示されるので、配置設定はありません。
　

　▽閉じるボタン
　チャットボタン上部の×ボタンの位置を設定します。
　

　▽フォントサイズ
　チャット欄全体のフォントサイズを設定します。
　

・タイトルエリア：
　タイトル文言・高さや文字色、背景色を設定します。

・ヘッダーエリア：
　ヘッダーエリアを表示し、社名等設定することができます。
　表示・非表示を選択できます。
　

・コメントエリア：
　チャットボットのやりとりをするエリアです。
　コメントの形や背景色、リンク文字の色など設定できます。

　▽チャット吹き出しの角丸設定
　　∟コメント角丸：吹き出し角部分の丸み設定です。数字が大きくなるほどに丸みが強くなります。
　　∟ボタン角丸：選択肢ボタンの丸み設定です。数字が大きくなるほどに丸みが強くなります。
　

　∟コメントエリア背景色：チャット欄全体の背景色を設定します。
　

　▽ボットコメント（左側吹き出し）の全体設定
　　∟ボタン文字色：選択肢ボタンの文字色を設定します。
　　∟ボタン背景色：選択肢ボタンの背景色を設定します。
　　∟コメントないリンク色：リンク(aタグ)に設定した文字の色を設定します。
　　∟ボットコメント文字色：文字色を設定します。
　　∟ボットコメント背景色：吹き出し全体の背景色を設定します。
　

　▽ユーザーコメント（右側吹き出し）の全体設定
　　∟ユーザーコメント表示：選択した回答を表示するか選択します。
　　∟ユーザーコメント文字色：文字色を設定します。
　　∟ユーザーコメント背景色：吹き出し全体の背景色を設定します。
　

・ボタンエリア：
　「ひとつ前に戻る」「最初に戻る」の表記を変更することができます。

【カスタマイズ】

cssやjsを使用し、カスタマイズをしたいお客様用の入力欄です。

カスタマイズをする際、CSSは<style></style>タグで、JavaScriptは<script></script>タグで囲ってください。

【評価・自由記入欄の設定】

チャットボットの質問が、最後まで進んだ後に表示される内容を設定できます。

④テンプレート選択に進む

③の設定が全て完了したら、「登録してテンプレート選択へ」をクリックします。

⑤テンプレートを選ぶ

チャットボットテンプレート選択画面より、テンプレートを一つ選択します。

いくつかテンプレートをご用意しています。ご自身のサイトに合ったテンプレートをお選びください。

⑥シナリオの編集

チャットボットで表示されるシナリオを編集します。

【１．一番最初の質問をクリックする】

一番左に一つだけある階層をクリックします。

【２．質問項目を登録する】

選択項目を登録します。

・質問事項：チャットボットのコメントに表示される質問を入力します。
・項目編集：分岐内容を入力します。

「項目追加」で入力項目を追加することができます。

入力が完了したら、「保存する」をクリックします。

表示期間設定・並び順について

■表示期間設定

期間限定で表示したい項目がある場合に表示期間を設定できます。
「無効/有効」のトグルをクリックすると設定いただけます。

■並び順

項目の並び順を設定できます。
「並び順」左横の数字を任意の順番に変更し、「保存する」をクリックしてください。

【３．各項目の回答を入力、または続きの質問を登録する】

２の項目編集で追加したシナリオをクリックします。

「回答を表示」：回答を入力する場合、「回答を入力する」をクリックして回答を入力
「さらにメニューを表示」：もう一度項目が分岐する場合は「さらにメニューを表示」をクリックし、Ⅱと同じように入力
「フォームを表示」：フォーム入力型で作成する場合クリック
「スライダーを表示」：スライダー型で作成する場合クリック
「別タブでリンクを開く」：URLリンク型で作成する場合クリック

入力後、「保存する」をクリックします。

■リンクの追加

回答にリンク先のURLがある場合は、URLをつけたいテキストとURLを入れ「追加する」を押すことで、自動でURLが入ったコードを吐き出してくれます。

お問い合わせ先や商品ページへ飛ばしたい場合にご活用いただけます。

■画像の追加

回答に画像を入れたい場合は、パソコンから画像をアップロードし、「追加する」を押すことで、画像を読み込むためのコードを自動で吐き出してくれます。

商品画像を見せるなど、視覚的にも情報を伝えたいときに活用いただけます。

※現在登録できるのは1枚のみとなっております。
※複数の画像を表示したい時：画像URLが発行されているものであれば、<img src=”画像URL”>で画像を追加いただくことが可能です。

【４．２～３を繰り返し、シナリオを作成する】

２～３を繰り返し、シナリオを作成します。

作成できたら、「編集終了」をクリックします。

⑦プレビューで確認する

チャットボット一覧画面の「プレビュー」をクリックします。

作成したチャットボットの表示・動作確認が可能です。

チャットボット（フォーム入力型）の設定方法はこちら

チャットボット（スライダー型）の設定方法はこちら

チャットボット（URL入力型）の設定方法はこちら

一覧画面の見方

・作成：チャットボットコンテンツの新規作成ボタンです。
・チャットボット施策：施策一覧画面に移動します（チャットボット施策についてはこちら）
・部分一致検索：施策名で部分一致検索が可能です。
・更新日：更新日による並び替え機能です。（→更新日で並び替え）

・No.：作成ナンバーです。
・施策名：設定した施策名です。「コンテンツ編集」から変更可能です
・プレビュー：クリックすると設定したチャットボットが表示されます。
・コンテンツ編集：基本設定・アイコン・チャット欄の設定等を行います。
・シナリオ編集：チャットボットの質疑応答設定を行います。
・並び順：任意の順番に施策の並べ替えが行えます。（→並び順）

更新日で並び替え

施策の更新日による並べ替え機能です。
　∟デフォルト（選択してください）：名前順（並び順設定がある場合は優先）
　∟新しい順：更新日の新しい順
　∟古い順：更新日の古い順

並び順

施策の並び順を設定できます。

①並び替えたい順に数字を入力します。入力が完了したら「並び順(更新)」をクリックします。

②入力した数字順に施策が並び替わります。

---

その他、設定中に不明点がございましたらお問い合わせください！