Início rápido: um chat funcionando em cinco minutos

1. Obter a chave do site e inserir seu domínio

Na conta, em Projeto → Instalação, você encontra o código de incorporação com a chave do site. Em Origens permitidas, insira todos os domínios em que o chat deve funcionar (subdomínios estão incluídos: your-company.com cobre www.your-company.com e shop.your-company.com). O servidor do chat só aceita conexões desses domínios.

2. A única linha

Insira o código da conta antes de </body> ou no <head>:

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

O código da conta também contém data-rc-brand com a cor da marca, para que o botão do chat apareça logo na cor certa. Por isso, o melhor é copiá-lo sem alterações. Todos os atributos: Referência da tag script.

3. Ampliar sua Content Security Policy

Se o seu site define uma CSP, adicione:

script-src  https://cdn.reactive.chat;
connect-src wss://ws.reactive.chat https://ws.reactive.chat;
img-src     data: https:;

Por que as duas entradas de connect-src são necessárias: Segurança e CSP.

4. Verificar

Abra sua página com as ferramentas de desenvolvedor:

• Elementos: no final de <body> há <reactive-chat>.
• Rede: loader.js, depois (no máximo ao passar o mouse sobre o botão do chat) core.<hash>.js e uma conexão WebSocket com wss://ws.reactive.chat/rc_wss/ com código de status 101.
• Console: após o carregamento, ReactiveChat('getSession') retorna { sessionId, visitorId, tabId }.

Escreva uma mensagem de teste; ela aparece no painel de atendimento da conta. Se nenhuma conexão for estabelecida, veja Solução de problemas.

Variações

Por um gerenciador de tags: o carregador lê os atributos do seu próprio elemento <script>. Portanto, crie uma tag que insira um <script src> real com os atributos ou defina a configuração antes:

<script>
  window.ReactiveChatSettings = { siteKey: 'SITE_KEY', locale: 'en' };
</script>
<script src="https://cdn.reactive.chat/loader.js" async></script>

Sob uma CSP rigorosa, o script inline precisa de um nonce, que deve ser definido pelo gerenciador de tags.

Fornecer loader.js por conta própria: se você carrega o arquivo de um diretório seu, informe o endereço do chat explicitamente; caso contrário, o widget procura o servidor do chat no seu domínio, e nenhuma mensagem chega, sem que apareça uma mensagem de erro:

<script src="/js/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-ws-url="wss://ws.reactive.chat/rc_wss/"
        data-rc-cdn-base="https://cdn.reactive.chat/"
        async></script>

Com data-rc-cdn-base, o carregador continua buscando o núcleo correspondente em nossos servidores. Observação: uma cópia de loader.js não é atualizada; quando o núcleo muda, você precisa renová-la. Incorporar a partir de cdn.reactive.chat ou por um domínio próprio continua sendo o recomendado.

Domínios com terminação de duas partes (.co.uk, .com.au …) ao fornecer o arquivo por conta própria: sempre defina data-rc-ws-url explicitamente.

Aplicativos de página única: incorpore uma vez na estrutura do aplicativo; veja SPA e mudanças de página.

Aplicativos móveis: Aplicativos móveis.

Próximos passos

• Reconhecer usuários autenticados: ReactiveChat('identify', …) com assinatura do seu servidor — Identificar visitantes.
• Seus próprios botões e links: <a href="#rc-open">Help</a> — Abrir o chat por um link próprio.
• Reagir a eventos: ReactiveChat('on', 'message', …) — Eventos.
• Conectar seu backend: Webhooks, API do servidor, Dados de clientes.
• Aparência e comportamento: Personalização.