Guest chat,
on your own site.

1. 1
   Create your widget

   Open the AI Chat Widget app in Prohost and set the name, greeting and launcher style your visitors will see.

2. 2
   Copy your snippet

   In the Add to another website section, copy the snippet. It already carries your widget id, embed key and launcher settings.

3. 3
   Paste it before the closing body tag

   Drop it into your site-wide footer or custom-code area and publish. The launcher appears in the corner on the next page load.

<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>

Replace WIDGET_ID and WIDGET_API_KEY with the values from your widget settings — or simply copy the ready-made snippet from the app, which fills them in for you. The embed key is public and scoped to that one widget: it carries no access to your account. Prohost hides the key after it is first shown, so use Rotate key if you need a fresh copyable snippet.

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

Works on most site builders — Webflow, WordPress, Squarespace and Wix all have a place for custom code in the site footer.

data-hide-mobile is presence-only: any value, including an empty string, switches it on. Every other attribute is matched on its value — data-sound in particular reacts only to the exact lowercase value on.

• The visitor has to interact with the page first

  Browsers block audio until someone clicks, taps or types. Opening the launcher counts, and so does typing in the panel — so a visitor who sent the message that produced the reply will hear it. If the browser blocks playback anyway, nothing breaks: the unread badge on the launcher is the main signal and the chime is a bonus.

• It never plays while they are reading

  No chime while the panel is open and the tab is in the foreground — the reply is already on screen. It plays when the panel is closed, or when the tab is in the background. The unread badge follows a slightly narrower rule: it only ever appears while the panel is closed.

• A burst of replies is one chime

  Several messages arriving together produce a single cue, not one per message.

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);
}

Useful together with data-hide-mobile: hide the default launcher on phones and open the panel from a button of your own instead. Events are relayed only when they come from the Prohost embed, never from any other origin.