Incorporar o widget

A versão curta

Coloque esta linha no cabeçalho da sua página e substitua SITE_KEY pela sua chave:

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

É só isso. O carregador tem 3,48 kB e só busca o núcleo quando o navegador tem tempo ou quando o visitante toca no botão do chat.

Se você hospedar loader.js por conta própria, precisará de mais uma linha

Algumas pessoas preferem carregar o script de seu próprio diretório em vez da nossa rede de distribuição, por causa de uma política, de um ambiente de testes ou simplesmente por hábito. Isso funciona, mas você precisa informar explicitamente a conexão do chat:

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

Por quê: sem essa informação, o widget deduz o endereço a partir do local de onde o script veio. Se foi do seu domínio, ele procura o chat lá também, e não encontra nada.

E é difícil perceber a falha. O botão do chat aparece, a janela abre, a cor e o idioma estão certos, tudo parece pronto. Só que nenhuma mensagem chega. Não há mensagem de erro: a conexão continua tentando em segundo plano, e é justamente isso que esconde o problema. Apenas o console do navegador mostra o nome do host que está procurando em vão.

O valor acima é o mesmo para todas as contas conosco. Você só informa um valor próprio se operar o servidor por conta própria.

Por um subdomínio do seu próprio site

Se o chat precisar funcionar como first-party por um subdomínio próprio (por exemplo, chat.your-company.com em vez de cdn.reactive.chat), a configuração do proxy está descrita no guia de domínio próprio. Sua conta passa a mostrar o trecho de código correspondente.

Quando os WebSockets estão bloqueados

Se uma rede não permitir WebSockets, por exemplo, por estar atrás de um proxy corporativo, o chat continuará automaticamente por HTTPS comum. Para isso, sua Content Security Policy precisa permitir o endereço https:// abaixo, além do endereço wss://. Quando o fallback entra em ação e como forçá-lo para testes estão descritos em Fallback HTTP.

Abrir o chat pelos seus próprios links e mostrar um card promocional

Qualquer link ou botão da sua página pode abrir o chat, com a janela aparecendo logo ao lado: Abrir o chat por um link ou botão próprio. Como mostrar no chat um card com sua própria oferta, como seu plano pago, está descrito em O card promocional no chat.

Incorporar automaticamente o texto de privacidade

Um pequeno elemento na sua página de política de privacidade mostra o texto correspondente sobre o chat, sempre de acordo com as configurações do projeto e no idioma da página: Incorporar automaticamente o texto de privacidade.

Por que não há script inline

O formato usual oferecido pelos concorrentes é um <script> inline. Com uma Content Security Policy rigorosa sem unsafe-inline, ele é bloqueado antes que uma única linha seja executada. O formato com atributos acima não precisa de script inline.

O que sua política também precisa permitir:

• script-src: o host de distribuição, aqui cdn.reactive.chat
• connect-src: o endereço WebSocket, aqui wss://ws.reactive.chat
• connect-src: o mesmo endereço também com https:// também, aqui https://ws.reactive.chat – o formulário offline e o fallback HTTP o utilizam quando um proxy corporativo bloqueia WebSockets

As configurações na tag script

1. data-rc-site-key — obrigatório. Sem ele, nada é iniciado, e isso é intencional.
2. data-rc-locale — de, en ou pl. Se não for informado, o navegador decide.
3. data-rc-brand — a cor da sua marca. A cor do texto é recalculada até ficar legível.
4. data-rc-ws-url — obrigatório quando você não carrega loader.js de cdn.reactive.chat. Veja a seção acima.

Todo o restante está na visão geral dos recursos e na página de preços.

Mais detalhes na documentação

Passo a passo: Início rápido. Todos os atributos da tag script com tipo e valor padrão: Referência da tag script. Todos os capítulos estão na documentação.