Чат с гостями —
на вашем сайте.

1. 1
   Создайте виджет

   Откройте приложение AI-виджет чата в Prohost и задайте имя, приветствие и оформление кнопки, которую увидят посетители.

2. 2
   Скопируйте сниппет

   В разделе Добавить на другой сайт скопируйте сниппет. В нём уже есть идентификатор виджета, ключ встраивания и настройки кнопки.

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

Удобно вместе с data-hide-mobile: скройте стандартную кнопку на телефонах и открывайте окно своей собственной. События передаются только если пришли из встраивания Prohost, и никогда из другого источника.