チャットボタン設定の作成方法・ボタン作成の概念をこのページで解説しています。

チャットボタンの詳細な設定をしたいときはこちらをご確認ください。

基本操作

ここからは操作の流れを解説いたします。

まずチャットボタン設定を開いたときに、一覧に表示されている設定を「リビジョン」と呼びます。

Open

任意のリビジョンをクリックして展開すると、一覧表示される設定を「ボタン設定」と呼びます。

Open

例えば、リビジョンがこの様に2つ設定されていた場合

ツリーで考えるとこのようなイメージになっています。

反映したいリビジョンの設定を選んで「テスト環境に適用」を行うとテスト環境に反映されます。

※テスト環境とは、弊社が用意したレビュー用の画面で、この画面からボタンの状態をプレビューする事ができます。

WhatYaのタグが埋め込まれているページにおいては、
設定をテスティングに反映後、御社環境のURLにこちらのパラメータ_whatya_testingを付与することで
実際の環境で正しく設定が反映されるかを確認することができます。

 ▼設定例：https://ser-solairo.sakura.ne.jp/ec-solairo/ の場合

以下のように、適用先のURLにパラメーター付与すると本番に影響を与えずに表示確認が可能となります。
https://ser-solairo.sakura.ne.jp/ec-solairo/?_whatya_testing

テスト環境に適用したものに更に「本番環境に適用」を行うと本番環境に反映されます。

※イメージ

ここからは、リビジョンを新規作成してボタン設定を行う手順となります。

1. 「＋新しく設定をはじめる」をクリックします。

    

2. リビジョンの名前を付けて、ボタン設定を展開します。

    

3. 展開したらラベル名をつけてボタンの設定を行います。

   
   
   ※ラベル名をつけておくと以下のように複数設定を付けたときに何の設定か解りやすくなるので、名前を付けておくことをおすすめします。

   
   
   

4. 設定が完了したら「保存」をクリックします。
   
   

    

5. 「確定」をクリックします。※このタイミングでリビジョンのコメント（名前）も変更できます。

    

現在ご利用中のWhatYaを維持する必要があります。ご利用中のWhatYaを表示させたい場合は以下ご留意ください。

Note

新規リビジョン作成時にデフォルトで入っているボタン設定を削除もしくは上書きした場合、現在ご利用中のWhatYaが表示されなくなるのでご注意ください。

ご利用中のWhatYaを表示させたい場合は、デフォルトで入っているボタン設定を削除もしくは上書きせずに、そのまま残した状態で新しくボタン設定を追加ください。

保存後に編集したい場合は、編集したいリビジョンを選択して「編集ボタン」をクリックすると編集する事ができます。※編集後は通常の手順同様に保存を押してください。

※編集中で未保存の場合は、画面の一番上に「編集中」と表示されます

適用中一覧からリビジョンは編集できません。

適用中のリビジョンの編集を行いたい場合は「保存済み一覧」から適用中のリビジョンを探し「編集」を行って下さい

以下の手順で不要なリビジョンを削除できます。

1. 削除したいリビジョンをクリックします。

    

2. 「この設定を削除」を選択します。

    

3. 「はい」をクリックするとリビジョンが削除されます。

適用中の一覧からリビジョンは削除できません。

適用中のリビジョンの削除を行いたい場合は「保存済み一覧」から適用中のリビジョンを探し「削除」を行って下さい

ボタン設定の削除を使います。こちらは、リビジョンに複数ボタン設定がされていたうちの１つを削除したい場合の手順となります。

1. 編集を押して、一覧を編集モードにすると、右に「ゴミ箱アイコン」が現れます。

    

2. 削除したいボタン設定のゴミ箱アイコンを押して「はい」を選択すると設定が削除されます。

ボタンの各種設定

ここからは設定どのようにボタンの動作を変更できるかを解説いたします。

ボタンの種類を選択します

管理コンソールから以下5タイプのボタンを設定する事ができます。

• 通常のボタン

• 画像＋テキスト

• 画像のみ

• 吹き出し（左向き）

• 吹き出し（右向き）

• ポップアップ

通常のボタン

装飾の無いデフォルトのボタンが表示されます。

画像＋テキスト

画像に設定した場合はデフォルトでは白い四角の中に指定した画像が表示され画面左側に表示されます。ボタンの中にテキストを入れたり、アイコンの位置、背景の白い四角などをCSSで調整できます。

※この機能を利用する場合は、画像URLの指定が必須となります。
※スマートフォンの操作を想定してデフォルトの表示位置を左側にしています。

画像のみ

設定した画像がそのままのサイズで、画面左側に表示されます。
サイズなどCSSでカスタマイズすることを前提としております。

「カーソルをポインターにする」について
「画像のみ」はデフォルトの場合、カーソルが通常の矢印で表示されます。
ポインターに変更する場合は、チェックボックスにチェックを入れてください。

画像＋テキストとの違いについて

吹き出し（左向き）

左に向いた吹き出しを表示します。テキストは管理画面からいつでも変更可能です。
アイコンの位置や吹き出し、背景の白い丸については、CSSで指定をする事でデザインを調整できます。

※この機能を利用する場合は、画像URLの指定が必須となります。

吹き出し（右向き）

右に向いた吹き出しを表示します。テキストは管理画面からいつでも変更可能です。
アイコンの位置や吹き出し、背景の白い丸については、CSSで指定をする事でデザインを調整できます。

※この機能を利用する場合は、画像URLの指定が必須となります。

ポップアップ

こちらのボタンはポップアップとしてご利用いただけます。
表示させるポップアップの画像とポップアップを押下した先のページのURLを設定することができます。
また、ポップアップを表示させる位置と大きさを指定いただけるので、CSSでの調整は不要です。

ポップアップの詳しい設定方法は以下記事をご参照ください。
【ボタン設定】ポップアップ設定方法について

条件が重複した場合、「表示優先度」の数値が多い方の設定されます。

条件が重複するよくあるケースを例にすると「全ページに表示するアイコン」と「特定のページだけに表示するアイコン」がある場合です。

例えばこのような設定をすると、ページ３の条件が重複します。

この場合は以下のように設定します。

1. 全ページに表示するアイコン → 「1」で設定する

   
   
   

2. 特定のページだけ表示させたいアイコン→「1000」 （多めに設定しておきます）

ボタンの画像・テキスト・×ボタンをこちらで設定できます。

• ボタンテキスト

ボタンに表示されるテキストをここで設定します

• 画像URL

アイコンの画像をここからURLで指定します。

• ×ボタンの有無

ボタンに「閉じるボタン」を表示するかを設定します。

ボタンのCSSのid名を指定できます。例えばボタン要素idを「button6」と設定した場合、CSSで利用できるボタン要素のidが「button6」となります。

※ここで指定するのはボタンの要素idとなりますので、チャットウィンドウのCSSは従来のままです。

設定した要素id（例：button6）の子要素の部分を変更したい場合は、※CSSの指定例の方法を使うと指定できます。

 </