Bate-papo ao vivo no site

Configurações de chat ao vivo no site explicadas

Passo a passo para criar a caixa de entrada de site: adicionar caixa de entrada, escolher o canal Site, preencher os detalhes, adicionar agentes e instalar o widget no site. Este documento ajuda você a configurar por completo o chat ao vivo no seu site. Ele explica como criar a caixa de entrada do canal de site e como usar as configurações adicionais de cada caixa de entrada. O WhatsApp Web é o canal principal da plataforma; o chat no site é o canal complementar que você adiciona quando quer atender visitantes diretamente pelo widget do seu site. Para conectar o canal principal, veja Conectar o WhatsApp Web (QR Code). Compatibilidade e requisitos O painel web e o widget funcionam nas versões atuais dos navegadores modernos, como Chrome, Edge, Firefox e Safari. Mantenha o navegador atualizado; versões antigas ou sem suporte do próprio fornecedor podem não executar todos os recursos. Para o aplicativo móvel, as versões suportadas são: - Android: a partir da v6.0 - iOS: a partir da v13.4 Como criar um canal de site no Chatwoot? 1. Acesse a página de caixas de entrada em Configurações → Caixas de Entrada e clique em Adicionar caixa de entrada. 2. Escolha o canal Site. 3. Preencha o nome, a URL e os demais detalhes do site, conforme descrito abaixo. - Nome do site: ex.: Exemplo Inc. - Domínio do site: ex.: www.exemplo.com - Cor do widget: selecione a cor do widget de chat. - Cabeçalho de boas-vindas: ex.: Olá 👋 - Frase de boas-vindas: ex.: Estamos aqui para ajudar com suas dúvidas. - Habilitar saudação do canal: envia uma saudação automática quando o cliente inicia a conversa. - Mensagem de saudação do canal: ex.: Olá. Como podemos ajudar? Depois de preencher tudo, clique em Criar caixa de entrada. 4. Adicionar agentes: adicione agentes à caixa de entrada. Mesmo sendo Administrador, você precisa se adicionar como agente para que a caixa de entrada apareça na sua tela. 5. Adicionar o widget ao site: copie o trecho de código exibido e cole-o no seu site para ativar o atendimento. 6. Configurações adicionais: para ajustar notificações, agentes e demais opções depois, volte a Configurações → Caixas de Entrada e abra a caixa de entrada do site. Finalizando a configuração da caixa de entrada do site Clique no ícone de configurações da caixa de entrada, na página Configurações → Caixas de Entrada, para acessar as opções. Alguns exemplos: - Coleta de e-mail: solicita o e-mail do cliente no início da conversa. - CSAT (satisfação do cliente): ative para exibir uma pesquisa de satisfação ao final do atendimento. Abas de configuração - Colaboradores: adicione ou remova agentes e habilite/desabilite a atribuição automática de novas conversas. - Horário de funcionamento: defina os horários de atendimento da equipe e personalize a mensagem exibida fora do expediente. - Formulário pré-chat: colete informações do cliente antes do início da conversa, habilitando e customizando campos como Nome, E-mail e Telefone. - Configuração: acesse o código de integração com o site. - Construtor de widget: personalize a aparência do widget e veja as mudanças em tempo real.

Como continuar conversas através de e-mail

Como uma conversa do chat do site continua por e-mail: o contato tem e-mail cadastrado, sai do chat após a resposta do agente, recebe o resumo por e-mail, responde e o agente recebe na mesma conversa do painel. Seus clientes podem continuar as conversas do chat do site com seus agentes por e-mail. Isso é útil em situações como: - Nenhum agente está disponível e o cliente deixa uma mensagem no chat. - O cliente sai do chat antes de o agente responder. Para que isso funcione, o contato precisa ter um endereço de e-mail cadastrado no Chatwoot. Na nossa plataforma, o envio de e-mails e a continuidade por e-mail já vêm configurados. Como obter o e-mail dos contatos Você pode solicitar ou atualizar o e-mail dos clientes de três formas: 1. Pelo SDK do Chatwoot Se você já conhece o e-mail do cliente, envie-o ao Chatwoot pelo método setUser do SDK. Veja Como Enviar Informações Adicionais de Usuário para o Chatwoot com SDK. 2. Pelo formulário pré-chat Se você ativar um formulário pré-chat obrigatório, a conversa começa com uma tela que pede os dados do cliente antes do atendimento. 3. Pelo prompt de coleta de e-mail Quando o formulário pré-chat está desativado e o e-mail do cliente é desconhecido, o Chatwoot inicia a conversa com um prompt pedindo o e-mail. Continuidade da conversa Se o e-mail do cliente foi preenchido por uma das formas acima e ele sai do chat depois de o agente já ter respondido, acontece o seguinte: - O cliente recebe um e-mail com o resumo da conversa. Ele pode responder a esse e-mail e continuar a conversa. - O agente recebe as respostas do cliente por e-mail direto no painel do Chatwoot, na mesma conversa já existente. O ícone de e-mail na bolha do chat indica que o cliente respondeu por e-mail.

Como ativar o modo escuro no widget de chat ao vivo

Como configurar o tema do widget com darkMode: light mantém o modo claro, dark fixa o modo escuro e auto acompanha a preferência do dispositivo. Sites modernos permitem que os visitantes alternem entre os modos claro e escuro. Por isso, é importante que o chat ao vivo funcione bem com os dois temas. Este guia mostra como configurar o modo escuro no widget de chat ao vivo do Chatwoot no seu site. No modo escuro, o widget de chat ao vivo troca o fundo claro por um fundo escuro e ajusta as cores do texto e dos botões para manter o contraste e a legibilidade — acompanhando o tema do site do visitante. Como ativar o modo escuro Para ativar o modo escuro no widget, use o parâmetro darkMode junto com as configurações em chatwootSettings. O parâmetro darkMode aceita três valores: - light — Mantém apenas o modo claro. Esse é o valor padrão. - auto — Ativa o modo escuro de acordo com a preferência do sistema operacional do visitante. - dark — Mantém o widget sempre no modo escuro. window.chatwootSettings = { //... demais configurações darkMode: "auto", }; Com o valor auto, o widget acompanha automaticamente o tema do dispositivo: se o visitante estiver usando o modo escuro no sistema, o widget aparece escuro; caso contrário, aparece claro. Use dark quando o site precisar manter o widget escuro independentemente da preferência do dispositivo.

Como habilitar a validação de identidade no Chatwoot

Passo a passo da validação de identidade por HMAC: copiar a chave da caixa de entrada, exigir a validação, gerar o identifier_hash no backend e enviá-lo no setUser. A validação de identidade ajuda a garantir que as conversas entre seus clientes e os agentes de suporte permaneçam privadas. Ela também impede que alguém se passe por outra pessoa (impersonation) usando o identificador de outro cliente no widget de chat do seu site. O funcionamento é simples: em vez de confiar apenas no identificador enviado pelo navegador, o Chatwoot passa a exigir também um HMAC — um código de autenticação assinado com uma chave secreta que só você e o Chatwoot conhecem. Sem esse hash, o identificador é recusado, e ninguém consegue forjar a identidade de um cliente. Onde obter a chave HMAC A chave usada para gerar o HMAC é diferente para cada caixa de entrada de chat no site (web widget). Para copiá-la: 1. Vá em Configurações → Caixas de Entrada e abra a caixa de entrada do chat no site. 2. Abra a aba Configurações e, em seguida, a seção Configuração. 3. Localize Validação de Identidade e clique em Copiar para copiar a chave secreta exibida ali. 4. Ative Exigir validação de identidade para todas as conversas. Sem essa opção, o hash pode ser verificado quando enviado, mas não é obrigatório para todos os usuários. Guarde esse token com segurança no seu backend — ele é a chave secreta do HMAC e nunca deve ficar exposta no código do navegador. Gerar o identifier_hash Com o token em mãos, gere o identifier_hash no seu servidor calculando o HMAC-SHA256 da mensagem (o identificador único do usuário) usando a chave (o token copiado acima). Substitua <webwidget-hmac-token> pelo token e <identifier> pelo mesmo identificador único que você vai passar ao setUser. PHP <?php $key = '<webwidget-hmac-token>'; $message = '<identifier>'; $identifier_hash = hash_hmac('sha256', $message, $key); ?> Javascript (Node.js) const crypto = require('crypto'); const key = '<webwidget-hmac-token>'; const message = '<identifier>'; const hash = crypto.createHmac('sha256', key).update(message).digest('hex'); Ruby require 'openssl' require 'base64' key = '<webwidget-hmac-token>' message = '<identifier>' identifier_hash = OpenSSL::HMAC.hexdigest('sha256', key, message) Elixir key = '<webwidget-hmac-token>' message = '<identifier>' signature = :crypto.mac(:hmac, :sha256, key, message) identifier_hash = Base.encode16(signature, case: :lower) Golang import ( "crypto/hmac" "crypto/sha256" "encoding/hex" ) func identifierHash(secret, identifier string) string { mac := hmac.New(sha256.New, []byte(secret)) mac.Write([]byte(identifier)) return hex.EncodeToString(mac.Sum(nil)) } Python import hashlib import hmac secret = '<webwidget-hmac-token>'.encode('utf-8') identifier = '<identifier>'.encode('utf-8') identifier_hash = hmac.new(secret, identifier, hashlib.sha256).hexdigest() Passar o identifier_hash no setUser Depois de calcular o hash no seu backend, envie-o para a página e informe-o ao widget pelo método setUser. O primeiro argumento é o identificador único do usuário (o mesmo valor usado como message acima), e o campo identifier_hash recebe o hash gerado: window.$chatwoot.setUser("<identificador-único>", { name: "Nome do Usuário", email: "[email protected]", identifier_hash: "<hash-gerado-no-backend>" }); Com a validação de identidade ativada, o widget só aceita o usuário se o identifier_hash conferir com o identificador — por isso o cálculo deve sempre acontecer no servidor, nunca no navegador, para que o token HMAC não seja exposto. Para conhecer os demais campos aceitos pelo setUser e outras opções do SDK, veja Como enviar informações adicionais de usuário para o Chatwoot com SDK.

Como enviar informações adicionais de usuário com o SDK

Visão geral do SDK do chat no site: aguardar o evento chatwoot:ready, identificar o usuário com setUser, enviar atributos personalizados, ajustar o widget em chatwootSettings e controlá-lo por métodos. O SDK do Chatwoot permite enviar informações adicionais dos seus usuários para o Chatwoot, tornando o atendimento pelo chat no site mais personalizado e eficiente. Este guia mostra como identificar quem está conversando (setUser) e enviar atributos personalizados, além das demais configurações do widget. Ao instalar o código do Chatwoot no seu site, o SDK expõe o objeto window.$chatwoot. Para garantir que o SDK foi carregado por completo, escute o evento chatwoot:ready antes de chamar qualquer método: window.addEventListener("chatwoot:ready", function () { // Use window.$chatwoot aqui // ... }); Para escutar as mensagens trocadas no widget, utilize o evento abaixo: window.addEventListener("chatwoot:on-message", function (e) { console.log("chatwoot:on-message", e.detail); }); Definir o usuário no widget (setUser) Se você já conhece quem está navegando (por exemplo, um cliente logado no seu site), use setUser para identificá-lo no Chatwoot. O primeiro argumento é um identificador único do usuário; o segundo é um objeto com os dados dele: window.$chatwoot.setUser("<identificador-único-do-usuário>", { email: "[email protected]", name: "Maria Silva", avatar_url: "https://exemplo.com/maria.png", phone_number: "+5511999999999" }); Chame setUser sempre depois do evento chatwoot:ready. Informe pelo menos um valor válido em name, email ou avatar_url; se enviar phone_number, use o formato internacional E.164, começando por + e o código do país. Validação de identidade com HMAC Para evitar falsificação de identidade e garantir a privacidade das conversas, ative a validação de identidade gerando um identifier_hash a partir de um token HMAC. Com a validação ativa, você pode enviar o conjunto completo de campos de contato: window.$chatwoot.setUser("<identificador-único>", { name: "Maria Silva", avatar_url: "https://exemplo.com/maria.png", email: "[email protected]", identifier_hash: "<hash-HMAC-gerado-no-servidor>", phone_number: "+5511999999999", description: "Cliente desde 2024", country_code: "BR", city: "São Paulo", company_name: "Empresa Exemplo", social_profiles: { linkedin: "https://www.linkedin.com/in/maria-exemplo", facebook: "https://www.facebook.com/maria.exemplo", github: "https://github.com/maria-exemplo" } }); Para gerar o token HMAC e habilitar esse recurso, veja Como habilitar a validação de identidade no Chatwoot?. Definir atributos personalizados Use setCustomAttributes para adicionar informações extras sobre o cliente (por exemplo, plano contratado ou ID interno): window.$chatwoot.setCustomAttributes({ accountId: 1, pricingPlan: "pago" }); Para remover um atributo, use deleteCustomAttribute: window.$chatwoot.deleteCustomAttribute("nome-do-atributo"); Configurações do SDK Defina as preferências do widget no objeto window.chatwootSettings. Para ocultar a bolha de mensagens, defina hideMessageBubble como true (nesse caso, lembre-se de acionar o widget manualmente): window.chatwootSettings = { hideMessageBubble: false, showUnreadMessagesDialog: false, // Desativa o diálogo de mensagens não lidas position: "left", // Pode ser "left" ou "right" locale: "pt", // Idioma do widget useBrowserLanguage: false, // Usa o idioma do navegador do usuário type: "standard", // [standard, expanded_bubble] darkMode: "auto" // [light, auto, dark] // baseDomain: "seudominio.com" // Rastrear usuários entre subdomínios }; Usar o idioma do navegador Para exibir o widget no idioma do navegador do usuário, defina useBrowserLanguage como true. Observação: se useBrowserLanguage estiver como true, o valor de locale será ignorado. Se o idioma do navegador não for suportado pelo Chatwoot, o widget usará o idioma configurado em locale. Modo escuro Defina darkMode como auto para acompanhar o tema do dispositivo, dark para manter o modo escuro ou light para manter o modo claro. Modelos de widget O Chatwoot oferece dois modelos de widget: o padrão (standard) e a bolha expandida (expanded_bubble). Para personalizar o texto da bolha expandida, utilize o parâmetro launcherTitle: window.chatwootSettings = { type: "expanded_bubble", launcherTitle: "Converse conosco" }; Ativar a janela pop-out Para habilitar a janela pop-out, adicione a configuração abaixo ao chatwootSettings: window.chatwootSettings = { showPopoutButton: true }; Você também pode abrir a janela pop-out programaticamente: window.$chatwoot.popoutChatWindow(); Controlar o widget programaticamente Alternar a visibilidade da bolha Para mostrar ou ocultar a bolha do Chatwoot, use toggleBubbleVisibility: window.$chatwoot.toggleBubbleVisibility("show"); // mostrar a bolha window.$chatwoot.toggleBubbleVisibility("hide"); // ocultar a bolha Abrir o widget programaticamente Para abrir o chat ao clicar em um link ou botão, use o método toggle: window.$chatwoot.toggle(); // Alterna o estado window.$chatwoot.toggle("open"); // Abre o widget window.$chatwoot.toggle("close"); // Fecha o widget Definir o idioma manualmente Use setLocale para definir o idioma do widget: window.$chatwoot.setLocale("pt"); Aplicar etiquetas na conversa Para adicionar ou remover etiquetas de uma conversa, use setLabel e removeLabel: window.$chatwoot.setLabel("suporte"); window.$chatwoot.removeLabel("suporte"); Reiniciar a sessão Ao desconectar o usuário do seu site, reinicie a sessão do widget: window.$chatwoot.reset(); Tratar erros do widget Para detectar erros no widget, escute o evento chatwoot:error: window.addEventListener("chatwoot:error", function () { // ... }); Observação: este recurso está disponível a partir da versão 2.3.0.

Como instalar chat ao vivo em um site Docusaurus?

Passo a passo para instalar o widget em um site Docusaurus: copiar o token da caixa de entrada de site, instalar o plugin, configurá-lo em docusaurus.config.js e reiniciar o servidor. O Chatwoot integra-se ao Docusaurus por meio do plugin @chatwoot/docusaurus-plugin, que adiciona o widget de chat ao vivo a sites feitos com Docusaurus. Assim, seus visitantes podem falar com você diretamente da documentação ou do site. Antes de começar Você precisa de uma caixa de entrada do tipo chat no site já criada, pois é ela que fornece o token do site usado na configuração. Para criá-la, acesse Configurações → Caixas de Entrada → Adicionar caixa de entrada e escolha Site. Depois de criada, abra a caixa de entrada e copie o token do site nas suas configurações — é esse valor que você usará em websiteToken. Passo 1: adicione o plugin ao seu projeto Com Yarn: yarn add @chatwoot/docusaurus-plugin ou com npm: npm install @chatwoot/docusaurus-plugin --save Passo 2: configure o plugin em docusaurus.config.js No arquivo docusaurus.config.js, adicione o seguinte: // docusaurus.config.js module.exports = { plugins: ["@chatwoot/docusaurus-plugin"], themeConfig: { chatwoot: { websiteToken: "Token do seu site", baseURL: "https://sua-empresa.hub.chatwoot.app.br", // endereço usado para acessar seu painel enableInDevelopment: false, // opcional chatwootSettings: { hideMessageBubble: false, position: "left", // pode ser "left" ou "right" locale: "pt", // idioma do widget useBrowserLanguage: false, // usar o idioma do navegador do visitante darkMode: "auto", // "light", "auto" ou "dark" type: "expanded_bubble", launcherTitle: "Fale Conosco", } } } }; Substitua websiteToken pelo token da sua caixa de entrada de chat no site e baseURL pelo mesmo endereço que você usa para acessar o painel. Ajuste as opções em chatwootSettings conforme a aparência e o comportamento desejados para o widget. Salve o arquivo e reinicie o servidor do Docusaurus. O widget de chat ao vivo passará a aparecer nas páginas do seu site.

Como instalar um chat ao vivo em um site Gatsby

Três passos para instalar o widget em um site Gatsby: instalar o gatsby-plugin-chatwoot, configurá-lo no gatsby-config.js com baseUrl e websiteToken, e iniciar o servidor. Se você tem um site Gatsby, a opção recomendada é copiar o script oficial do widget na aba Configuração da caixa de entrada de site e carregá-lo no layout do projeto. O gatsby-plugin-chatwoot é um plugin da comunidade, não um pacote oficial. Sua versão publicada foi feita para Gatsby 2 e React 16; use as etapas abaixo somente em um projeto legado compatível. Em um Gatsby atual, prefira o script oficial para evitar conflitos de dependências. Passo 1. Adicione o plugin a um projeto compatível Instale o gatsby-plugin-chatwoot no seu projeto Gatsby com o seguinte comando: npm install --save gatsby-plugin-chatwoot Se você usa o Yarn, utilize: yarn add gatsby-plugin-chatwoot Passo 2. Adicione o plugin ao arquivo de configuração do Gatsby No seu arquivo gatsby-config.js, insira o código abaixo: plugins: [ { resolve: `gatsby-plugin-chatwoot`, options: { baseUrl: "BASE_URL", // Obrigatório websiteToken: "WEBSITE_TOKEN", // Obrigatório includeInDevelopment: false, // Opcional chatwootSettings: {}, // Opcional }, }, ]; Você encontra o token do site (websiteToken) e a URL base (baseUrl) nas configurações da sua caixa de entrada de site: acesse Configurações → Caixas de Entrada, selecione o canal de site e abra a aba Configuração. Ainda não tem uma caixa de entrada de site? Crie uma em Configurações → Caixas de Entrada → Adicionar caixa de entrada e escolha o canal de site. Passo 3. Inicie o servidor Suba o servidor do seu projeto Gatsby. Pronto — o widget do Chatwoot já aparece nas páginas do seu site.

Como instalar o chat ao vivo usando o Google Tag Manager

Passo a passo para instalar o widget pelo Google Tag Manager: adicionar uma nova tag, usar HTML personalizado com o script, acionar em Todas as páginas e publicar. Se você já utiliza o Google Tag Manager no seu site, pode instalar o widget de chat ao vivo sem mexer diretamente no código das páginas: basta criar uma nova tag de HTML personalizado com o script do chat ao vivo. Siga os passos abaixo. Antes de começar - Você precisa de uma Caixa de Entrada de Website já criada, para ter o script do widget em mãos. O script fica em Configurações → Caixas de Entrada → selecione o canal de Website → aba Configuração. Ainda não criou? Siga primeiro o guia de configuração de um canal de Website. - Você precisa de acesso ao workspace do Google Tag Manager do seu site, com permissão para publicar alterações. Passo 1: Acessar o console do Tag Manager Faça login no workspace do Tag Manager com sua conta Google. No painel do workspace, clique em Adicionar uma nova tag. Passo 2: Criar uma nova tag com HTML personalizado Uma janela para criação de tag será exibida. Altere o nome de Tag sem título para Chatwoot (ou outro nome de sua preferência). Clique em Configuração da tag e selecione o tipo HTML personalizado na lista. Copie o script gerado na configuração da sua Caixa de Entrada de Website no Chatwoot e cole na área de texto do HTML, conforme mostrado abaixo. Marque a opção Suporte a document.write. Passo 3: Configurar o acionador Clique em Acionamento e selecione Todas as páginas na lista, para que o widget apareça em todo o site. Clique em Salvar para gravar a tag. Ela aparecerá listada nas alterações do workspace. Clique em Enviar para implantar a tag, informe um nome para a versão e finalize clicando em Publicar. Passo 4: Verifique Pronto! O widget de chat ao vivo foi publicado no seu site. Atualize qualquer página para conferir o widget aparecendo em todas elas.

Como instalar o chat ao vivo em uma aplicação Next.js

Passo a passo para instalar o widget em uma aplicação Next.js: copiar o token e a URL, criar o componente ChatwootWidget com next/script, importá-lo no layout raiz e verificar. Se você tem uma aplicação em Next.js, pode adicionar o widget de chat ao vivo do Chatwoot e conversar com seus visitantes em tempo real. A forma recomendada é criar um componente que carregue o script do Chatwoot usando o componente Script do próprio Next.js (next/script), que gerencia o carregamento de forma otimizada. A integração é feita em poucos passos, ilustrados no exemplo abaixo. Antes de começar Você precisa de uma Caixa de Entrada de site já criada. Se ainda não tiver, crie o canal de site antes de continuar. Os valores usados no código — o token do site e a URL de instalação — ficam em Configurações → Caixas de Entrada → selecione o canal de site → aba Configuração, no campo com o script gerado. Copie apenas esses dois valores. Passo 1. Crie o componente Copie o código abaixo e crie um arquivo na sua pasta de componentes com o nome ChatwootWidget.js. Substitua <url-da-sua-instalação> e <seu-token-do-site> pelos valores copiados na etapa anterior. 'use client'; import Script from 'next/script'; export default function ChatwootWidget() { const BASE_URL = '<url-da-sua-instalação>'; return ( <Script id="chatwoot-sdk" src={`${BASE_URL}/packs/js/sdk.js`} strategy="lazyOnload" onLoad={() => { // Configurações do Chatwoot window.chatwootSettings = { hideMessageBubble: false, position: 'right', // pode ser 'left' ou 'right' locale: 'pt', // defina o idioma type: 'standard', // [standard, expanded_bubble] }; window.chatwootSDK.run({ websiteToken: '<seu-token-do-site>', baseUrl: BASE_URL, }); }} /> ); } Alguns detalhes do exemplo: - strategy="lazyOnload" — carrega o widget durante o tempo ocioso do navegador, ideal para chat de suporte, sem atrasar o conteúdo da página. - onLoad — executa as configurações e inicia o widget só depois que o script terminou de carregar. Por usar onLoad, o componente precisa ser um Client Component (por isso a diretiva 'use client' no topo). Passo 2. Importe o componente Importe o componente no seu layout raiz para que o widget apareça em todas as páginas. Se você usa o App Router (app/layout.js): import ChatwootWidget from '../components/ChatwootWidget'; export default function RootLayout({ children }) { return ( <html lang="pt-br"> <body> {children} <ChatwootWidget /> </body> </html> ); } Se você usa o Pages Router (pages/_app.js): import ChatwootWidget from '../components/ChatwootWidget'; export default function App({ Component, pageProps }) { return ( <> <Component {...pageProps} /> <ChatwootWidget /> </> ); } Você também pode importar o componente em uma página específica, caso queira o widget apenas nela. Passo 3. Verifique Abra sua aplicação no navegador. Pronto! Agora você verá o widget do Chatwoot na sua página.

Como instalar chat ao vivo em um aplicativo React Native

Três etapas para instalar o widget em um app React Native: criar a caixa de entrada de site e copiar o token e a URL, instalar o plugin e configurar o componente ChatWootWidget. Se você tem um aplicativo React Native, pode adicionar o widget de chat ao vivo do Chatwoot e conversar com seus visitantes em tempo real. Isso pode ser feito em três etapas simples usando o plugin do Chatwoot. Passo 1. Crie uma Caixa de Entrada de Website no Chatwoot O widget precisa de uma Caixa de Entrada de Website para funcionar. No Chatwoot, acesse Configurações → Caixas de Entrada → Adicionar caixa de entrada, escolha o canal Website e conclua a criação da caixa. Depois de criada, abra a caixa em Configurações → Caixas de Entrada, selecione o canal de Website e vá até a aba Configuração para copiar o Token do Site e a URL da instalação — você vai usar esses dois valores no Passo 3. Passo 2. Adicione o plugin ao seu projeto Adicione o widget oficial para React Native ao projeto. yarn add @chatwoot/react-native-widget ou npm install --save @chatwoot/react-native-widget Essa biblioteca depende de react-native-webview e @react-native-async-storage/async-storage. Siga as instruções de instalação indicadas no repositório e nas documentações dessas dependências. Instalação no iOS Em projetos com React Native 0.60 ou superior, execute também a instalação dos pods do iOS: cd ios && pod install Passo 3. Configure o uso do plugin Substitua websiteToken e baseUrl pelos valores que você copiou no Passo 1. import React, { useState } from 'react'; import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native'; import ChatWootWidget from '@chatwoot/react-native-widget'; const App = () => { const [showWidget, toggleWidget] = useState(false); const user = { identifier: '[email protected]', name: 'John Samuel', avatar_url: '', email: '[email protected]', identifier_hash: '<hash-generated-on-server>', }; const customAttributes = { accountId: 1, pricingPlan: 'paid', status: 'active' }; const websiteToken = 'WEBSITE_TOKEN'; const baseUrl = 'CHATWOOT_INSTALLATION_URL'; const locale = 'pt_BR'; return ( <SafeAreaView style={styles.container}> <View> <TouchableOpacity style={styles.button} onPress={() => toggleWidget(true)}> <Text style={styles.buttonText}>Abrir widget</Text> </TouchableOpacity> </View> { showWidget && <ChatWootWidget websiteToken={websiteToken} locale={locale} baseUrl={baseUrl} closeModal={() => toggleWidget(false)} isModalVisible={showWidget} user={user} customAttributes={customAttributes} /> } </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { height: 48, marginTop: 32, paddingTop: 8, paddingBottom: 8, backgroundColor: '#1F93FF', borderRadius: 8, borderWidth: 1, borderColor: '#fff', justifyContent: 'center', }, buttonText: { color: '#fff', textAlign: 'center', paddingLeft: 10, fontWeight: '600', fontSize: 16, paddingRight: 10, }, }); export default App; Se você identificar usuários com identifier, gere o identifier_hash no seu servidor e nunca coloque a chave HMAC no aplicativo. Veja Como habilitar a validação de identidade. Pronto! Ao abrir o widget no aplicativo, você já poderá conversar com seus visitantes em tempo real pelo Chatwoot.

Como instalar chat ao vivo em uma aplicação Vue.js

Passo a passo para instalar o widget em uma aplicação Vue.js: abrir a aba Configuração, copiar o script do widget, colar no index.html antes de e iniciar a aplicação. Para integrar o chat ao vivo à sua aplicação Vue.js, basta colar o script do widget no arquivo index.html do seu projeto. Veja como fazer isso. Antes de começar Você precisa de uma Caixa de Entrada de Website já criada. Se ainda não tiver uma, crie o canal de site antes de continuar e volte para copiar o script. Passo 1. Obtenha o script do widget O script do widget fica nas configurações da sua Caixa de Entrada de Website. Acesse Configurações → Caixas de Entrada, selecione o canal de Website e abra a aba Configuração. Passo 2. Copie o script Copie o código gerado no campo de código do canal. Passo 3. Cole o script no seu projeto Abra o projeto Vue e cole o script no arquivo index.html, logo antes da tag de fechamento </body>. <body> <noscript> <strong >Desculpe, mas <%= htmlWebpackPlugin.options.title %> não funciona corretamente sem o JavaScript ativado. Por favor, ative-o para continuar.</strong> </noscript> <div id="app"></div> <!-- arquivos compilados serão injetados automaticamente --> <!-- Script do Chatwoot --> <script> (function (d, t) { var BASE_URL = "<url-da-sua-instalação>"; var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.src = BASE_URL + "/packs/js/sdk.js"; g.defer = true; g.async = true; s.parentNode.insertBefore(g, s); g.onload = function () { window.chatwootSDK.run({ websiteToken: "<seu-token-do-site>", baseUrl: BASE_URL, }); }; })(document, "script"); </script> <!-- Script do Chatwoot --> </body> Substitua BASE_URL pela URL da sua instalação e websiteToken pelo token da sua caixa de entrada (ambos aparecem no script copiado no Passo 2). Passo 4. Verificação Inicie a aplicação e abra o site. O widget de chat ao vivo aparecerá na página. Módulo para Vue.js e Nuxt.js Existe também um módulo mantido pela comunidade (desenvolvido pela equipe do @huntersofbook) para integrar o chat ao vivo em projetos Vue 3 e Nuxt 3, caso prefira uma instalação baseada em módulo.

Como instalar um chat ao vivo em um site Webflow?

Passo a passo para instalar o widget em um site Webflow: criar a caixa de entrada de site, copiar o script, colar no Footer Code do projeto, publicar e verificar. Se você criou o seu site no Webflow e quer conversar em tempo real com os visitantes, é possível adicionar o widget de chat ao vivo ao site colando o script do widget nas configurações do projeto. Siga os passos abaixo. Passo 1. Crie uma caixa de entrada de site no Chatwoot Antes de instalar o widget, você precisa de uma caixa de entrada do tipo Site. Acesse Configurações → Caixas de Entrada → Adicionar caixa de entrada e escolha o canal Site. Ao final, o Chatwoot gera um script exclusivo dessa caixa de entrada — é ele que você vai colar no Webflow. Passo 2. Copie o script do widget Abra a caixa de entrada de site em Configurações → Caixas de Entrada → (selecione a caixa) → aba Configuração e copie o script exibido no campo de código. Passo 3. Cole o script no Webflow Acesse a sua conta do Webflow, selecione o projeto e abra as Configurações do projeto (Project Settings). Vá em Código personalizado (Custom Code) → Código do rodapé (Footer Code), cole o script copiado na área Código do rodapé e salve as alterações. Passo 4. Publique as alterações Clique em Publicar (Publish), selecione o site e confirme a publicação nos domínios desejados. Passo 5. Verifique Acesse o seu site publicado e confirme se o widget de chat ao vivo aparece.

Como instalar um chat ao vivo em um site WordPress

Passo a passo para instalar o widget em um site WordPress pelo plugin oficial: copiar o token e a URL, baixar o plugin, enviá-lo e instalar, ativar e configurar com o token e a URL. O WordPress é um dos Sistemas de Gerenciamento de Conteúdo (CMS) mais populares. Se o seu site usa uma instalação WordPress na qual você pode administrar plugins ou editar o tema, é possível adicionar o widget de chat ao vivo. Há duas formas de fazer isso: usando o plugin oficial para WordPress (o jeito mais simples) ou colando o código do widget diretamente no tema. Este guia cobre as duas. Antes de começar Você precisa de uma caixa de entrada de Site (Website) já criada na sua conta. É dela que sairão o token do site e a URL da instalação usados na configuração. Se ainda não tiver criado, vá em Configurações → Caixas de Entrada → Adicionar caixa de entrada, escolha Site e siga o guia de configuração do canal de site. Opção A — Instalar pelo plugin oficial Passo 1. Baixe o plugin do Chatwoot Baixe o arquivo .zip da versão mais recente do plugin do Chatwoot para WordPress na página de releases no GitHub. Passo 2. Envie o plugin para o seu site WordPress Faça login na sua conta WordPress. No Painel de Administração, clique em Plugins na barra lateral e depois em Adicionar novo plugin. Clique em Enviar plugin e selecione o arquivo .zip que você baixou no Passo 1. Em seguida, clique em Instalar agora. Passo 3. Ative o plugin Depois do envio, uma tela de sucesso será exibida com a opção Ativar plugin. Clique nela para concluir a instalação. Passo 4. Configure o plugin Com o plugin ativo, um item Chatwoot aparecerá no menu Configurações do WordPress. Clique nele para abrir a tela de configuração do chat ao vivo. Preencha os campos com as credenciais da sua caixa de entrada de Site: - Token do site e URL da instalação: copie os dois valores da caixa de entrada de Site criada no Chatwoot e cole aqui. Depois de preencher o formulário, clique em Salvar alterações. Opção B — Colar o código do widget no tema Se preferir não usar o plugin, você pode inserir o código do widget diretamente no seu tema. 1. No Chatwoot, abra Configurações → Caixas de Entrada e selecione a sua caixa de entrada de Site. 2. Copie o trecho de código do widget exibido na configuração da caixa de entrada. 3. No WordPress, cole esse código antes do fechamento da tag </body> do seu tema (por exemplo, editando o arquivo do tema ou usando um plugin que permita inserir scripts no rodapé de todas as páginas). Verifique se está funcionando Abra o seu site em uma aba nova e confira se o widget de chat aparece na página. Envie uma mensagem de teste pelo widget e verifique se ela chega na sua conta do Chatwoot. Quer ir além do site? Você também pode atender pelo WhatsApp usando o WhatsApp Web, o canal principal de WhatsApp da plataforma — basta escanear um QR Code, sem credenciais do Meta Business. Veja Conectar o WhatsApp Web (QR Code).