【chroko】設定の手順その4（デザインの作成）

chroko設定の手順その４

しっかり実装していただき、オリジナルなボットに育てて頂きたい！・・・という想いから、最近はもっぱら導入サポートをがっつり担当していまして、そのうち肩書変わってるかも・・・といった状況のGeeeN営業部の温井（ぬくい）です。

もうアカウント発行していただいた方には、すでにご挨拶をさせて頂いているかも知れませんね！
当blogともども、引き続きよろしくお願いいたします。

【chroko】設定の手順その１（無料アカウント登録からタグの設置まで）
【chroko】設定の手順その２（チャットの作成）
【chroko】設定の手順その３（表示条件の作成）

までご案内しましたが、今回はお待ちかね？のデザインの設定方法についてのエントリです。
導入先サイトのデザインとの親和性など考慮しながら、独自のチャットボットを作り上げてください。

デザインに関する、2つの設定

chrokoのデザイン設定は大きく2つの項目に分かれ、
「画像」はチャットボットのアイコンや起動ボタン、チャットウィンドウの壁紙など、主に素材をアップロードするための項目で、
「デザイン」は画面上のどのあたりに設置するか、どのような色彩に設定するか、といった全体の設定を行う項目となります。

※2020年5月現在、起動アイコンの設定がPCブラウザとスマートフォン画面で同じものが表示される仕様ですが、6月にはそれぞれのサイトデザインに対応するかたちで別々の設定ができるようになります。

デザインの設定

先にチャットのパーツとして使いたい画像をアップロードして登録しておき、デザインの編集の際に呼び出して設定します。

画像の設定

画像の素材はそれぞれ
アイコン
ヘッダー
起動ボタン
背景
を登録しておくことができます。
注意点として、

アイコンは丸く切り取られるので正方形に近い形が望ましい。
ヘッダー画像の縦サイズは56ピクセルを推奨
背景は次に指定するチャットウィンドウの縦方向・横方向と同じにリサイズしておかないと余白ができてしまう
ということが挙げられます。

デザインの設定

先ほどの「画像」でアップロードした素材と、チャットのパーツを組み合わせることでチャットのデザインを設計していきます。

上から、
表示・・・画面上の①～④のどのあたりの位置にチャット起動ボタンを設置するか

アイコン・・・チャットウィンドウ内の吹き出し横の画像を設定します。起動ボタンとして表示させることもできます。
起動ボタン・・・起動ボタンのクリエイティブと表示させかたを設定します
　アイコン+メッセージ
　アイコンのみ
　画像

起動ボタンは３パターンから選択が可能で、「アイコン+メッセージ」を選択した場合はバナーと文字の色、表示させたいテキストを設定できます。
また、「画像」と「アイコン+メッセージ」の場合は表示させる幅を指定します。

チャット内デザインは大きく
ヘッダー
背景
吹き出し
プログレスバー
という４つの項目に分かれていて、右側のデザイン確認ウィンドウで確認しながら、かなり細かくカスタマイズしていくことが可能です。

ヘッダーと背景は画像をアップロードしておくことで使用することが可能です。

出来栄えはともかく、カスタマイズの自由度だけはご理解いただけるかと・・・（汗

気に入ったデザインが完成したら、「更新」ボタンで新しいテンプレートが完成です。
細かく設定している時間がなかなかとれない、という人向けに、「テンプレート反映」ボタンからサンプルテンプレートを呼び出すことができるので、最初はサンプルをカスタマイズして独自のものを作っていくのもよいでしょう。

チャットボットデザインのコツ

今までのエントリでチャット、表示条件、デザインについてお伝えしました。
あとは「キャンペーン設定」でそれぞれを合体させればチャットボットは完成です！

無料のお申込みは、こちらから！