房客聊天， 就在您自己的网站上。

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 这一个精确取值。

• 访客得先和页面有过交互

  浏览器在有人点击、触摸或输入之前会拦截音频。打开按钮算交互，在面板里打字也算，所以发出那条引来回复的消息的访客是能听到的。即便浏览器还是拦下了播放也没关系：按钮上的未读角标才是主要提示，声音只是加分项。

• 对方正在阅读时绝不会响

  面板打开且标签页在前台时不会响，因为回复已经在屏幕上了。面板关闭或标签页在后台时会响。未读角标的规则略窄一些：只有面板关闭时才会出现。

• 连续多条回复只响一次

  多条消息一起到达时只给一次提示，而不是每条一次。

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 嵌入页的事件才会被转发，其他来源一律不转发。