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

1. 1

   Crie o seu widget

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

2. 2

   Copie o seu excerto

   Na secção Adicionar a outro site, copie o excerto. Já traz o id do seu widget, a sua chave de incorporação e as definições do botão.

3. 3

   Cole-o antes da tag body de fecho

   Coloque-o no rodapé global do site ou na área de código personalizado e publique. O botão aparece no canto no carregamento seguinte.

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

Substitua WIDGET_ID e WIDGET_API_KEY pelos valores das definições do seu widget, ou copie simplesmente o excerto já pronto da app, que os preenche por si. A chave de incorporação é pública e limita-se a esse widget: não dá qualquer acesso à sua conta. A Prohost oculta a chave depois de a mostrar pela primeira vez, por isso use Rodar chave se precisar de um excerto 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 construtores de sites: Webflow, WordPress, Squarespace e Wix têm todos um espaço para código personalizado no rodapé.

data-hide-mobile conta apenas pela presença: qualquer valor, incluindo uma cadeia vazia, ativa-o. Todos os outros atributos são avaliados pelo valor, e data-sound em particular só reage ao valor exato em minúsculas on.

• O visitante tem de interagir primeiro com a página

  Os navegadores bloqueiam o áudio até alguém clicar, tocar ou escrever. Abrir o botão conta, e escrever na janela também — por isso quem enviou a mensagem que originou a resposta vai ouvi-la. Se mesmo assim o navegador bloquear, nada se parte: o contador de não lidas no botão é o sinal principal e o som é um extra.

• Nunca toca enquanto estão a ler

  Sem toque enquanto a janela está aberta e o separador em primeiro plano: a resposta já está no ecrã. Toca com a janela fechada ou com o separador 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 só toque

  Várias mensagens a chegar em conjunto produzem 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);
}

• webchat_session_startedA conversa passou a existir: o visitante enviou a primeira mensagem. O payload traz o conversationId.
• webchat_message_sentO visitante enviou uma mensagem.
• webchat_host_messageChegou uma resposta da sua equipa ou da sua IA. É isto que alimenta o contador de não lidas e, quando ativado, o som.

Útil em conjunto com data-hide-mobile: oculte o botão predefinido no telemóvel e abra a janela a partir de um botão seu. Os eventos só são reencaminhados quando vêm da incorporação da Prohost, nunca de outra origem.