Chat com hóspedes,
no seu próprio site.

1. 1
   Crie seu widget

   Abra o app Widget de Chat com IA no Prohost e defina o nome, a saudação e o estilo do botão que seus visitantes vão ver.

2. 2
   Copie seu trecho

   Na seção Adicionar a outro site, copie o trecho. Ele já vem com o id do seu widget, sua chave de incorporação e as configurações do botão.

3. 3
   Cole antes da tag body de fechamento

   Coloque no rodapé geral do site ou na área de código personalizado e publique. O botão aparece no canto no próximo carregamento da página.

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

Troque WIDGET_ID e WIDGET_API_KEY pelos valores das configurações do seu widget, ou simplesmente copie o trecho pronto do app, que já preenche os dois. A chave de incorporação é pública e vale só para aquele widget: ela não dá nenhum acesso à sua conta. O Prohost esconde a chave depois da primeira exibição, então use Girar chave se precisar de um trecho novo para copiar.

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

Funciona na maioria dos criadores de site: Webflow, WordPress, Squarespace e Wix têm um espaço para código personalizado no rodapé.

data-hide-mobile vale só pela presença: qualquer valor, inclusive uma string vazia, liga o atributo. Todos os outros são avaliados pelo valor, e data-sound em especial só reage ao valor exato em minúsculas on.

• O visitante precisa interagir com a página antes

  Os navegadores bloqueiam áudio até alguém clicar, tocar ou digitar. Abrir o botão conta, digitar na janela também — então quem mandou a mensagem que gerou a resposta vai ouvir. Se mesmo assim o navegador bloquear, nada quebra: o contador de não lidas no botão é o sinal principal e o som é um bônus.

• Nunca toca enquanto a pessoa está lendo

  Sem toque enquanto a janela está aberta e a aba em primeiro plano: a resposta já está na tela. Ele toca com a janela fechada ou a aba em segundo plano. O contador de não lidas segue uma regra um pouco mais estreita: só aparece com a janela fechada.

• Várias respostas seguidas, um toque só

  Várias mensagens chegando juntas geram um único aviso, e não um por mensagem.

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

Útil junto com data-hide-mobile: esconda o botão padrão no celular e abra a janela a partir de um botão seu. Os eventos só são repassados quando vêm da incorporação do Prohost, nunca de outra origem.