Como enviar informações adicionais do usuário para o Matec usando o SDK?
O SDK do site Matec permite que você envie informações adicionais do usuário ao Matec.
Se você instalou nosso código em seu site, o SDK exporá window.$chatwoot o objeto. Para garantir que o SDK foi
carregado completamente, certifique-se de ouvir o chatwoot:ready evento da seguinte forma:
window.addEventListener("chatwoot:ready", function () {
// Use window.$chatwoot here
// ...
});
Se quiser 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 a bolha, 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, // Disable the unread message dialog
position: "left", // This can be left or right
locale: "en", // Language to be set
useBrowserLanguage: false, // Set widget language from user's browser
type: "standard", // [standard, expanded_bubble]
darkMode: "auto", // [light, auto]
// baseDomain: "yourdomain.com" // configure if you want to track users across subdomains
};
Use o idioma do navegador no seu widget de chat ao vivo automaticamente
Para mostrar o widget de chat ao vivo no idioma do navegador do usuário, defina useBrowserLanguage como
true mencionado window.chatwootSettings acima.
Observação : Se useBrowserLanguage definido como true, o locale idioma mencionado será ignorado. Se o idioma do
navegador não for suportado pelo Matec, a localidade mencionada abaixo locale será usada. Se esta também estiver
ausente, o widget retornará ao locale painel do agente.
Designs de widgets
O Matec suporta dois designs para o widget.
1. Padrão (padrão)
2. Bolha expandida
Se estiver usando um balão expandido, você pode personalizar o texto usado no balão definindo launcherTitle o parâmetro
em chatwootSettings, conforme descrito abaixo.
window.chatwootSettings = {
type: "expanded_bubble",
launcherTitle: "Chat with us",
};
Habilitar janela pop-out
Para habilitar a janela pop-out, adicione a seguinte configuração ao chatwootSettings. Esta opção está desabilitada por
padrão.
window.chatwootSettings = {
// ...Other Config
showPopoutButton: true,
}
You can also popout the chat window programatically with the `popoutChatWindow()` method.
Mensagens personalizadas
Personalize as mensagens de boas-vindas e disponibilidade exibidas no cabeçalho do widget e nos indicadores de status da
equipe.
window.chatwootSettings = {
// ...Other Config
welcomeTitle: "Need help?", // Custom widget header
welcomeDescription: "We’re here to support you.", // Header subtitle
availableMessage: "We’re online and ready to chat!", // When team is online
unavailableMessage: "We’re currently offline." // When team is unavailable
};
Alternâncias de recursos
Habilite ou desabilite recursos opcionais da interface do usuário dentro do widget:
window.chatwootSettings = {
// ...Other Config
enableFileUpload: true, // Show file attachment button
enableEmojiPicker: true, // Enable emoji picker in the chat input
enableEndConversation: true // Let users end the conversation
};
Abra programaticamente a janela pop-out
Você pode abrir a janela pop-out programaticamente com o popoutChatWindow() método.
Para iniciar isso, chame o método como abaixo.
window.$chatwoot.popoutChatWindow();
Alternar a visibilidade do balão do widget
Se você quiser ocultar/mostrar o balão do widget Matec, você pode fazer isso com toggleBubbleVisibility('show/hide')
window.$chatwoot.toggleBubbleVisibility("show"); // to display the bubble
window.$chatwoot.toggleBubbleVisibility("hide"); // to hide the bubble
Acionar widget programaticamente
Se quiser abrir a janela de bate-papo clicando em um link no site, siga o método abaixo. Na sua ação, chame o SDK do
Matec conforme descrito abaixo.
window.$chatwoot.toggle();
// Toggle widget by passing state
window.$chatwoot.toggle("open"); // To open widget
window.$chatwoot.toggle("close"); // To close widget
Defina 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 um user_id no seu banco de dados ou qualquer parâmetro exclusivo que
represente um usuário. Você pode passar e-mail, nome, avatar_url e telefone 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 Matec. A validação de identidade é habilitada gerando um HMAC (código de autenticação de mensagem baseado
em hash) com base no identifier atributo, usando SHA256. Além disso, identifier você também pode passar o código
identifier_hash , como mostrado abaixo, para garantir que o usuário esteja correto.
window.$chatwoot.setUser(`<unique-identifier-key-of-the-user>`, {
name: "", // Name of the user
avatar_url: "", // Avatar URL
email: "", // Email of the user
identifier_hash: "", // Identifier Hash generated based on the webwidget hmac_token
phone_number: "", // Phone Number of the user
description: "", // description about the user
country_code: "", // Two letter country code
city: "", // City of the user
company_name: "", // company name
social_profiles: {
twitter: "", // Twitter user name
linkedin: "", // LinkedIn user name
facebook: "", // Facebook user name
github: "", // Github user name
},
});
Para gerar o HMAC, leia a 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.
Saiba mais sobre atributos personalizados aqui .
Para definir um atributo personalizado, chame setCustomAttributes da seguinte forma
window.$chatwoot.setCustomAttributes({
accountId: 1,
pricingPlan: "paid",
// Here the key which is already defined in custom attribute
// Value should be based on type (Currently support Number, Date, String and Number)
});
Você pode visualizar essas informações no painel lateral de uma conversa.
Para excluir um atributo personalizado, use deleteCustomAttribute o seguinte:
window.$chatwoot.deleteCustomAttribute("attribute-key");
Definir idioma manualmente
window.$chatwoot.setLocale("en");
Para definir o idioma manualmente, use a setLocale função .
Defina rótulos na conversa
Observe que os marcadores serão definidos em uma conversa se o usuário não tiver iniciado uma conversa. Nesse caso, os
seguintes itens não terão efeito:
window.$chatwoot.setLabel("support-ticket");
window.$chatwoot.removeLabel("support-ticket");
Atualize a sessão (use isso enquanto você desconecta o usuário do seu aplicativo)
window.$chatwoot.reset();
Erros de widget
Para ver quaisquer erros no widget, certifique-se de ouvir o chatwoot:event evento da seguinte maneira:
window.addEventListener("chatwoot:error", function () {
// ...
});
.jpg)