チャット画面を作らずに、自分のサイトにエージェントを置く
endue Liveの「Embed on your site」は、コード1行で自分のWebサイトの中にエージェントのチャットウィンドウを開きます。画面の隅のボタンにも、お問い合わせページの真ん中にも置けます。架空のパン屋のサイトを例に、アドレスの登録からコードの貼り付け、ウィンドウの置き場所選びまでをたどります。
自分のWebサイトに「何でも聞いてください」というウィンドウを付けたくなることがあります。ところが、自分で作るとなると手間がかかります。チャット画面を描き、回答が書かれていくのに合わせて表示し、スマートフォンの画面に対応させ、会話を保存しなければなりません。エージェントを作るより、ウィンドウを作るほうが大きな仕事になりがちです。
endue LiveのEmbed on your site（サイトへの埋め込み）を使うと、この仕事がコード1行で済みます。Studioでサイトのアドレスを登録し、表示されたコードをサイトに貼り付ければ完了です。ウィンドウの中で答えるのは、あなたがStudioで作ったエージェントそのものです。
サイトに開くウィンドウは、endue.liveのチャット画面と同じものです。まず雰囲気を知りたいときは、endue.live/@tinでTinに話しかけてみてください。
この記事では、町のパン屋さんを想定した架空の店「Haru Bakery」のWebサイトを例にします。店主は、営業時間、今日のパン、ケーキの注文方法を知っているエージェントをすでに作ってあります。
訪問者に見える画面
コードを貼り付けると、サイトの隅にボタンが表示されます。ボタンの文言と見た目は、あなたが選びます。
ボタンをクリックすると、その場でウィンドウが開きます。訪問者はページを離れずに質問でき、回答は書かれていくのに合わせて表示されます。スマートフォンでは、ウィンドウが画面いっぱいに広がります。
訪問者がほかのページに移っても、会話は引き継がれます。メニューを見ながら質問し、注文ページに移ってウィンドウをもう一度開くと、会話はそのまま残っています。
サイトに置く手順
1. Liveをオンにする
サイトへの埋め込みは、endue Liveの上で動きます。まず、StudioのLiveパネルでPublish on endue.liveをオンにします。Liveが初めてなら、先にendue Liveで、自分のエージェントを多くの人に使ってもらうをご覧ください。
2. サイトのアドレスを登録する
LiveパネルのEmbed on your siteの行で、Set upをクリックします。Turn on for sitesをオンにして、Allowed sites（許可するサイト）に自分のサイトのアドレスを追加します。
httpsで始まるサイトだけを追加できます。wwwなどのサブドメインも対象にするには、*.domainの形でもう1つ追加します。上の画面の2行目がその例です。- サイトは10個まで追加できます。
- 公開する前に自分のコンピューターで試すには、
localhostを追加します。
3. コードを貼り付ける
画面下部のCode to paste（貼り付けるコード）をコピーして、サイトの</body>の直前に貼り付けます。
<script src="https://endue.live/embed/v1.js" data-agent="haru-bakery" async></script>data-agentの後ろの値は、あなたのエージェントのハンドルです。Studioが自動で入れてくれるので、その行をそのままコピーしてください。サイトビルダーを使っている場合は、独自のコードを入れる欄に貼り付けます。たいていは「カスタムコード」や「HTML埋め込み」のような名前です。
4. 見た目を選ぶ
同じ画面で、ボタンの位置、アイコン、文言、ウィンドウをライトにするかダークにするかを選びます。右側のプレビューをデスクトップとスマートフォンで切り替えて、両方を確認してください。アクセントカラー、ウェルカムメッセージ、会話のスターターは、Customize pageと共通です。
Saveをクリックすると、1分以内にサイトに反映されます。あとで文言や色を変えても、コードを貼り直す必要はありません。
役に立つ場所に置く
配置は2種類あります。
Floating button（浮かぶボタン）は画面の隅に表示され、どのページからでも開けます。サイト全体の案内窓口に向いています。すべてのページに共通で入る場所に、コードを1回貼り付けます。
Inside the page（ページ内）は、ボタンなしで、ページの決まった場所にウィンドウをそのまま置きます。お問い合わせページやよくある質問の横のように、訪問者が質問をしに来る場所に向いています。配置を「Inside the page」に切り替えると、コードは2行になります。
<div data-endue-live="haru-bakery" style="height:600px"></div>
<script src="https://endue.live/embed/v1.js" data-agent="haru-bakery" async></script><div>はウィンドウを表示したい場所に、<script>は</body>の直前に置きます。ウィンドウの高さはheightの値で決まります。下は、Haru Bakeryのお問い合わせページです。左側によくある質問、右側にウィンドウを置いています。
ページごとに別のエージェントを置くこともできます。注文ページには注文を手伝うエージェントを、採用ページには募集中の職種を説明するエージェントを置く、といった使い方です。エージェントごとにLiveをオンにしてサイトを登録し、それぞれのコードを該当するページに貼り付けます。
開くのはあなたのサイトだけ
貼り付けたコードは、誰でも読めます。誰かがそれをコピーして自分のサイトに貼ったら、どうなるでしょうか。何も起きません。ウィンドウが開くのはオーナーが登録したサイトだけで、それ以外のサイトではボタンも表示されません。
訪問者との会話でエージェントにできることは、endue.liveの場合とまったく同じです。承認が必要な操作は実行されず、オーナー個人のメモリも読めません。1人が1分間に送れるメッセージ数にも上限があります。利用量は、オーナーのプランの利用枠から引かれます。
置いたあとに見るところ
サイトでの会話も、エージェントの会話一覧のLive visitorsに集まります。お客さまが何を尋ねているかを読み、よくある質問は指示と会話のスターターに反映します。どれだけ使われたかは、StudioのUsageタブにあるLiveの行で確認できます。
ウィンドウが表示されないとき
- 登録したアドレスと同じか確認します。
haru-bakery.exampleだけを登録していて、サイトがwww.haru-bakery.exampleで開く場合、ウィンドウは表示されません。*.haru-bakery.exampleを追加してください。 - スイッチが2つともオンか確認します。Liveパネルの「Publish on endue.live」と、Embed on your siteの「Turn on for sites」です。
- 保存したか確認します。保存して1分ほど待ってから、ページを再読み込みします。
- ブラウザのコンソールを開きます。ウィンドウを表示できなかった理由が、
[endue Live]で始まる1行で記録されています。 - サイトにCSPがある場合は、設定画面の「If your site has a CSP」を開きます。そこに表示される3行を、サイトのポリシーに追加してください。
- endue.liveのアドレスを自分でiframeに入れないでください。endue.liveのページは、ほかのサイトのフレームの中では読み込まれません。上のコードを使ってください。
はじめましょう
コードを1行貼り付けるのにかかる時間は、数分です。浮いた時間は、エージェントがお客さまに何をどう伝えるかを磨くことに使ってください。
- まずウィンドウの雰囲気を見る：endue.live/@tin
- Liveが初めてなら：endue Liveで、自分のエージェントを多くの人に使ってもらう