ゲストチャットを、 自社サイトにも。

1. 1

   ウィジェットを作成する

   ProhostでAIチャットウィジェットのアプリを開き、訪問者に表示される名前、あいさつ文、ボタンのスタイルを設定します。

2. 2

   スニペットをコピーする

   別のウェブサイトに追加のセクションでスニペットをコピーします。ウィジェットID、埋め込みキー、ボタン設定はすでに入っています。

3. 3

   閉じる body タグの直前に貼る

   サイト全体のフッターかカスタムコード欄に入れて公開します。次回のページ読み込みで、隅にボタンが表示されます。

<script
  src="https://app.prohost.ai/webchat.js"
  data-widget="WIDGET_ID"
  data-api-key="WIDGET_API_KEY"
  data-position="bottom-right"
  data-launcher-color="#4F46E5"
  data-launcher-icon="chat"
  data-sound="on"
  async></script>

WIDGET_ID と WIDGET_API_KEY はウィジェット設定の値に置き換えてください。アプリから完成済みのスニペットをコピーすれば、値は自動で入ります。埋め込みキーは公開情報で、そのウィジェット専用です。アカウントへのアクセス権は一切ありません。Prohostは初回表示後にキーを隠すため、コピーできる新しいスニペットが必要なときはキーを再発行してください。

<script
  src="https://app.prohost.ai/webchat.js"
  data-widget="WIDGET_ID"
  data-api-key="WIDGET_API_KEY"
  async></script>

主要なサイトビルダーで動作します。Webflow、WordPress、Squarespace、Wixのいずれにも、フッターにカスタムコードを入れる場所があります。

data-hide-mobile は有無だけで判定され、空文字を含むどんな値でも有効になります。ほかの属性は値で判定され、特に data-sound は小文字の on という完全一致の値にのみ反応します。

• 訪問者が先にページを操作している必要があります

  ブラウザは、クリック・タップ・入力のいずれかが行われるまで音声をブロックします。ボタンを開く操作もパネル内での入力も操作に含まれるため、返信のきっかけとなるメッセージを送った訪問者には音が聞こえます。それでもブラウザが再生をブロックした場合でも問題はありません。ボタン上の未読バッジが主要な合図で、音は補助的なものです。

• 読んでいる間は鳴りません

  パネルが開いていてタブが手前にある間は鳴りません。返信はすでに画面に表示されているためです。パネルが閉じているか、タブが背面にあるときに鳴ります。未読バッジはこれよりわずかに狭い条件で、パネルが閉じているときにだけ表示されます。

• 連続した返信でも音は1回

  複数のメッセージがまとめて届いた場合も、1件ごとではなく1回だけ通知します。

function wireUpWebchat() {
  window.ProhostWebchat.on('webchat_host_message', (event) => {
    console.log(event.type);
  });

  document.querySelector('#my-chat-button')?.addEventListener('click', () => {
    window.ProhostWebchat.open();
    // window.ProhostWebchat.close() collapses it again.
  });
}

if (window.ProhostWebchat) {
  wireUpWebchat();
} else {
  // src*= rather than src$= — the tag may carry a cache-busting query string.
  document
    .querySelector('script[src*="/webchat.js"]')
    ?.addEventListener('load', wireUpWebchat);
}

• webchat_session_started会話が作成されました。訪問者が最初のメッセージを送信した時点です。payload には conversationId が入ります。
• webchat_message_sent訪問者がメッセージを送信しました。
• webchat_host_messageチームまたはAIからの返信が届きました。未読バッジと、有効な場合は音を動かします。

data-hide-mobile と組み合わせると便利です。スマートフォンでは既定のボタンを隠し、代わりに自前のボタンからパネルを開けます。イベントはProhostの埋め込みから届いた場合にのみ中継され、ほかのオリジンからは中継されません。