O SDK do Chatwoot permite enviar informações adicionais de usuários para o Chatwoot, proporcionando uma comunicação mais personalizada e eficiente.
Ao instalar o código do Chatwoot em seu site, o SDK expõe o objeto window.$chatwoot. Para garantir que o SDK foi carregado completamente, ouça o evento chatwoot:ready da seguinte maneira:
window.addEventListener("chatwoot:ready", function () {
// Use window.$chatwoot aqui
// ...
});
Para ouvir as mensagens do widget, utilize o evento abaixo:
window.addEventListener('chatwoot:on-message', function(e) {
console.log('chatwoot:on-message', e.detail);
});
Configurações do SDK
Para ocultar a bolha do chat, use a configuração abaixo. Lembre-se de ativar 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", // Defina o idioma
useBrowserLanguage: false, // Define o idioma do widget pelo navegador do usuário
type: "standard", // [standard, expanded_bubble]
darkMode: "auto" // [light, auto]
};
Usar o Idioma do Navegador no Widget
Para mostrar o widget no idioma do navegador do usuário, ajuste useBrowserLanguage para true. Observação: se o idioma do navegador não for suportado, o widget usará o idioma configurado em locale.
Modo Escuro
A partir da versão 2.4.0, o widget de chat Chatwoot suporta modo escuro. Para ativá-lo, basta configurar darkMode para auto no objeto chatwootSettings.
Modelos de Widget
O Chatwoot oferece dois modelos de widget: o padrão e o bolha expandida. 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
};
É possível abrir a janela pop-out programaticamente com o método popoutChatWindow():
window.$chatwoot.popoutChatWindow();
Alternar a Visibilidade da Bolha
Para mostrar ou esconder a bolha do Chatwoot, use toggleBubbleVisibility('show/hide'):
window.$chatwoot.toggleBubbleVisibility("show"); // mostrar a bolha
window.$chatwoot.toggleBubbleVisibility("hide"); // ocultar a bolha
Abrir o Widget Programaticamente
Para abrir o chat clicando em um link, use o método toggle do SDK:
window.$chatwoot.toggle(); // Alterna o estado
window.$chatwoot.toggle("open"); // Abre o widget
window.$chatwoot.toggle("close"); // Fecha o widget
Definir Usuário no Widget
Para definir o usuário no widget, utilize setUser:
window.$chatwoot.setUser("<identificador-único-do-usuário>", {
email: "[email protected]",
name: "Nome do Usuário",
avatar_url: "URL-do-avatar",
phone_number: "Número de telefone"
});
Validação de Identidade com HMAC
Para evitar a falsificação de identidade e garantir privacidade, ative a validação de identidade com HMAC (código de autenticação de mensagens). Use identifier_hash com base no token HMAC:
window.$chatwoot.setUser("<identificador-único>", {
name: "",
avatar_url: "",
email: "",
identifier_hash: "",
phone_number: "",
description: "",
country_code: "",
city: "",
company_name: "",
social_profiles: {
twitter: "",
linkedin: "",
facebook: "",
github: ""
}
});
Definir Atributos Personalizados
Para adicionar informações adicionais sobre o cliente, utilize setCustomAttributes:
window.$chatwoot.setCustomAttributes({
accountId: 1,
pricingPlan: "pago"
});
Para excluir um atributo, utilize deleteCustomAttribute:
window.$chatwoot.deleteCustomAttribute("nome-do-atributo");
Definir Idioma Manualmente
Use setLocale para definir o idioma:
window.$chatwoot.setLocale("pt");
Configurar Etiquetas na Conversa
Para adicionar etiquetas em uma conversa, use setLabel:
window.$chatwoot.setLabel("suporte");
window.$chatwoot.removeLabel("suporte");
Atualizar a Sessão
Para redefinir a sessão ao desconectar o usuário, utilize:
window.$chatwoot.reset();
Erros do Widget
Para verificar erros no widget, ouça o evento chatwoot:error:
window.addEventListener("chatwoot:error", function () {
// ...
});
Observação: Este recurso está disponível a partir da versão 2.3.0.