O SDK do site Chatwoot permite que você envie informações adicionais do usuário para o Chatwoot.
Se você instalou nosso código em seu site, o SDK exporá o objeto window.$chatwoot. Para garantir que o SDK foi carregado completamente, certifique-se de ouvir o evento chatwoot:ready da seguinte forma:
window.addEventListener("chatwoot:ready", function () {
// Use window.$chatwoot aqui
// ...
});
Se desejar ouvir as mensagens no widget, você 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 isso, também deverá acionar o widget.
window.chatwootSettings = {
hideMessageBubble: false,
showUnreadMessagesDialog: false, // Desativa a caixa de diálogo de mensagens não lidas
position: "left", // Pode ser à esquerda ou à direita
locale: "en", // Idioma a ser definido
useBrowserLanguage: false, // Define o idioma do widget a partir do navegador do usuário
type: "standard", // [standard, expanded_bubble]
darkMode: "auto", // [light, auto]
// baseDomain: "yourdomain.com" // configure se deseja rastrear usuários em subdomínios
};
Usar o idioma do navegador no widget de chat ao vivo automaticamente
Para exibir o widget de chat ao vivo na localidade do navegador do usuário, defina useBrowserLanguage como true em window.chatwootSettings mencionado acima.
Observação: Se useBrowserLanguage for definido como true, a localidade mencionada será ignorada. Se o idioma do navegador não for compatível com o chatwoot, a localidade mencionada em locale será usada. Se esta também estiver ausente, o widget retornará para a localidade do painel do agente.
Modo Escuro
O widget de chat ao vivo do Chattwoot é compatível com o modo escuro a partir da versão 2.4.0. Para ativar o modo escuro, siga os passos mencionados aqui.
Designs de widget
O Chattwoot oferece suporte a dois designs para o widget.
- Padrão (padrão)
- Expandido bolha
Se estiver usando uma bolha expandida, você pode personalizar o texto usado na bolha definindo o parâmetro launcherTitle em chatwootSettings, conforme descrito abaixo.
window.chatwootSettings = {
type: "expanded_bubble",
launcherTitle: "Converse conosco",
};
Habilitar janela pop-out
Para habilitar a janela pop-out, adicione a seguinte configuração em chatwootSettings. Esta opção está desabilitada por padrão.
window.chatwootSettings = {
// ...Outras Configurações
showPopoutButton: true,
}
Você também pode habilitar a janela de bate-papo programaticamente com o método `popoutChatWindow()`.
Abra a janela pop-out programaticamente
Você pode abrir a janela pop-out programaticamente com o método popoutChatWindow().
Para iniciar isso, chame o método como abaixo.
window.$chatwoot.popoutChatWindow();
Alternar a visibilidade do balão do widget
Se quiser ocultar/mostrar o balão do widget do Chatwoot, você pode fazer isso com toggleBubbleVisibility('show/hide')
Exemplo
window.$chatwoot.toggleBubbleVisibility("show"); // para exibir o balão
window.$chatwoot.toggleBubbleVisibility("hide"); // para ocultar a bolha
Acionar widget programaticamente
Se você quiser abrir o chatPara abrir uma janela clicando 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 passando o estado
window.$chatwoot.toggle("open"); // Para abrir o widget
window.$chatwoot.toggle("close"); // Para fechar o widget
Defina o usuário no widget
window.$chatwoot.setUser("<chave-de-identificação-única-do-usuário>", {
e-mail: "<endereço-de-e-mail-do-usuário@seu-dominio.com>",
nome: "<nome-do-usuário>",
url_do-avatar: "<url-do-avatar-do-usuário>",
número_de_telefone: "<número-de-telefone-do-usuário>",
});
setUser aceita um identificador que pode ser um user_id em seu banco de dados ou qualquer parâmetro exclusivo que represente um usuário. Você pode passar e-mail, nome, avatar_url, telefone_número como parâmetros. O suporte para parâmetros adicionais está em andamento.
Certifique-se de redefinir a sessão quando o usuário sair do seu aplicativo.
Validação de identidade usando HMAC
Para impedir a personificação e manter a conversa com seus clientes privada, recomendamos configurar a validação de identidade no Chatwoot. A validação de identidade é habilitada pela geração de um HMAC (código de autenticação de mensagem baseado em hash) com base no atributo identifier, utilizando SHA256. Junto com o identifier, você pode passar identifier_hash, como mostrado abaixo, para garantir que o usuário seja o correto.
window.$chatwoot.setUser(`<unique-identifier-key-of-the-user>`, {
name: "", // Nome do usuário
avatar_url: "", // URL do avatar
email: "", // E-mail 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 do país com duas letras
city: "", // Cidade do usuário
company_name: "", // nome da empresa
social_profiles: {
twitter: "", // Nome de usuário do Twitter
linkedin: "", // Nome de usuário do LinkedIn
facebook: "", // Nome de usuário do Facebook
github: "", // Nome de usuário do Github
},
});
Para gerar o HMAC, leia validação de identidade. Observe que a implementação da autenticação HMAC permitirá que o histórico de bate-papo persista entre as sessões.
Definir atributos personalizados
Para definir informações adicionais sobre o cliente, você pode usar o campo de atributos personalizados do cliente. Leia mais sobre atributos personalizados aqui.
Para definir um atributo personalizado, chame setCustomAttributes da seguinte forma:
window.$chatwoot.setCustomAttributes({
accountId: 1,
pricingPlan: "paid",
// Aqui, a chave que já está definida no atributo personalizado
// O valor deve ser baseado no tipo (atualmente, suporta Número, Data, String e Número)
});
Você pode visualizar essas informações no painel lateral de uma conversa.
Para excluir um atributo personalizado, use deleteCustomAttribute da seguinte forma:
window.$chatwoot.deleteCustomAttribute("attribute-key"); ```
### Definir idioma manualmente[](https://www.chatwoot.com/docs/product/channels/live-chat/sdk/setup#set-language-manually "Link direto para o título")[#](#set-language-manually "Definir idioma manualmente")
window.$chatwoot.setLocale("en");
Para definir o idioma manualmente, use a função `setLocale`.
### Definir rótulos na conversa[](https://www.chatwoot.com/docs/product/channels/live-chat/sdk/setup#set-labels-on-the-conversation "Link direto para o título")[#](#set-labels-on-the-conversation "Definir rótulos na conversa")
Observe que os rótulos serão definidos em uma conversa se o usuário não tiver iniciado uma. Nesse caso, os seguintes itens não terão efeito:
window.$chatwoot.setLabel("support-ticket");
window.$chatwoot.removeLabel("support-ticket");
### Atualizar a sessão (use isto enquanto desconecta o usuário do seu aplicativo)[](https://www.chatwoot.com/docs/product/channels/live-chat/sdk/setup#refresh-the-session-use-this-while-you-logout-the-user-from-your-app "Link direto para o título")[#](#refresh-the-session-use-this-while-you-logout-the-user-from-your-app "Atualizar a sessão (use isto enquanto desconecta o usuário do seu aplicativo)")
window.$chatwoot.reset();
### Erros de widget[](https://www.chatwoot.com/docs/product/channels/live-chat/sdk/setup#widget-errors "Link direto para o título")[#](#widget-errors "Erros de widget")
Para ver quaisquer erros no widget, certifique-se de ouvir `chatwoot:event` event da seguinte forma:
window.addEventListener("chatwoot:error", function () {
// …
});
Observação: este recurso está disponível na versão 2.3.0 e posteriores.