Abrir o chat por um link ou botão próprio

Além da bolha de chat no canto, seus visitantes também podem abrir o chat por um link ou botão no seu site, por exemplo, “Ajuda e suporte” na barra lateral ou “Dúvida sobre meu plano” na página de preços. A janela do chat abre logo ao lado desse elemento.

Não é necessário código extra: basta o código de incorporação normal de Incorporar o widget. Você também encontra um exemplo para copiar na conta, em Projeto → Incorporar → Abrir o chat por um link próprio.

O caso mais simples

Um link que aponta para #rc-open:

<a href="#rc-open">Help & support</a>

Ou um botão com o atributo data-rc-open:

<button type="button" data-rc-open>Open chat</button>

data-rc-open funciona em qualquer elemento, não apenas em botões. Além de #rc-open, o widget também aceita #reactive-chat como destino de link.

O clique conta mesmo que o widget ainda não tenha terminado de carregar: a janela abre assim que estiver pronta.

Onde a janela aparece

• À direita do elemento, se houver espaço suficiente; caso contrário, à esquerda. O topo da janela fica alinhado com o elemento.
• Sempre totalmente visível: a janela permanece dentro da área visível e acompanha o elemento quando a página rola ou a janela do navegador é redimensionada.
• Em telas estreitas (menos de 480 pixels de largura, ou seja, a maioria dos smartphones), o chat abre em tela cheia, como de costume. Não há espaço ao lado do elemento.
• Como painel lateral: se a janela do chat estiver configurada como painel lateral de altura total em Aparência, ela abre ali, não ao lado do elemento.
• Se o chat já estiver aberto, a janela se move para o último link clicado.
• Quando o chat fecha (inclusive com a tecla Escape), o foco do teclado volta para o link ou botão que o abriu.

Para abrir a janela na posição habitual no canto, use data-rc-open="corner". data-rc-anchor="none" faz o mesmo:

<button type="button" data-rc-open="corner">Open chat</button>

Preencher previamente o campo de mensagem

Com data-rc-message, uma frase já aparece no campo de mensagem quando o chat abre. Ela não é enviada: o visitante pode completá-la, alterá-la ou apagá-la e faz o envio por conta própria.

<button type="button" data-rc-open data-rc-message="I have a question about my plan">
  Question about my plan
</button>

São usados até 200 caracteres. Para isso, o chat muda para a aba da conversa.

Escolher uma aba

Se seu chat tiver várias abas, data-rc-tab determina qual fica em primeiro plano ao abrir:

• msg – a conversa,
• home – a tela inicial,
• help – os artigos de ajuda.

<a href="#rc-open" data-rc-tab="help">Browse help articles</a>

Se seu chat não tiver a aba indicada (por exemplo, help sem artigos de ajuda), ele simplesmente abre como de costume.

Abrir pelo seu próprio JavaScript

As mesmas opções estão disponíveis por chamada. anchor é o elemento ao lado do qual a janela deve aparecer; message e tab são opcionais:

document.querySelector('#my-button').addEventListener('click', function (ev) {
  ReactiveChat('open', {
    anchor: ev.currentTarget,
    message: 'I have a question about my plan',
    tab: 'msg'
  });
});

Sem anchor, a janela abre na posição habitual. ReactiveChat('open') sem opções se comporta como antes. Se o próprio elemento contiver data-rc-message ou data-rc-tab, esses valores também se aplicam à chamada; o que você passar explicitamente na chamada tem prioridade.

Se seu código puder ser executado antes de o código de incorporação carregar, coloque esta linha antes dele. As chamadas ficam na fila e são executadas assim que o widget estiver pronto:

window.ReactiveChat = window.ReactiveChat || function () { (window.ReactiveChat.q = window.ReactiveChat.q || []).push(arguments); };

Sem nenhuma bolha de chat

Se o chat só deve ser acessível pelos seus próprios links, como “Ajuda e suporte” na barra lateral, há duas formas.

Na conta: em Projeto → Aparência → Marca, defina Exibição como Só pelos seus próprios links (sem ícone de chat) e salve. A configuração entra em vigor sem alterações no site. Mesmo assim, copie novamente o código de incorporação em Projeto → Instalação depois: o novo código não contém mais a cor da sua marca, para que o ícone do chat não apareça brevemente durante o carregamento. Enquanto o widget não conseguir obter a configuração do servidor, por exemplo, sem conexão ou na primeira visita antes de o visitante aceitar cookies, o ícone ainda aparece como garantia de acesso ao chat.

No código de incorporação: se o ícone nunca deve aparecer, oculte a bolha de chat com data-rc-hide-launcher="true" no código de incorporação. Esse atributo sempre se aplica, independentemente da configuração da conta:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-hide-launcher="true"
        async></script>

Nesse caso, garanta que toda página na qual os visitantes devem conseguir acessar o chat tenha pelo menos um desses links.

Solução de problemas

• Clicar só adiciona #rc-open ao endereço: o widget não está incorporado nesta página ou não carregou (por exemplo, sem consentimento). Verifique se o código de incorporação está presente.
• A janela abre no canto em vez de ao lado do link: há data-rc-open="corner" ou data-rc-anchor="none" no elemento? A janela do navegador tem menos de 480 pixels de largura? A janela do chat está configurada como painel lateral?
• O texto não aparece no campo de mensagem: o atributo se chama data-rc-message e precisa estar no próprio elemento clicado.

As outras configurações do código de incorporação estão descritas em Incorporar o widget. Como mostrar um card com sua própria oferta dentro do chat está explicado em O card promocional no chat.

Leia mais na documentação

Em detalhes: Referência da tag script e API JavaScript. Todos os capítulos estão na documentação.