Chat ao vivo no site

Como instalar chat ao vivo em um site Docusaurus?

O Chatwoot integra-se perfeitamente com o Docusaurus por meio do @chatwoot/docusaurus-plugin. Este plugin ajuda você a instalar facilmente o widget de chat ao vivo do Chatwoot em um site baseado no Docusaurus. Para instalar o plugin, siga os passos rápidos explicados abaixo. Passo 1. Adicione o plugin ao seu projeto. yarn add @chatwoot/docusaurus-plugin ou npm install @chatwoot/docusaurus-plugin --save Passo 2. Configure o plugin no docusaurus.config.js // docusaurus.config.js module.exports = { plugins: ["@chatwoot/docusaurus-plugin"], themeConfig: { chatwoot: { websiteToken: "Seu token de inbox do site", baseURL: "https://app.chatwoot.com", // opcional enableInDevelopment: false, // opcional chatwootSettings: { hideMessageBubble: false, position: "left", // Pode ser left ou right locale: "en", // Idioma a ser definido useBrowserLanguage: false, // Define o idioma do widget a partir do navegador do usuário darkMode: "auto", // [light, auto] type: "expanded_bubble", launcherTitle: "Converse conosco", } } } };

Como ativar o modo escuro no widget de chat ao vivo?

Sites modernos permitem que os usuários alternem entre os modos claro e escuro. Portanto, é importante que o chat ao vivo funcione com ambos os temas. Este guia ajuda você a configurar o modo escuro para o widget de chat ao vivo do Chatwoot em seu site. Aqui está uma rápida demonstração de como o modo escuro funciona no widget de chat ao vivo: Para ativar o modo escuro no widget do Chatwoot, utilize o parâmetro darkMode junto com o chatwootSettings. O parâmetro darkMode aceita dois valores: 1. light - Ativa apenas o modo claro. Este é o valor padrão. 2. auto - Ativa o modo escuro com base na preferência do sistema operacional. window.chatwootSettings = { //... outras Configurações darkMode: "auto", }; Nota: A opção dark somente não é suportada no momento. Adicionaremos este suporte em versões futuras.

Como instalar chat ao vivo em um site Gatsby?

Se você possui um site criado com Gatsby, pode adicionar um widget de chat ao vivo da Chatwoot e conversar com seus visitantes em tempo real. Isso pode ser feito em 3 passos simples usando o plugin Gatsby da Chatwoot. Passo 1. Adicione o plugin Gatsby ao seu projeto​ Adicione gatsby-plugin-chatwoot ao seu projeto Gatsby. npm install --save gatsby-plugin-chatwoot Se você estiver usando yarn, utilize o seguinte comando: yarn add gatsby-plugin-chatwoot Passo 2. Adicione o plugin ao seu arquivo de configuração do Gatsby​ // No seu gatsby-config.js plugins: [ { resolve: `gatsby-plugin-chatwoot`, options: { baseUrl: "BASE_URL", // Obrigatório websiteToken: "WEBSITE_TOKEN", // Obrigatório includeInDevelopment: false, // Opcional chatwootSettings: {}, // Opcional }, }, ]; Você pode obter seu token do site e base URL nas configurações da Caixa de Entrada em sua conta Chatwoot. Se precisar criar um novo canal de site, siga o procedimento ilustrado aqui. Passo 3. Inicie seu servidor​ Agora você já poderá ver o widget da Chatwoot na página.

Como instalar um chat ao vivo em um aplicativo Next.js?

Se você tem um aplicativo Next.js, pode adicionar o widget de chat ao vivo do Chatwoot e conversar com seus visitantes em tempo real. Para integrar o Chatwoot à sua aplicação Next.js, você precisa de um componente que carregue o script do Chatwoot. Você pode fazer isso em dois passos rápidos. Vamos ilustrar com o exemplo abaixo. Este exemplo mostra um componente React que carrega o script do Chatwoot de forma assíncrona. Passo 1. Copie e Crie! Copie o código abaixo e crie um arquivo em sua pasta components com o nome ChatwootWidget.js. import React from 'react'; class ChatwootWidget extends React.Component { componentDidMount () { // Add Chatwoot Settings window.chatwootSettings = { hideMessageBubble: false, position: 'right', // This can be left or right locale: 'en', // Language to be set type: 'standard', // [standard, expanded_bubble] }; // Paste the script from inbox settings except the <script> tag (function(d,t) { var BASE_URL="<your-installation-url>"; var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=BASE_URL+"/packs/js/sdk.js"; s.parentNode.insertBefore(g,s); g.async=!0; g.onload=function(){ window.chatwootSDK.run({ websiteToken: '<your-website-token>', baseUrl: BASE_URL }) } })(document,"script"); } render () { return null; } } export default ChatwootWidget Passo 2. Importe​ Importe o componente em suas páginas ou no componente de layout, conforme mostrado abaixo. import React, { Fragment } from 'react' // ... import ChatwootWidget from '../components/ChatwootWidget' const Page = () => ( <Fragment> <ChatwootWidget /> <Component {...}> </Fragment> ) export default Page Agora você conseguirá ver o widget do Chatwoot na página.

Como ativar a validação de identidade no Chatwoot?

A validação de identidade ajuda a garantir que as conversas entre seus clientes e agentes de suporte sejam privadas. Ela também ajuda a impedir a personificação. A validação de identidade pode ser ativada gerando um HMAC. A chave usada para gerar o HMAC para cada widget web é diferente e pode ser copiada em Caixas de Entrada -> Configurações -> Configuração -> Validação de Identidade -> Copiar o token exibido lá. Você pode gerar o HMAC em diferentes linguagens, conforme mostrado abaixo. Gerar HMAC​ 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>' OpenSSL::HMAC.hexdigest('sha256', key, message) Elixir​ key = '<webwidget-hmac-token>' message = '<identifier>' signature = :crypto.hmac(:sha256, key, message) Base.encode16(signature, case: :lower) Golang​ package main import ( "crypto/hmac" "crypto/sha256" "encoding/base64" "encoding/hex" ) func main() { secret := []byte("<webwidget-hmac-token>") message := []byte("<identifier>") hash := hmac.New(sha256.New, secret) hash.Write(message) hex.EncodeToString(hash.Sum(nil)) } Python​ import hashlib import hmac import base64 secret = bytes('<webwidget-hmac-token>', 'utf-8') message = bytes('<identifier>', 'utf-8') hash = hmac.new(secret, message, hashlib.sha256) hash.hexdigest()

Como instalar chat ao vivo em um aplicativo React Native?

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 3 passos simples usando o plugin Chatwoot. Passo 1. Crie uma caixa de entrada de site no Chatwoot​ Consulte este guia para instruções detalhadas sobre como configurar uma caixa de entrada de site no Chatwoot. Passo 2. Adicione o plugin ao seu projeto​ Adicione um dos seguintes plugins ao seu projeto. yarn add @chatwoot/react-native-widget ou npm install --save @chatwoot/react-native-widget --save Esta biblioteca depende de react-native-webview e async-storage. Por favor, siga as instruções fornecidas na documentação. Instalação no iOS​ Se você estiver usando versões do React Native > 60.0, é relativamente simples. cd ios && pod install Passo 3. Utilize assim​ Substitua websiteToken e baseUrl por valores apropriados. 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: '', }; const customAttributes = { accountId: 1, pricingPlan: 'paid', status: 'active' }; const websiteToken = 'WEBSITE_TOKEN'; const baseUrl = 'CHATWOOT_INSTALLATION_URL'; const locale = 'en'; 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; E... pronto. Veja o exemplo completo aqui.

Como instalar um chat ao vivo em um site Webflow?

Se o seu site foi criado com o Webflow e você deseja conversar com os visitantes do seu site Webflow em tempo real, você pode adicionar o widget de chat ao vivo do Chatwoot ao seu site. Siga os passos descritos abaixo. Passo 1. Crie uma caixa de entrada para site no Chatwoot​ Consulte este guia para instruções detalhadas sobre como configurar uma caixa de entrada de site no Chatwoot. Passo 2. Instale o script gerado no Webflow​ Faça login na sua conta do Webflow e selecione seu site. Selecione Configurações. ​Vá para Custom Code -> Footer Code. Cole o script em "Footer Code". Salve as alterações. Passo 3. Publique as alterações​ Clique em Publicar -> Selecione o site -> Publicar nos domínios selecionados. Passo 4. Verifique Acesse seu site e veja se o widget aparece no site.

Como continuar conversas por e-mail?

Seus clientes podem continuar suas conversas de chat com seus agentes por meio de threads de e-mail. Isso pode ser necessário nas seguintes circunstâncias. - Não há agentes disponíveis e o cliente deixa uma mensagem no chat. - O cliente deixa o chat antes que o agente responda. Para que isso funcione, o contato deve ter um endereço de e-mail no CRM do Chatwoot. Obtendo endereços de e-mail dos contatos​ Você pode solicitar/atualizar e-mails dos clientes no Chatwoot das seguintes maneiras. 1. Pelo Chatwoot SDK​ Se o e-mail do cliente for conhecido, você pode fornecê-lo ao chatwoot por meio do método setUser no nosso SDK. 2. Pelo formulário pré-chat​ Se você habilitar um formulário pré-chat obrigatório, a conversa começa com uma tela como mostrado abaixo: 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 uma conversa com um prompt de coleta de e-mail. Nota: Quando o Captain está ativado em uma caixa de entrada, o prompt de coleta de e-mail é automaticamente suprimido. O Captain irá gerenciar as conversas diretamente, mesmo fora do horário comercial. O prompt de coleta de e-mail só será enviado se o Captain transferir a conversa para um agente humano ou se o Captain não estiver configurado para a caixa de entrada. Continuidade da Conversa​ Nota: Ative a continuidade da conversa em instalações auto-hospedadas com a ajuda deste guia. Se o endereço de e-mail do cliente for atualizado por qualquer uma das opções mencionadas acima e ele sair do chat enquanto o agente respondeu, ocorre o seguinte. - O cliente recebe uma thread de e-mail com um resumo da conversa. Ele pode responder a esse e-mail e continuar a conversa. - O agente recebe as respostas do cliente por e-mail em seu painel do Chatwoot, continuando sobre o mesmo thread da conversa existente. O ícone de e-mail no balão do chat indica que o cliente respondeu por e-mail.

Como instalar um chat ao vivo em um aplicativo Vue.js?

Para integrar o Chatwoot com sua aplicação Vue.js, você precisa colar o script do widget do Chatwoot no arquivo index.html da sua aplicação Vue.js. Veja como fazer isso: Passo 1. Obtenha seu script do widget​ Seu script do widget pode ser encontrado nas configurações da Caixa de Entrada do seu site. Vá em Configurações -> Caixas de Entrada -> Selecione seu canal do site > aba Configuração. Se você ainda não criou uma caixa de entrada para o site, pode encontrar as instruções passo a passo aqui. Passo 2. Copie o script​ Copie o script que foi criado no campo code do canal. Passo 3. Cole o script aqui​ Abra seu 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 para continuar.</strong > </noscript> <div id="app"></div> <!-- built files will be auto injected --> <!-- Chatwoot script goes here --> <script> (function (d, t) { var BASE_URL = "https://example.com"; 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: "yZ7USzaEs7hrwUAHLGwjbxJ1", baseUrl: BASE_URL, }); }; })(document, "script"); </script> <!-- Chatwoot script goes here --> </body> Passo 4. Verifique​ Agora você poderá ver o widget do Chatwoot na página. Algo assim: Módulo Vue.js, Nuxt.js​ Um módulo mantido pela comunidade (Feito pelo pessoal incrível da @huntersofbook) para integrar o Chatwoot em seus projetos Vue 3 e Nuxt 3 está disponível. Você pode encontrar um exemplo aqui. - Veja o módulo Vue 3. - Veja o módulo Nuxt 3.

Como instalar um chat ao vivo usando o Google Tag Manager?

Se você estiver usando o Google Tag Manager em seu site, pode instalar o Chatwoot pelo painel do Google Tag Manager criando uma nova tag para o Chatwoot. Para instalar o widget de chat ao vivo do Chatwoot, siga os passos abaixo. Passo 1. Acesse o console do Tag Manager​ Faça login no workspace do Tag Manager com sua conta Google. Você verá um workspace semelhante ao mostrado abaixo. Clique no botão "Adicionar uma nova tag" no painel. Passo 2. Crie uma nova tag com a Configuração de Tag​ Será exibido um popup para criar uma tag. Altere o nome de "Tag sem título" para "Chatwoot" ou qualquer nome que preferir. Clique em configuração da tag e selecione o tipo de tag "HTML personalizado" na lista. Copie o script da configuração da caixa de entrada do Chatwoot para a área de texto do script HTML, conforme mostrado abaixo. Selecione a caixa "Suportar document.write". Passo 3. Defina o Disparo​ Clique em "Disparo" e selecione "Todas as páginas" na lista. Clique em "Salvar" para salvar a tag. Você poderá ver a tag listada em alterações do workspace. Clique em "Enviar" para publicar a tag. Forneça um nome de versão e publique as alterações clicando em "Publicar". Passo 4. Risque da sua lista de tarefas​ Você instalou com sucesso o widget de chat ao vivo do Chatwoot no seu site. Atualize seu site para ver o widget de chat ao vivo aparecer em todas as páginas.

Como instalar um chat ao vivo em um site WordPress?

WordPress é um popular Sistema de Gerenciamento de Conteúdo. Se você está hospedando seu site no WordPress, pode adicionar o widget de chat ao vivo do Chatwoot e conversar com seus visitantes em tempo real. Isso pode ser feito em 4 etapas simples usando o plugin do Chatwoot para WordPress. Passo 1. Baixe o plugin Chatwoot Baixe o arquivo Zip da versão mais recente do plugin Chatwoot para WordPress no GitHub, como mostrado abaixo. Passo 2. Faça o upload do plugin para o seu site WordPress Faça login em sua conta WordPress. Navegue até o Painel de Administração e clique em “Plugins” na barra lateral. Você verá o botão "Adicionar novo". Você verá uma opção para fazer upload do plugin, conforme mostrado na imagem abaixo. Clique em “Fazer upload” e selecione o arquivo Zip baixado no passo 1. Passo 3. Ative o plugin Depois que o plugin for enviado, você verá uma tela de Sucesso com a opção "Ativar Plugin", conforme mostrado abaixo. Clique no botão "Ativar Plugin". Parabéns! O plugin está agora instalado. Para completar a configuração, você precisa informar as credenciais do app Chatwoot, conforme mostrado nos passos abaixo. Passo 4. Configure o plugin Agora, você verá “Configurações do Chatwoot” no menu "Configurações". Clique para atualizar a configuração do chat ao vivo. Você verá a tela de Configurações como mostrado abaixo. Configure o plugin Chatwoot aqui para que ele funcione. Você precisa criar uma caixa de entrada de Website na sua instalação do Chatwoot. Consulte este guia para criar um canal de website. Os campos do formulário são explicados abaixo. 1. Chatwoot Website Token / Chatwoot Installation URL Assim que você criar um canal de website na sua instalação do Chatwoot, você receberá um script. Você pode copiar o Token e a URL conforme mostrado abaixo. 2. Design do Widget O Chatwoot suporta dois designs de widget de chat ao vivo – Design Padrão e design de Bolha Expandida. Escolha sua preferência. 3. Posição do Widget Você pode selecionar onde posicionar o widget de chat ao vivo no site de acordo com sua preferência. As opções disponíveis são Esquerda & Direita. 4. Idioma O Chatwoot suporta mais de 30 idiomas. O idioma padrão é Inglês. 5. Texto do Lançador Este campo é opcional. Se você usar o design de bolha expandida, pode usar o texto do lançador para personalizar o texto exibido na bolha. Depois de preencher o formulário, clique no botão "Salvar alterações". Além disso, certifique-se de que você criou a caixa de entrada do website no Chatwoot. Passo 5. Verifique se o plugin está funcionando corretamente Visite o seu site e veja se o widget aparece no site!

Como enviar informações adicionais do usuário para o Chatwoot usando o SDK?

O SDK do Chatwoot para sites permite que você envie informações adicionais do usuário para o Chatwoot. Se você instalou nosso código no seu site, o SDK expõe o objeto window.$chatwoot. Para garantir que o SDK tenha sido carregado completamente, certifique-se de escutar o evento chatwoot:ready da seguinte forma: window.addEventListener("chatwoot:ready", function () { // Use window.$chatwoot aqui // ... }); Se você deseja escutar as mensagens no widget, pode usar o seguinte evento. window.addEventListener('chatwoot:on-message', function(e) { console.log('chatwoot:on-message', e.detail) }) Configurações do SDK​ Para ocultar o balão, você pode usar a configuração mencionada abaixo. Observação: Se você usar isto, também deve acionar o widget. window.chatwootSettings = { hideMessageBubble: false, showUnreadMessagesDialog: false, // Desabilita o diálogo de mensagens não lidas position: "left", // Pode ser left ou right locale: "en", // Idioma a ser definido useBrowserLanguage: false, // Definir o idioma do widget pelo navegador do usuário type: "standard", // [standard, expanded_bubble] darkMode: "auto", // [light, auto] // baseDomain: "yourdomain.com" // configure se quiser rastrear usuários entre subdomínios }; Usar idioma do navegador no widget de chat ao vivo automaticamente Para exibir o widget de chat ao vivo no idioma do navegador do usuário, defina useBrowserLanguage como true em window.chatwootSettings mencionado acima. Observação: Se useBrowserLanguage for definido como true, o locale mencionado será ignorado. Se o idioma do navegador não for suportado pelo Chatwoot, será usado o locale informado em locale. Caso também não haja essa configuração, o widget usará o locale do painel do agente. Modo Escuro​ O widget de chat ao vivo do Chatwoot suporta modo escuro a partir da versão v2.4.0. Para ativar o modo escuro, siga os passos mencionados aqui. Designs do widget​ O Chatwoot suporta dois designs para o widget. 1. Padrão (default) 2. Balão expandido Se você estiver usando o balão expandido, pode personalizar o texto utilizado no balão definindo o parâmetro launcherTitle nas chatwootSettings conforme mostrado abaixo. window.chatwootSettings = { type: "expanded_bubble", launcherTitle: "Fale conosco", }; Habilitar janela popout​ Para habilitar a janela popout, adicione a seguinte configuração em chatwootSettings. Esta opção fica desabilitada por padrão. window.chatwootSettings = { // ...Outras configurações showPopoutButton: true, } Você também pode abrir a janela de chat como popout programaticamente com o método `popoutChatWindow()`. Mensagens personalizadas​ Personalize as mensagens de boas-vindas e disponibilidade exibidas no cabeçalho do widget e indicadores de status da equipe. window.chatwootSettings = { // ...Outras configurações welcomeTitle: "Precisa de ajuda?", // Cabeçalho personalizado do widget welcomeDescription: "Estamos aqui para te ajudar.", // Subtítulo do cabeçalho availableMessage: "Estamos online e prontos para conversar!", // Quando a equipe está online unavailableMessage: "No momento estamos offline." // Quando a equipe está indisponível }; Botões de ativação de recursos Ative ou desative funcionalidades opcionais da interface dentro do widget: window.chatwootSettings = { // ...Outras configurações enableFileUpload: true, // Exibir botão de anexar arquivo enableEmojiPicker: true, // Ativar seleção de emoji na entrada do chat enableEndConversation: true // Permite que usuários encerrem a conversa }; Abrir a janela popout programaticamente​ Você pode abrir a janela popout programaticamente com o método popoutChatWindow(). Para iniciar este processo, chame o método conforme abaixo. window.$chatwoot.popoutChatWindow(); Alternar a visibilidade do balão do widget​ Se quiser ocultar/exibir o balão do widget Chatwoot, utilize toggleBubbleVisibility('show/hide') Exemplo window.$chatwoot.toggleBubbleVisibility("show"); // para exibir o balão window.$chatwoot.toggleBubbleVisibility("hide"); // para ocultar o balão Acionar o widget programaticamente Se quiser abrir a janela de chat ao clicar em um link no site, siga o método abaixo. Na sua ação, chame o SDK do Chatwoot conforme descrito abaixo. window.$chatwoot.toggle(); // Alternar widget especificando estado window.$chatwoot.toggle("open"); // Para abrir o widget window.$chatwoot.toggle("close"); // Para fechar o widget Definir o usuário no widget​ window.$chatwoot.setUser("<unique-identifier-key-of-the-user>", { email: "<[email protected]>", name: "<name-of-the-user>", avatar_url: "<avatar-url-of-the-user>", phone_number: "<phone-number-of-the-user>", }); setUser aceita um identificador, que pode ser o user_id em sua base de dados ou qualquer parâmetro único que represente um usuário. Você pode passar email, nome, avatar_url, phone_number como parâmetros. O suporte para parâmetros adicionais está em desenvolvimento. Garanta que você reinicie a sessão quando o usuário fizer logout do seu app. Validação de identidade usando HMAC​ Para evitar personificação e manter a conversa com seus clientes privada, recomendamos configurar a validação de identidade no Chatwoot. A validação de identidade é feita gerando um HMAC (código de autenticação de mensagem baseado em hash) baseado no atributo identifier, usando SHA256. Junto com o identifier, você pode passar também o identifier_hash, como demonstrado abaixo, para garantir que o usuário está correto. window.$chatwoot.setUser(`<unique-identifier-key-of-the-user>`, { name: "", // Nome do usuário avatar_url: "", // URL do avatar email: "", // Email do usuário identifier_hash: "", // Hash do identificador gerado com base no webwidget hmac_token phone_number: "", // Número de telefone do usuário description: "", // descrição sobre o usuário country_code: "", // Código de país com duas letras city: "", // Cidade do usuário company_name: "", // nome da empresa social_profiles: { twitter: "", // Nome do usuário no Twitter linkedin: "", // Nome do usuário no LinkedIn facebook: "", // Nome do usuário no Facebook github: "", // Nome do usuário no Github }, }); Para gerar o HMAC, leia sobre validação de identidade. Observação: implementar autenticação HMAC permite a persistência do histórico de chat entre sessões. Definir atributos personalizados​ Para definir informações extras sobre o cliente, você pode usar o campo de atributos personalizados do cliente. Saiba mais sobre atributos personalizados aqui. Para definir um atributo personalizado, chame setCustomAttributes conforme abaixo window.$chatwoot.setCustomAttributes({ accountId: 1, pricingPlan: "paid", // Aqui a chave precisa já estar definida como atributo personalizado // O valor deve ser baseado no tipo (Atualmente suporta Number, Date, String e Number) }); Você pode visualizar essas informações no painel lateral de uma conversa. Para deletar um atributo personalizado, use deleteCustomAttribute conforme segue window.$chatwoot.deleteCustomAttribute("attribute-key"); Definir idioma manualmente​ window.$chatwoot.setLocale("en"); Para definir o idioma manualmente, use a função setLocale. Definir labels na conversa​ Note que as labels serão definidas somente se o usuário ainda não iniciou uma conversa. Neste caso, os itens a seguir não terão efeito: window.$chatwoot.setLabel("support-ticket"); window.$chatwoot.removeLabel("support-ticket"); Atualizar a sessão (use ao deslogar o usuário do seu app)​ window.$chatwoot.reset(); Erros do widget​ Para identificar erros no widget, certifique-se de escutar o evento chatwoot:event conforme abaixo: window.addEventListener("chatwoot:error", function () { // ... }); Observação: Este recurso está disponível a partir da versão v2.3.0. Personalizar o cabeçalho de boas-vindas e descrição Você pode alterar: - O título e a descrição de boas-vindas - Mensagens exibidas quando sua equipe estiver online ou offline - Ativar ou desativar recursos da interface, como envio de arquivos, seleção de emoji e botão de encerrar conversa window.chatwootSettings = { welcomeTitle: 'Precisa de ajuda?', welcomeDescription: 'Estamos aqui para te ajudar.', availableMessage: 'Estamos online e prontos para conversar!', unavailableMessage: 'No momento estamos offline.', enableFileUpload: true, enableEmojiPicker: true, enableEndConversation: true };

Configurações do chat ao vivo do site explicadas

Este documento vai te ajudar a configurar totalmente o chat ao vivo do seu site. Ele explica como criar e usar configurações adicionais para a caixa de entrada do site desejado. Compatibilidade e requisitos​ O painel web e o widget de chat ao vivo funcionam na maioria dos navegadores modernos. Veja as versões de navegador compatíveis: - Mozilla Firefox: v52 em diante - Google Chrome: v57 em diante - Chromium: v57 em diante - Apple Safari: v14.1 em diante - Microsoft Edge: v16 em diante Veja as versões de sistema operacional móvel suportadas para o app móvel Chatwoot: - Android: v5.0 em diante - iOS: v11.0 em diante Como criar um canal de site no Chatwoot? Passo 1. Vá para a página de Caixas de Entrada. Acesse Configurações → Caixas de Entrada → botão "Adicionar Caixa de Entrada". Passo 2. Clique no ícone "Website". Passo 3. Digite o nome do seu site, URL e outros detalhes conforme descrito abaixo. Os campos disponíveis são explicados abaixo. 1. Nome do site Digite o nome do seu site. Por exemplo, Example Inc. 2. Domínio do site Digite a URL do seu site. Por exemplo, www.example.com 3. Cor do widget Clique na paleta e selecione uma cor para o widget de chat ao vivo do seu site. 4. Título de boas-vindas Escreva uma mensagem de saudação para seus clientes. Por exemplo, Olá 👋 5. Mensagem de boas-vindas Por exemplo: Estamos aqui para ajudar com suas dúvidas. Pergunte qualquer coisa ou envie seu feedback. 6. Ativar/desativar saudação do canal Ative para enviar mensagem de saudação quando o cliente iniciar a conversa 7. Mensagem de saudação do canal Escreva uma saudação para iniciar a conversa. Por exemplo: Oi. Como podemos ajudar? Depois de inserir todos os detalhes, clique no botão “Criar Caixa de Entrada”. Passo 4. "Adicione agentes" à sua caixa de entrada do site. As conversas serão encaminhadas para os agentes apenas se eles estiverem associados à caixa de entrada. Mesmo que você seja Administrador, é necessário se adicionar como agente à Caixa de Entrada para vê-la na sua tela. Selecione os agentes no menu suspenso e clique em Adicionar agentes. Se os agentes não foram adicionados, siga os passos para adicionar agentes. Passo 5. Pronto! Você criou com sucesso uma caixa de entrada do site. Agora, adicione o widget ao seu site. Copie e cole o trecho de código exibido na página em seu site e comece a atender seus clientes. Você pode clicar no botão Copiar para copiar e então colar no arquivo raiz do seu site. Se você clicar no botão "Mais configurações", será direcionado para as Configurações Adicionais da Caixa de Entrada. Se clicar em "Leve-me até lá", você será direcionado para a Caixa de Entrada recém-criada. Passo 6. Se quiser atualizar os agentes com acesso à caixa de entrada, vá em Configurações → Caixas de Entrada. Você verá sua caixa de entrada do site listada lá. Clique em Configurações. Você poderá ver o código e a lista de agentes que têm acesso à caixa de entrada. Complete a configuração da caixa de entrada do site Você já tem uma caixa de entrada do site funcional. Vamos ver as configurações adicionais da Caixa de Entrada.​ Na tela de Caixas de Entrada, clique no ícone de engrenagem para acessar a página de Configurações. Você verá a seguinte tela: Aba Configurações Role para baixo para ver mais configurações, onde você pode configurar várias notificações que deseja receber quando sua caixa de entrada do site começar a funcionar. Veja abaixo alguns exemplos para seu entendimento: Ativar caixa de coleta de e-mail é ativada por padrão. Isso significa que uma mensagem automática para coletar o e-mail será exibida assim que o cliente iniciar uma conversa. O cliente/usuário final receberá um aviso para digitar o e-mail. Ativar CSAT. Ao ativar, a pesquisa de satisfação do cliente será exibida sempre que um ticket for resolvido. Os resultados do CSAT podem ser vistos depois na seção de Relatórios. Clique no botão "Atualizar" para salvar as alterações realizadas. Aba Colaboradores​ Clique na aba "Colaboradores". Aqui, você pode adicionar Agentes à Caixa de Entrada ou remover agentes já adicionados. Você também pode ativar ou desativar o direcionamento automático de novas conversas para os agentes adicionados a essa caixa de entrada. Clique em Atualizar para salvar as alterações. Aba Horário Comercial​ Clique na aba "Horário Comercial". Nesta seção, você pode definir o horário de atendimento da sua equipe. Marque a caixa Ativar disponibilidade comercial para esta caixa de entrada se você tiver horários comerciais bem definidos. Assim que marcar, uma nova seção será aberta, como mostrado abaixo. Aqui você pode escrever a mensagem que será exibida ao cliente fora do horário comercial. Nota: Quando o Captain está ativado em uma caixa de entrada, a mensagem de indisponibilidade é automaticamente suprimida. O Captain lidará com as conversas diretamente, mesmo fora do horário comercial. A mensagem de indisponibilidade só será enviada se o Captain transferir a conversa para um agente humano ou se o Captain não estiver configurado para a caixa de entrada. Você também pode selecionar o horário comercial disponível para cada dia da semana, junto com o fuso horário correto. Clique no botão Atualizar configuração de horário comercial. Aba Formulário Pré-Chat​ Clique na aba "Formulário Pré-Chat". Com isso, você pode coletar informações sobre seus clientes assim que eles entrarem na janela do chat ao vivo/widget do seu site. Você pode usá-lo para coletar nome, e-mail e outros dados antes do início do chat. Os campos exibidos são explicados abaixo: 1. Ativar formulário pré-chat Selecione Sim ou Não. Sim, se deseja usar o formulário pré-chat. Não se quiser deixá-lo desativado. 2. Mensagem Pré-Chat Escreva uma mensagem para iniciar a conversa com o cliente. Por exemplo: Olá, precisamos de algumas informações para te atender melhor. 3. Campos do formulário pré-chat Marque os que forem necessários. Importante: "Nome", "E-mail" e "Telefone" são os únicos atributos padrão do formulário pré-chat. Os demais campos são criados através de atributos personalizados. Se precisar de campos personalizados no formulário, crie-os como atributos personalizados primeiro. Clique no botão "Atualizar". O Formulário Pré-Chat está agora ativado. Aba Configuração​ Clique na aba “Configuração”. Aqui você encontra o trecho de código a ser copiado para o seu site. Você pode clicar no botão Copiar para copiar o código e colar no arquivo raiz do seu site. Aba Construtor de Widget​ Você pode personalizar seu widget web com as configurações simples oferecidas nesta página. Visualize suas alterações ao vivo.