1.表示設定
ウィジェット表示設定に関して説明します。
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/623.png)
<表示する条件>
ウィジェットを表示する条件を設定します。
常に表示する | 常にウィジェットが表示されます。 *ログイン後、チャットを受け付ける場合はステータスを「待機中」にしてください。待機中のオペレータが一人以上いる場合のみチャットを受信します。 *ログインしているオペレータ全員のステータスが「離席中」の場合は、Sorryメッセージ(※)が発動されます。 ([基本設定]の「在席オペレータが居ない場合にチャットが受信された場合」にて設定したSorryメッセージ) |
---|---|
営業時間内のみ 表示する | [営業時間設定]にて設定した営業時間内に訪れたサイト訪問者へのみ表示します。 |
オペレータが待機中の時のみ表示する | 待機中のオペレータが一人以上いる場合のみ表示します。 |
表示しない | ウィジェットが表示されません。 |
<初期表示時のスタイル>
ウィジェットの初期表示の条件を設定します。
最大化して 表示する | 初期表示時にウィジェットが最大で表示されます。 |
---|---|
最小化して 表示する | 初期表示時にウィジェットが最小で表示されます。 |
小さなバナーを表示する | 初期表示時にウィジェットが小さなバナーで表示されます。 *「3.最小化/閉じる」で閉じるボタンを無効にしてる場合、もしくは有効にして非表示にしている場合は選択できません。 |
<初期表示するタイミング>
サイト訪問時にウィジェットを表示するタイミングを設定します。
サイト訪問から__秒後に表示する | サイト全体で有効となるため、初回のサイト訪問時のみ設定した秒数経過後に表示します。 その後はページ移動のたび、すぐに表示します。 |
---|---|
ページ訪問から__秒後に表示する | 各ページで有効となるため、初回のサイト訪問時およびページ移動のたび、設定した秒数経過後表示します。 |
初回オートメッセージ 受信時に表示する | トリガー設定画面にて設定された発言が表示されるタイミングと同時にウィジェットが表示されます。 その後はページ移動のたび、すぐに表示します。 |
すぐに表示する | サイト訪問後すぐに表示します。 |
<自動で最大化する条件>
サイト訪問時にウィジェットを自動で最大化する条件を設定します。
* ウィジェットは「最小化」と「最大化」と「小さなバナー」の状態が存在します。ウィジェットのヘッダー部をクリックすると「最小化」と「最大化」が切り替わります。また、「最小化」の状態から[×]ボタンで「小さなバナー」に切り替わります。
サイト訪問から__秒後に自動で最大化する | サイト全体で有効となるため、初回のサイト訪問時のみ設定した秒数経過後に自動で最大化します。 その後ページ移動すると最大化はされません。 |
---|---|
ページ訪問から__秒後に自動で最大化する | 各ページで有効となるため、初回のサイト訪問時およびページ移動のたび、設定した秒数経過後自動で最大化します。 |
最大化しない | 自動で最大化しません。 |
<表示位置>
ウィジェットを表示する位置を【右下】と【左下】から選択いただけます。
「表示位置の調整を行う」を選択いただくと、表示位置をpx単位で調整できます。
2.ウィジェットデザイン
ウィジェットのデザイン設定に関して説明します。
* デザイン編集中にウィジェット画面のサンプルが画面右側に表示されますので、
常にデザインを確認しながらデザインの編集が可能です。
* 最終的に「更新」ボタンをクリックするまでは、実際のサイトのウィジェットは変更されません。
<ウィジェットサイズ>
ウィジェットのサイズを【小】【中】【大】【最大】【カスタム】から選択することができます。
※【カスタム】の場合、ウィジェット横幅は285px以上、ウィジェット高さは194px以上の値(ウィジェットサイズの【小】以上のサイズ)にする必要があります。
※【カスタム】で指定したウィジェットの縦幅よりもウィンドウサイズの縦幅が小さい場合、
ウィジェットの縦幅は自動的に縮小されます。(レスポンシブ対応)
またサイズによってトップタイトル、企業名、説明文への登録可能文字数上限が下記の通り変動いたします。
ウィジェット サイズ | トップタイトル | 企業名 | 説明文 |
---|---|---|---|
小 | 12文字 | 15文字 | 15文字 |
中 | 16文字 | 20文字 | 20文字 |
大 | 19文字 | 24文字 | 24文字 |
最大 | 19文字 | 24文字 | 24文字 |
カスタム | 19文字 | 24文字 | 24文字 |
【小】
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/368860fa7a35e5107744884dbf1b5e45.png)
【中】
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/da9b06df0e2829e90142ccd9a987bba4.png)
【大】/【最大】
※【最大】の場合、最大化した際に画面いっぱいにウィジェットが表示されます。
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/347193378e5b9af455e7c2ccd26e5684.png)
<トップタイトル>
ウィジェットのトップ部分に表示されるメッセージ内容となります。サイト訪問者にとって分かりやすく、思わずクリックしたくなるようなタイトルを付けましょう。
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/a21a108d5532a16eea3019dca1b17c9d.png)
<企業名>
企業名や製品、サービス名などを入力しましょう。なお、ここで入力した名前が企業側が送信したチャットメッセージの差出人として相手に通知されます。
なお、企業名を表示しないことも可能です。
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/918751287acaddf0a45355fab7209f7b-1.png)
<説明文>
自由に説明文を表示することができます。サイト訪問者が気軽に問い合わせできるように工夫しましょう。
なお、説明文を表示しないことも可能です。
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/9f0c80b379ae8af375a89727f3ecdae9.png)
*<トップタイトル><企業名><説明文>はそれぞれ文字の位置を「左寄せ」「中央寄せ」から選択可能です。
(すべて左寄せの場合)
(すべて中央寄せの場合)
<カラー>
各種カラーを自由にご指定いただけます。ウィジェットを設置するサイトのテーマカラーにあわせて自由にカラーを設定しましょう。
* カラーコードによる指定またはカラーパレットから自由にカラーを選択できます。
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/6da9f3a9a709665d371c0de7e49c2941.png)
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/67a626c50285d4db117af78ed13cbb22-1.png)
<高度な設定を行う>
高度な設定を行うにチェックを入れて頂くと、より細かくデザインしていただくことができます。
*【標準に戻す】ボタンをクリックすると設定しているメインカラーの初期値へ戻ります。
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/3af60cf9c66f9c749180c911851b1cc9-1.png)
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/1-4.png)
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/b66335fed8de8c0ee914e7fedc273eb9.png)
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/image-568.png)
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/29a40cc0abd25bd623fcb7efd32c2a86.png)
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/3-6.png)
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/02e915b7b24f12938773a12ba5fc2fbb-1-1-edited-1.png)
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/image-569.png)
<画像の設定>
・メイン画像
自由に画像を設定することが可能です。是非、貴社らしさを演出するオリジナル画像を設定してください。
※画像形式はpng,jpeg,jpg,gifのみ設定可能です。
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/c478b1a6dedb96603a486610161ab963.png)
* あらかじめ数種類の画像を用意しておりますのでそちらをご利用いただくことも可能ですが、ほかのお客さまも同じ画像を使用される場合がございますので、貴社らしさを演出しファンを創出していただくためにも、オリジナルの画像を設定されることを推奨いたします。オリジナルの画像を設定する際にはトリミング機能をお使い頂くことができます。
<トリミング>
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/45976e54c2a0161e4b281517bb6dc6d1.png)
【トリミング】ボタンをクリックするとトリミングした画像が設定されます。
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/64a92fe56602b4dc472005b48db437bc.png)
※「企業名」「説明文」「画像」を【表示しない】に設定すると、ヘッダ部(最小化時に表示される部分)は下記のようなシンプルなデザインとなります。
<最大化>
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/image-410.png)
<最小化>
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/8965e11c40405d284f303046a52773f1.png)
・アイコン(チャットボット)
チャットボット対応時のアイコンの画像を自由に設定することが可能です。
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/21e62c79e70488b36ebd70e07cafdde5-1.png)
・アイコン(オペレータ)
有人オペレータ対応時のアイコンを自由に画像を設定することが可能です。
またオペレータ毎に個別のアイコンを利用することも可能です。
(オペレータ毎のアイコン設定は「ユーザー管理」を参照下さい)
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/image-525.png)
<角の丸み>
ウィジェット上部の角の丸みを自由に編集することができます。
・目盛:最小
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/25ebb0159ad6255640eb495a28471325-1024x224.png)
・目盛:最大
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/e9d88376e3783ec01715295267f5ca93-1024x224.png)
<背景の影>
ウィジェットの背景に自由に影を付けることができます。
・目盛:最小
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/e044e2bb30f6ccf34e079089c2efab20-1024x224.png)
・目盛:最大
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/a755b7bb1b00ff1bccc40fb41e2f8a2a-1024x224.png)
3.最小化/閉じる
<最小化時のデザイン>
最小化時のウィジェットデザインを設定することができます。
シンプル表示しない | 全ての端末で、通常のウィジェットが表示されます。 |
---|---|
スマホのみシンプル表示する | スマートフォン端末のみ、ウィジェットが<トップタイトル>のみのシンプルな表示となります。 |
すべての端末でシンプル表示する | PC、タブレット、スマートフォン全ての端末でウィジェットが<トップタイトル>のみのシンプルな表示となります。 |
<閉じるボタン>
ウィジェットが閉じられた時の状態を設定することができます。
無効にする | ウィジェットは最大化、最小化のみの動きとなります。 |
---|---|
有効にする | サイト訪問者が表示中のウィジェットを[×]ボタンで自由に閉じることができます。 ウィジェットが閉じられた状態は下記より選択することができます。 小さなバナー表示:小さなバナーが表示されます。バナーへ表示するメッセージは自由に入力することが可能です。 *小さなバナー表示の場合、未読チャット数は表示されません。 小さなバナーの画像設定:[オリジナル画像を表示]を選択し、画像をアップロードすると、お好みの画像に変更することができます。 *小さなバナー表示の場合、未読チャット数は表示されません。 非表示:次回サイト訪問時までウィジェットが表示されなくなります。 |
<小さなバナー表示>
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/5dce86281926f7be8d87fe2dd84f2790.png)
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/arrow.png)
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/72ea58f3ccebb1dee0ebbe46790c9817.png)
<小さなバナーの画像設定:例>
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/5dce86281926f7be8d87fe2dd84f2790.png)
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/arrow.png)
![](https://wp.mediatalk.io/wp-content/uploads/2021/06/img01.png)
4.チャット設定
ウィジェットのチャット設定に関して説明します。
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/d449769ad9701c3754dfae6b76f4fe9a-1-1024x475.png)
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/2edd5bbb09b3f55980930e2f4366a664-1-1024x492.png)
<初期表示時の自由入力エリア>
初期表示時の自由入力エリアの設定をします。
表示する | 初期表示時にウィジェットの自由入力エリアを表示します。 サイト訪問者は自由にメッセージを送ることができます。 |
---|---|
表示しない | 初期表示時にウィジェットの自由入力エリアを非表示にします。 サイト訪問者は自由にメッセージを送ることができません。 |
<ラジオボタン選択動作>
消費者がラジオボタンをクリックしたときの操作を設定します。
選択された文字列が即時送信されます | ラジオボタンのメッセージがすぐに送信されます。 |
---|---|
選択された文字列がテキストエリアに入力されます | ラジオボタンのメッセージはテキストエリアに反映され、消費者が送信ボタンをクリックすると送信されます。 |
<消費者側送信アクション>
消費者がメッセージを送信するときの操作を設定します。
送信ボタン及びEnterキー(スマホの場合は改行ボタン) | テキストエリアの送信ボタン及びキーボードのEnterキーにてメッセージを送信します。 |
---|---|
送信ボタンのみ | テキストエリアの送信ボタンでのみメッセージを送信します。 |
<入室・退室時の表示>
入室・退室時の表示名を設定します。
担当者名を表示する | ユーザー情報、プロフィールの「チャット担当者名」に設定された名称を表示します。 ※「チャット担当者名」が設定されていない場合は、「ユーザー名」に設定された名称が表示されます。 |
---|---|
企業名を表示する | こちらの画面の「企業名」に設定された名称を表示します。 |
【担当者名を表示する】
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/ac0ce22642961bc77a766adc6fd6ba13.png)
【企業名を表示する】
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/2fa2225b3e2c9267eeacf82145866723.png)
<自動メッセージの見出し>
オートメッセージやSorryメッセージなど自動メッセージの見出しの設定をします。
企業名を表示する | オートメッセージやSorryメッセージなど自動メッセージの吹き出しに企業名を表示します。 |
---|---|
表示しない | 表示名を設定しません。 |
【企業名を表示する】
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/4ebf5c319eeb504d7e976a2d851e9cf2.png)
【表示しない】
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/828e7b411cd10ff15e849b7b59d3272a.png)
<有人メッセージの見出し>
有人メッセージの見出しを設定します。
担当者名を表示する | ユーザー情報、プロフィールの「チャット担当者名」に設定された名称を表示します。 ※「チャット担当者名」が設定されていない場合は、「ユーザー名」に設定された名称が表示されます。 |
---|---|
企業名を表示する | こちらの画面の「企業名」に設定された名称を表示します。 |
表示しない | 表示名を設定しません。 |
【担当者名を表示する】
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/f7df8872dcaf1cbd92bc17541f64bf70.png)
【企業社名を表示する】
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/51b93e0ddf664782c57ab1d7d2f09978.png)
【表示しないの場合】
<吹き出しデザイン>
チャットメッセージの吹き出しデザインを設定します。
【吹き出し型】
![](https://wp.mediatalk.io/wp-content/uploads/2018/05/吹き出し型-300x172.png)
【box型】
![](https://wp.mediatalk.io/wp-content/uploads/2018/05/BOX型-300x171.png)
*【BOX型】の場合のみ、吹き出しのカドを上/下から選択可能です。
(吹き出しのカド上)
(吹き出しのカド下)
<メッセージ表示時アニメーション>
アニメーションを有効にする | メッセージ表示時にアニメーションを付けることができます。 *サイト訪問者画面が対象となります。 |
---|
<チャット本文コピー>
サイト訪問者によるチャット本文のコピーを出来なくする | サイト訪問者がチャット本文をコピーできないように制御することができます。 |
---|
5.スマートフォン個別設定
スマートフォン端末向けのウィジェット設定に関して説明します。
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/624.png)
<ウィジェットの表示>
する | 全ての端末(PC、タブレット、スマートフォン)にウィジェットが表示されます。 |
---|---|
しない | スマートフォン端末のみ、ウィジェットが非表示となります。 |
<ウィジェットの表示制御>
スクロール中は非表示にする | スマートフォン端末にてページスクロール中はウィジェットが非表示となります。 (本設定を有効にしても最大化されたウィジェットは非表示にはなりません) |
---|
<ウィジェットの状態>
3段階:(最大化・最小化・小さなバナー) | ウィジェットを閉じる際、【最大化】【最小化】【小さなバナー】の3段階で表示されます。 |
---|---|
2段階:(最大化・小さなバナー) | ウィジェットを閉じる際、【最大化】【小さなバナー】の2段階で表示されます。 |
※スマホページの下段に重要なコンテンツ(CTAボタンなど)を配置されている場合「2段階」に設定頂くことを推奨します。
<小さなバナー表示位置>
PC、タブレット用の設定とは別に、小さなバナーの表示位置を
【右下】【左下】【右中央】【左中央】から選択いただけます。
「表示位置の調整を行う」を選択いただくと、表示位置をpx単位で調整できます。
※スマホページの下段に重要なコンテンツ(CTAボタンなど)を配置されている場合
「右中央」または「左中央」に設定頂くことを推奨します。
<小さなバナーのタイトル>
PC、タブレット用の設定とは別に、小さなバナー表示時のタイトルを設定できます。(15文字まで設定可)
<最大時のシンプル表示>
する | スマートフォン端末のみウィジェットが<トップタイトル>のみのシンプルな表示となります。 |
---|---|
しない | 全ての端末で同じデザインのウィジェットが表示されます。 |
例)シンプル表示【する】にした場合のスマートフォンで表示されるウィジェットデザイン
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/b52defe5e3ccab9198e992d81b8f4655-1.png)
<自動最大化の制御>
常に最大化しない | スマートフォン端末のみウィジェットを最大化する条件の設定が無効となります。 ※オートメッセージにてウィジェットを自動で最大化する設定を入れている場合、アクション実行時のウィジェット最大化は有効となります。 |
---|
<最大化表示サイズ>
スマートフォン縦向き時のウィジェット最大化表示サイズを設定することができます。
※横向き時は一律画面いっぱいに表示されます。
余白を残して表示する | ページの上部は確認できる程の大きさで表示します。 |
---|---|
画面いっぱいに表示する | ページ全体が隠れ画面いっぱいに表示します。 |
【余白を残して表示するの場合】
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/image-526.png)
【画面いっぱいに表示するの場合】
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/image-528.png)
電話ウィンドウ設定
こちらは、シェアリングプランをご契約中のお客様のみ設定可能となります。
<お問い合わせ先>
ウィジェットを導入したサイトからの電話問い合わせを受電する電話番号を入力します。
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/image-419.png)
<受付時間>
電話での受付時間(営業時間)を入力します。
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/image-420.png)
<ウィジェット本文>
ウィジェット本文に表示される説明文を入力します。
サイト訪問者にとって気軽に問い合わせしたくなるようなメッセージを入力しましょう。
![](https://mediatalk.medialink-ml.co.jp/wp/wp-content/uploads/image-421.png)
最後に[更新]ボタンをクリックしてください。
以上で画面共有プランをご契約中のお客様のウィジェット設定は完了です。