网页聊天组件

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

一行 script 标签就能在您的网站上放一个聊天气泡。房客从那里给您留言，每段对话都会进入与 Airbnb、Vrbo 相同的 Prohost 收件箱，并由您的 AI 先行回复。

一行 script 标签
回复进入收件箱
查看代码打开组件应用
your-site.com
在线咨询
通常几分钟内回复
周日可以延迟退房吗？
可以，我们能为您保留到下午两点。

这个组件能做什么

它就是您 Prohost 直订网站上运行的那套房客聊天，只是打包成了可以放到任何您自己网站上的形式。

跑在您自己的网站上

把一行 script 标签粘贴到网站页脚或自定义代码区即可。不用插件、不用构建，也没有需要您自己托管的东西。

所有消息一个收件箱

网页聊天的对话会和各 OTA 的会话一起进入 Prohost 收件箱，团队在一个地方就能回完所有消息。

AI 先来回复

负责房客消息的同一个 AI 在这里也会回复，用的是您房源的资料，需要时再交给真人接手。

三步完成安装

在组件设置里复制代码，粘贴到网站，然后发布。

  1. 创建您的组件

    在 Prohost 里打开 AI 聊天组件应用，设置访客会看到的名称、问候语和按钮样式。

  2. 复制您的代码

    在添加到其他网站这一区域复制代码。里面已经带上了您的组件 ID、嵌入密钥和按钮设置。

  3. 粘贴到 body 结束标签之前

    放进全站页脚或自定义代码区，然后发布。下次加载页面时，按钮就会出现在角落。

html
<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 在首次展示后会隐藏密钥，如果需要一份可复制的新代码，请使用轮换密钥。

能跑起来的最短写法

只有组件 ID 和嵌入密钥是必填的。省略按钮相关的属性时，无论您在应用里选了什么，按钮都会使用自带的默认值：靛蓝色气泡和聊天图形。面板本身仍然跟随您的设置。

html
<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-* 属性。script 标签上的其他内容都会被忽略。

属性取值默认作用
data-widget您的组件 ID必填这段对话属于哪个组件。
data-api-key您的公开嵌入密钥必填该组件的公开嵌入密钥。仅对该组件有效，不含任何账户访问权限。
data-positionbottom-right · bottom-leftbottom-right按钮和聊天面板停在哪个角落。
data-launcher-color十六进制颜色#4F46E5按钮气泡的填充颜色。
data-accent十六进制颜色无data-launcher-color 的旧名称。只有在缺少 data-launcher-color 时才生效。
data-launcher-iconchat · lettermarkchat按钮上的图形：聊天气泡，或白色的 Prohost 字母标。
data-hide-mobile仅看是否存在关闭在小于 768px 时隐藏按钮。面板仍可以从您自己的按钮打开，见下文。
data-soundon组件设置无论组件设置如何，都为这次嵌入打开回复提示音。见下文。

data-hide-mobile 只看有没有写：任何取值，包括空字符串，都会把它打开。其他属性都按取值判断，其中 data-sound 只认小写的 on 这一个精确取值。

回复提示音的工作方式

当回复到达而访客正在看别处时，聊天面板里会响起一声短促、克制的提示音。

设置

为房客播放提示音

组件设置里的开关，也是最终依据。它对这个组件生效的所有场景都适用，包括由 Prohost 托管的直订网站。随时可改，不用动代码。

属性

data-sound="on"

写在您粘贴的 script 标签上的显式覆盖。它只能把提示音打开，没有用来关闭的取值。它的存在是为了让设置上线之前粘贴的代码继续可用，也方便您在某个特定网站上强制打开提示音。

两者有其一即可

只要设置已打开，或者属性的值正好是 on，提示音就会响。应用生成的代码会让两者保持一致：设置打开时带上该属性，关闭时则不写。

想在所有地方静音，请关闭设置并把代码重新复制到网站上。已经粘贴的属性会继续覆盖设置，这是刻意的设计。

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

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

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

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

  • 连续多条回复只响一次

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

从您自己的页面来驱动

加载脚本会在 window.ProhostWebchat 上暴露一个小型事件总线，您的网站可以据此打开面板，并对面板里发生的事情做出反应。

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

在应用里统一管理

名称、问候语、面板强调色和回复提示音都在 AI 聊天组件应用里，所有装了您组件的网站会自动跟着变。按钮的颜色和图标不一样：它们写在代码里，改完之后要把代码重新复制一遍，就像轮换嵌入密钥之后一样。

打开组件应用回到属性列表