O botão do chat: formato, tamanho, ícone, rótulo e posição

O launcher é o botão no canto inferior que os visitantes usam para abrir o chat. Você o configura em /app/projects/{id}, na aba Aparência, seção Marca. Uma prévia ao vivo, Este é o seu botão do chat, mostra cada alteração imediatamente. Você salva com Salvar, e a alteração chega aos visitantes em até um minuto.

A cor do botão é a sua cor primária; veja Cores, fonte e tema.

Modelos do botão do chat

20 combinações prontas, por exemplo “Assistente virtual – Responde em 2 min”, “Tem uma pergunta?”, “Atendimento ao cliente – Seg–Sex 8h–18h” ou “Assistente de IA – Respostas em segundos”. Um clique preenche formato, ícone, rótulo, segunda linha, exibição e tamanho. Suas cores permanecem iguais; nada é salvo até você pressionar Salvar. Depois, ajuste os textos.

Os campos

• Formato — círculo (padrão), arredondado, quadrado, balão ou folha. No balão, um canto pontudo aponta para o canto da tela. Na folha, dois cantos opostos são pequenos.
• Tamanho (px) — de 44 a 72, padrão 56. 44 é a menor área que ainda permite toque confiável.
• Tamanho no celular (px) — de 40 a 72. Vazio significa 48 px, ou menos se o tamanho acima for menor.
• Ícone — balão de fala (padrão), ponto de interrogação, headset, brilho ou sem ícone (só texto). Sem ícone, o botão precisa de rótulo e da exibição sempre. Caso contrário, o widget mostra o balão de fala.
• Rótulo — texto visível ao lado do ícone, com no máximo 40 caracteres. Vazio significa só o ícone.
• Segunda linha — uma segunda linha menor abaixo do rótulo, com no máximo 60 caracteres. Sem rótulo, fica invisível.
• Exibição — quando o rótulo fica visível:
• sempre (padrão),
• só ao passar o mouse — apenas o ícone; o rótulo se expande ao passar o mouse ou receber foco pelo teclado. Em dispositivos de toque, fica só o ícone.
• só em telas grandes — rótulo apenas a partir de 481 px de largura; abaixo disso, só o ícone,
• Só pelos seus próprios links (sem ícone de chat) — não há botão do chat; veja abaixo.

Rótulo por idioma

Rótulo e segunda linha do formulário valem em todos os idiomas. Se quiser textos diferentes por idioma, insira-os em Textos e formulários → Textos próprios, com as chaves launcher.text e launcher.subtext. Um valor ali tem prioridade sobre os campos daqui. Mais em Textos e idiomas.

Chat sem botão

Com a exibição Só pelos seus próprios links (sem ícone de chat), nenhum botão aparece. Os visitantes abrem o chat pelos seus links ou botões:

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

Coloque pelo menos um link assim em cada página em que o chat deve estar acessível. Depois, copie novamente o código de incorporação em Instalação: o novo já não contém a cor da marca, para que o botão não apareça por um instante ao carregar a página.

Enquanto o widget não conseguir obter a configuração do servidor, por exemplo sem conexão ou em uma primeira visita antes do consentimento de cookies, o botão ainda aparece como proteção. Se nunca puder aparecer, adicione também ao código:

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

data-rc-hide-launcher sempre se aplica, qualquer que seja a configuração da conta. Sem botão do chat, também não há balões de tooltip junto a ele. Todas as formas de abrir o chat por elementos próprios, com texto preenchido e escolha de aba, estão descritas em Abrir o chat por um link ou botão próprio.

Em vez de um link, você também pode transformar um elemento existente na página em gatilho. data-rc-launcher-selector recebe um seletor CSS:

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

Posição e espaçamento

Lado, espaçamento e nível de sobreposição são definidos no código de incorporação. A conta não tem campos para eles.

• data-rc-position — right (padrão) ou left.
• data-rc-offset — distância da borda em pixels como JSON, padrão {"x":20,"y":20}. O widget acrescenta áreas seguras, como o recorte da tela do iPhone.
• data-rc-z-index — nível de sobreposição, padrão 2147483000. Reduza se um elemento seu precisar ficar acima do chat.

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-position="left"
        data-rc-offset='{"x":24,"y":96}'
        async></script>

Os mesmos campos também funcionam como position, offset e zIndex por window.ReactiveChatSettings ou ReactiveChat('boot', …). Veja Integração técnica.

Desviar de barras

Se a página tiver uma barra fixa na borda inferior, como um banner de cookies, barra do carrinho ou navegação no celular, o botão do chat se move automaticamente para cima dela, com 12 px de espaço. Ele mede novamente quando a página muda. Elementos que ocupam mais de 40 % da altura da janela contam como sobreposição. Ele não desvia deles.

Você pode desativar isso no código de incorporação:

data-rc-avoid-overlap="false"

Botão do chat com ícone próprio

Um ícone totalmente personalizado funciona no código pela marca: launcher.icon recebe um SVG inline ou endereço data: e tem prioridade sobre o ícone escolhido.

ReactiveChat('setBrand', {
  launcher: { shape: 'bubble', label: 'Ask us', icon: 'data:image/svg+xml,…' }
});

Observação: uma marca com campos assim no código de incorporação (data-rc-brand) prevalece sobre as configurações da conta nesta página. Veja Cores, fonte e tema.

No celular

Abaixo de 481 px de largura (e em celulares na horizontal com até 480 px de altura), vale o tamanho para celular. Com a exibição só em telas grandes, o botão mostra apenas o ícone ali. Quando o visitante abre o chat, a janela ocupa a tela inteira e o botão recua.

Se o botão do chat não estiver como esperado

• Nenhum botão visível: a exibição está em Só pelos seus próprios links ou data-rc-hide-launcher="true" está definido no código? O projeto está pausado?
• O botão aparece mesmo com “Só pelos seus próprios links”: o widget ainda não recebeu a configuração do servidor (fallback). Adicione também data-rc-hide-launcher="true".
• O balão de fala aparece mesmo sem ícone: sem ícone, você precisa de rótulo e da exibição sempre.
• As alterações não chegam: há um data-rc-brand no código com rótulo, ícone ou outros campos adicionais? Nesse caso, o código prevalece.