Widget de chat web

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

Uma única tag script coloca uma bolha de chat no seu site. Os hóspedes escrevem-lhe a partir daí e cada conversa chega à mesma caixa de entrada da Prohost onde estão os seus tópicos do Airbnb e do Vrbo, com a sua IA a responder primeiro.

Uma tag script
Respostas na sua caixa de entrada
o-seu-site.com
Fale connosco
Costuma responder em poucos minutos
É possível fazer check-out mais tarde no domingo?
Sim, podemos manter o alojamento até às 14h.

O que o widget faz

É o mesmo chat com hóspedes que corre no seu site de reserva direta da Prohost, preparado para qualquer site que controle.

Vive no seu site

Cole uma tag script no rodapé do site ou na área de código personalizado. Sem plugin, sem passo de build, nada para alojar.

Uma caixa de entrada para tudo

As conversas do chat web chegam à caixa da Prohost ao lado dos tópicos das OTAs, por isso a sua equipa responde a tudo num só sítio.

A sua IA responde primeiro

A mesma IA que trata das suas mensagens com hóspedes responde também aqui, com o conhecimento dos seus alojamentos, e passa para uma pessoa quando faz sentido.

Instale em três passos

Copie o excerto nas definições do seu widget, cole-o no seu site e publique.

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

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>

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.

A versão mais curta que funciona

Só o id do widget e a chave de incorporação são obrigatórios. Se deixar os atributos do botão de fora, ele assume os seus próprios valores predefinidos — a bolha índigo e o ícone de chat — independentemente do que escolheu na app. A janela continua a seguir as suas definições.

html
<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é.

Referência de atributos

Todos os atributos data-* que o carregador lê. Tudo o resto na tag script é ignorado.

AtributoValoresPredefiniçãoO que faz
data-widgetO id do seu widgetObrigatórioA que widget pertence a conversa.
data-api-keyA sua chave pública de incorporaçãoObrigatórioA chave pública de incorporação desse widget. Limita-se ao widget e não dá acesso à conta.
data-positionbottom-right · bottom-leftbottom-rightEm que canto ficam o botão e a janela de chat.
data-launcher-colorCor hexadecimal#4F46E5Cor de preenchimento da bolha do botão.
data-accentCor hexadecimalNenhumNome antigo de data-launcher-color. Só é usado quando data-launcher-color não existe.
data-launcher-iconchat · lettermarkchatO símbolo no botão: uma bolha de chat ou o monograma branco da Prohost.
data-hide-mobileApenas presençaDesligadoOculta o botão abaixo de 768px. A janela continua a poder ser aberta a partir de um botão seu — veja abaixo.
data-soundonDefinição do widgetLiga o som de resposta nesta incorporação, independentemente da definição do widget. Veja abaixo.

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.

Como funciona o som de resposta

Um toque curto e discreto soa na janela de chat quando chega uma resposta e o visitante está a olhar para outro lado.

Definição

Reproduzir som para os hóspedes

O interruptor nas definições do seu widget, e é ele que manda. Aplica-se a este widget em todo o lado onde corre, incluindo no seu site de reserva direta alojado pela Prohost. Altere-o quando quiser, sem mexer no código.

Atributo

data-sound="on"

Uma substituição explícita na tag script que colou. Só consegue ligar o som: não existe um valor para o desligar. Existe para que os excertos colados antes de a definição existir continuem a funcionar, e para poder forçar o som num site específico.

Qualquer um dos dois chega

O toque soa se a definição estiver ligada ou se o atributo tiver exatamente o valor on. O excerto que a app gera mantém os dois alinhados: inclui o atributo enquanto a definição está ligada e deixa-o de fora quando está desligada.

Para silenciar em todo o lado, desligue a definição e volte a copiar o excerto para o seu site. Um atributo já colado continua a sobrepor-se à definição, e isso é intencional.

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

Controle-o a partir da sua própria página

O carregador expõe um pequeno barramento de eventos em window.ProhostWebchat, para que o seu site possa abrir a janela e reagir ao que lá acontece.

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

Faça a gestão a partir da app

Nome, saudação, cor de destaque da janela e som de resposta estão na app Widget de Chat com IA, e todos os sites que correm o seu widget acompanham essas alterações sozinhos. A cor e o ícone do botão são diferentes: estão no excerto, por isso volte a copiá-lo depois de os alterar — tal como depois de rodar a sua chave de incorporação.