O SDK do Whatzaz permite enviar informações adicionais de usuários para o Whatzaz, proporcionando uma comunicação mais personalizada e eficiente.
Ao instalar o código do Whatzaz em seu site, o SDK expõe o objeto window.$Whatzaz. Para garantir que o SDK foi carregado completamente, ouça o evento Whatzaz:ready da seguinte maneira:
window.addEventListener("Whatzaz:ready", function () {
// Use window.$Whatzaz aqui
// ...
});
Para ouvir as mensagens do widget, utilize o evento abaixo:
window.addEventListener('Whatzaz:on-message', function(e) {
console.log('Whatzaz: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.WhatzazSettings = {
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 Whatzaz suporta modo escuro. Para ativá-lo, basta configurar darkMode para auto no objeto Whatzaz**Settings**.
Modelos de Widget#
O Whatzaz 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.WhatzazSettings = {
type: "expanded_bubble",
launcherTitle: "Converse conosco"
};
Ativar a Janela Pop-Out#
Para habilitar a janela pop-out, adicione a configuração abaixo aWhatzaz**Settings**:
window.WhatzazSettings = {
showPopoutButton: true
};
É possível abrir a janela pop-out programaticamente com o método popoutChatWindow():
window.$Whatzaz.popoutChatWindow();
Alternar a Visibilidade da Bolha#
Para mostrar ou esconder a bolha do Whatzaz, use toggleBubbleVisibility('show/hide'):
window.$Whatzaz.toggleBubbleVisibility("show"); // mostrar a bolha
window.$Whatzaz.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.$Whatzaz.toggle(); // Alterna o estado
window.$Whatzaz.toggle("open"); // Abre o widget
window.$Whatzaz.toggle("close"); // Fecha o widget
Definir Usuário no Widget#
Para definir o usuário no widget, utilize setUser:
window.$Whatzaz.setUser("<identificador-único-do-usuário>", {
email: "email@dominio.com",
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.$Whatzaz.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.$Whatzaz.setCustomAttributes({
accountId: 1,
pricingPlan: "pago"
});
Para excluir um atributo, utilize deleteCustomAttribute:
window.$Whatzaz.deleteCustomAttribute("nome-do-atributo");
Definir Idioma Manualmente#
Use setLocale para definir o idioma:
window.$Whatzaz.setLocale("pt");
Configurar Etiquetas na Conversa#
Para adicionar etiquetas em uma conversa, use setLabel:
window.$Whatzaz.setLabel("suporte");
window.$Whatzaz.removeLabel("suporte");
Atualizar a Sessão#
Para redefinir a sessão ao desconectar o usuário, utilize:
window.$Whatzaz.reset();
Erros do Widget#
Para verificar erros no widget, ouça o evento Whatzaz**:error**:
window.addEventListener("Whatzaz:error", function () {
// ...
});
Observação: Este recurso está disponível a partir da versão 2.3.0.