こちらの記事は、WhatYaでどのような事ができるか？どう利用するか？を
仕様書としてまとめています。こちらの仕様を参考に、
プロダクトの導入や運用のヒントにしていただけれと思います。

項目

内容

Overview
（概要）

この資料とWhatYaの概要についての情報

Requirement
（前提条件）

WhatYaを導入する為に必要な前提条件

Function
（機能）

チャットボットの会話タイプや
ダッシュボード機能・ID連携・SNSとの連携機能

Implement
（導入）

タグ埋め込み/CSSなど、WhatYaを導入する際に必要な作業

FAQ
（よくある質問）

不明点を解消する為のヒント

WhatYaとは？

WhatYaとは「愉快性・役に立つ」というモットーから作られた
チャットサービスです。

ボットが文字だけで回答するだけではなく、多くのお客様が、
多彩な表現や機能を活用してデジタル接客を実現しています。

・多彩なメッセージタイプでの表現

・リストやチップボタンを利用した適切な回答への誘導

・有人とチャットボットを利用したハイブリットな接客の実現

・チャットに特化した傾向分析・CV計測

・レコメンドの様な表示の商品紹介機能
　（スペシャルタグ・アタッチメント）

※AIエンジンにはWatsonを利用しています。

自動応答と有人応答について

WhatYaは、AIチャットボットによる自動応対だけではなく、
有人応対も可能となります。

この連携により、自動応答と有人応答による、
ハイブリットな接客を実現しています。

※自動応答/有人応答の切り替えイメージ

WhatYaを導入する為に必要な前提条件となります。

対応ブラウザ

対応ブラウザは以下となります。

・Google Chrome (PC & mobile)
・Safari (PC & mobile)
・Firefox (PC)
・Microsoft Edge (PC)

Internet Explorerには対応していません。
※詳細はこちらをご確認下さい。
┗/wiki/spaces/CDLAB/pages/661553186

導入可能な環境

①以下JavaScript形式の、タグが埋め込める環境をご用意下さい。

<script src="https://whatya.solairo-api.com/xxxx/chat.js"</script>>
※xxxxの部分は導入企業様ごとに異なります。

②チャットボタン、チャットウインドウのデザインは、

・WebサイトのCSSで編集
・WhatYa管理画面の「カスタムCSS」から編集

どちらかのパターンにて、CSSを記載していただく事で
デザインを変更できます。
※弊社にてサンプルも用意しておりますのでご活用ください。
【カスタムCSS】CSSサンプル

③空色側のホワイトリストにドメイン許可がされていないと、
タグを埋め込んでもチャットボットへ接続ができません。

ドメイン(FQDN）の許可を行う場合は、
空色担当まで登録依頼をお願いします。

例：https://www.solairo.co.jp/

※ステージング環境をご利用の場合は
ステージング環境のドメインも合わせてお知らせください。

上記項目の詳細はこちらのガイドをご確認下さい。
┗ WhatYaデザインベンダー向け導入資料

※タグを埋め込むと、Webサイトの右下にチャットアイコンが表示されます

準備するもの

準備に必要なもの ※以下資料のp.5〜7を参照下さい。
┗ WhatYaデザインベンダー向け導入資料

変更可能なUI

空色担当から依頼をいただければ以下のUIを変更できます。
┗ 変更可能なUIについて　28ページ～
　WhatYaデザインベンダー向け導入資料
┗ 指定可能なid/class一覧　9ページ～
　WhatYaデザインベンダー向け導入資料
┗【WhatYa】チャットウィンドウ上の文言変更可能な箇所について
┗【WhatYa】自動OP接続機能はどんな機能か？

接客管理画面（OKSKY）との連携

WhatYaで使えるOKSKYの機能については、こちらをご確認下さい
┗【WhatYa】接客管理画面(OKSKY)と連携される機能

チャットボットの会話タイプやダッシュボード機能・ID連携・SNSとの連携機能について

init_bot

チャットボットを
開いたときの自動投稿文

init_botは、チャットボタンをクリックして、
チャットボットが起動した時、最初に表示される自動投稿文です。
テキストだけではなく、
様々なメッセージタイプを指定する事ができます。

※このinit_botは「list」で作成しています。

init_op

オペレーターに接続した
ときの自動投稿文

init_opは、有人接客に切り替えた時、表示される自動投稿文です。
テキストだけではなく、
色々なメッセージタイプを指定する事ができます。

※このinit_opは「text」で作成しています。

ボタン設定　
　＞　初期化メッセージ

WhatYa管理画面からボタンを設定する際に、
自由に自動投稿メッセージを変更することができます。
初期化メッセージ設定欄にて送信値を設定することで、
上記のinit_botやinit_op、その他自由に設定が可能です。

text

テキストのみの表示

※テキストの改行：〇

image

テキスト＋画像の表示

※テキストの改行：〇

list

選択式のリストの表示

※テキストの改行：〇
　ただしリスト内テキストの改行は×

string_string_chip

選択式のボタンの表示

※テキストの改行：〇

link image slider

リンク付きの複数画像をスライド式で表示

※テキストの改行：〇

item_image_slider

複数の画像をスライド式で表示

※テキストの改行：〇

telephone

電話番号のリンクの表示

※テキストの改行：×

mail

メールアドレスのリンクの表示

※テキストの改行：×

image card

テキスト＋リンク付きの画像の表示

※テキストの改行：×
※ただしカード内のテキストの改行は〇

youtube

動画（YouTube）のストリーミング再生

※テキストの改行：〇
※デフォルトで機能がオンになっています。
　YouTubeのプラグインを取得するため、
　ボタン表示時点で*.youtube.comにアクセスします。

youtube_slider

複数のYoutubeのサムネイルをスライド式で表示します。

※テキストの改行：〇

dialog

実装予定

markdown

実装予定

LINE
（LINE Messaging API）

WhatYaとLINEを連携し、LINE上でチャットのやりとりができます。

対応メッセージタイプ：
　∟対応メッセージタイプについては下記をご参照ください。
　　【WhatYa】LINE連携について

設定方法：
　詳細設定については、別途空色担当にご相談ください。

Facebook
（Facebook Messenger）

WhatYaとFacebook Messengerを連携し、Facebook Messenger上でチャットのやりとりができます。

対応メッセージタイプ：
　∟※準備中※

設定方法：
　∟※準備中※

API

WhatYaは公開したAPIをご用意しております。
チャット機能の一部を利用するためのAPI資料：
┗WhatYa APIs

※APIのみを利用して、WhatYaの機能(オペレーターと接続・会話）を利用する場合、会話を処理する別サーバー(UIや、メッセージ変換など)を必要とします。

この場合、通常の通信方式(WebSocket)とは異なり、Webhookを利用した連携接続となります。※詳細は別途ご相談ください。

ID連携（データ連携）

WhatYaは、Webサイトと簡易的にデータ連携する機能をご用意しております。

大きく分けて以下2つの事が出来るようになります。

・デバイスやブラウザが変わっても同じルームで会話が出来る
・ルームに連携した情報を表示させる。

※詳細設定については、別途ご相談ください。

FlightBoard

FlightBoardは2021年12月29日現在

チャットボタン利用統計のグラフや指標をご確認いただけます。

※詳細はこちらをご覧ください

チャット非表示機能

data-no-chat=”true” 属性を埋め込みタグに指定していただくことで、チャットボタンは非表示となります。

非表示タグが埋め込まれていれば、WhatYaよりTreasureDataへのデータ送信が可能になります。

利用例としては、サンクスページの様に、情報は取得したいが、
チャットボタンを表示させたくない場所などにご利用いただけます。

表示タグ例

<script src="https://whatya.solairo-api.com/XXX/chat.js"></script>

非表示タグ例 ※<scrptの後にdata-no-chat=”true” 属性を追加

<script data-no-chat="true" src="https://whatya.solairo-api.com/XXX/chat.js"></script>

WhatYaクライアントAPI

オペレーター接続時に、来訪者が見ている商品、もしくは見ているサイトの情報を、任意のメッセージとしてオペレーターに自動送信できます。

※詳細はこちらをご確認ください。また、導入の際はベンダー様にお問い合わせください。

バッジ機能

オペレーターからのメッセージの未読件数をチャットボタンにバッジとして表示します。

以下の条件を満たしているいずれかのタイミングで表示されます。
※常時、リアルタイムで表示更新保証がなされる機能ではございません。

• オペレーターへ接続中、かつ、チャットウィンドウを閉じていて（チャットボタンアイコン時）、オペレーターからの未読メッセージがある時。

もしくは

• ページが読み込まれた最初のタイミング（チャットボタンアイコン時）で、オペレーターからの未読メッセージがある時。

※詳細はこちらをご確認ください。

タグ埋め込み/CSSなど、WhatYaを導入する際に必要な作業

導入準備

空色側で下記をご準備いたします。
・WhatYa埋め込みタグ
・プレビュー画面
・接客管理画面（有人接客がある場合）

導入企業様には下記をご準備いただきます。
・自動応対時の設定
　┗チャットボットのアイコン画像
　┗チャットボットの表示名

・有人応対時の設定
　┗オペレーターのアイコン画像
　┗オペレーターの表示名
　　┗詳細設定は下記記事をご参照ください。
　　┗/wiki/spaces/WHAT1/pages/1553989741

・チャットを表示させたいURL

タグ埋め込み

チャットウィンドウを配置したいWebページに、タグを埋め込みを行って下さい。ただし、空色側のホワイトリストにドメイン許可がないものは、タグを埋め込んでもチャットボットへ接続ができません。

ドメインの許可を行う場合は空色担当へ登録依頼をお願いします。

登録は以下の様にFQDNをお知らせください。

例：https://www.solairo.co.jp/

※異なるドメインのステージング環境をご利用の場合は
ステージング環境のドメインも合わせてお知らせください。

タグ埋め込みの詳細については以下資料をご参照ください。
┗WhatYa_デザインベンダー向け資料

CSSによるデザイン変更

（プレビュー画面）

空色で「プレビュー画面」をご提供させていただきます。

この画面を利用してCSSのデザインテストが可能です。
左上にCSSを記載していただくと、右下の
チャットウインドウに結果が表示されます。

本番サイトへデザインを適用する前の事前テストなどに
ご利用下さい。

指定可能なid,classの詳細については以下記事をご参照ください。
┗【WhatYa】CSSで指定可能なid,classについて

※プレビュー画面はデザイン確認のためにご活用いただく画面です。そのため「CSS適用」を押しても本番環境のチャットウィンドウにデザインは反映されないのでご注意ください。

不明点を解消する為のヒント

チャットアイコンが表示されません。

チャットボタンが表示されない場合は、埋め込みタグの記述が間違っているなどが理由で、表示が無効になっている可能性があります。

よくある間違いとして以下が挙げられます。

• ダブルクォーテーション（”）が全角になっている（CMS等に貼り付けると全角になる場合があります）

• 後ろの</script>が抜けている

ログはどのような仕組みで保持されていますか？

WhatYaはローカルストレージを利用して、

• customer_uuid

• whatya_id

を管理しています。

このIDをサーバーに問い合わせることにより、ログをサーバーから取得して過去のやり取りの会話ログを表示させています。