Na početnu stranicu

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

Qualquer link ou botão do seu site pode abrir o chat: a janela aparece ao lado do elemento clicado. Com texto preenchido, escolha de aba e, se você quiser, sem nenhuma bolha de chat.

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.