Manipulação JavaScript

O widget TAU oferece uma API JavaScript completa para controle programático. Use esses métodos para integrar o widget com sua aplicação de forma avançada.

🚀 Métodos Básicos de Controle

openChat() method

Abre a janela do chat programaticamente.

// Abrir o chat
window.myChatbot.openChat();

closeChat() method

Fecha a janela do chat programaticamente.

// Fechar o chat
window.myChatbot.closeChat();

toggleChatHome() method

Alterna entre aberto e fechado o estado do chat.

// Alternar estado do chat
window.myChatbot.toggleChatHome();

isChatOpen property

Propriedade que indica se o chat está aberto.

// Verificar se o chat está aberto
if (window.myChatbot.isChatOpen) {
    console.log('Chat está aberto');
} else {
    console.log('Chat está fechado');
}

⚙️ Métodos de Configuração

updateConfig(newConfig) method

Atualiza a configuração do widget em tempo real.

// Atualizar configuração
window.myChatbot.updateConfig({
    chatbotButtonBackground: '#FF5722',
    defaultMessage: 'Nova mensagem padrão',
    enableWhatsApp: true
});

// Atualização múltipla
window.myChatbot.updateConfig({
    mode: 'cool',
    autoOpen: true,
    chatbotButtonSize: 70
});

config property

Acesso direto ao objeto de configuração atual.

// Ler configuração atual
console.log('Configuração atual:', window.myChatbot.config);

// Verificar configuração específica
if (window.myChatbot.config.enableWhatsApp) {
    console.log('Modo WhatsApp ativo');
}

openChatWithMessage(message) method

Abre o chat com uma mensagem específica pré-preenchida.

// Abrir com mensagem específica
window.myChatbot.openChatWithMessage('Preciso de ajuda com meu pedido');

// Mensagem de emergência
window.myChatbot.openChatWithMessage('URGENTE: Problema no sistema!');

🔄 Métodos de Ciclo de Vida

reloadWidget() method

Recarrega completamente o widget com a configuração atual.

// Recarregar widget
window.myChatbot.reloadWidget();

// Útil após grandes mudanças de configuração
window.myChatbot.updateConfig({ mode: 'cool' });
window.myChatbot.reloadWidget();

destroy() method

Remove completamente o widget e limpa recursos.

// Remover widget completamente
window.myChatbot.destroy();

// Verificar se foi removido
if (!window.myChatbot) {
    console.log('Widget removido com sucesso');
}

updateChatbotButtonVisibility() method

Controla a visibilidade do botão do chat.

// Mostrar/ocultar botão baseado em condições
if (userIsLoggedIn) {
    window.myChatbot.config.showChatbotButton = true;
} else {
    window.myChatbot.config.showChatbotButton = false;
}
window.myChatbot.updateChatbotButtonVisibility();

dismissChatbotTextCallout() method

Remove o texto de callout/balão que pode aparecer próximo ao botão.

// Remover callout após interação
window.myChatbot.dismissChatbotTextCallout();

📡 Integração com Eventos

Exemplo: Controle Baseado em Eventos

// Sistema de controle avançado baseado em eventos
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://app.taubot.ai') return;
    
    switch(event.data.type) {
        case 'Opened chat window':
            // Chat foi aberto
            console.log('Chat aberto pelo usuário');
            
            // Atualizar analytics
            gtag('event', 'chat_opened');
            
            // Mudar aparência do botão
            window.myChatbot.updateConfig({
                chatbotButtonBackground: '#4CAF50'
            });
            break;
            
        case 'Sent message':
            // Usuário enviou mensagem
            console.log('Mensagem enviada');
            
            // Notificar equipe de suporte
            notifySupport();
            break;
            
        case 'conversion':
            // Conversão aconteceu
            console.log('Conversão registrada!');
            
            // Celebrar com confetti
            showConfetti();
            
            // Mudar para modo success
            window.myChatbot.updateConfig({
                chatbotButtonBackground: '#00C853'
            });
            break;
    }
});

🎯 Casos de Uso Práticos

1. Chat Contextual por Página

// Configurar mensagem baseada na página atual
function setupContextualChat() {
    const path = window.location.pathname;
    let defaultMessage = '';
    
    if (path.includes('/produtos/')) {
        defaultMessage = 'Olá! Preciso de ajuda com este produto.';
    } else if (path.includes('/checkout/')) {
        defaultMessage = 'Tenho uma dúvida sobre meu pedido.';
    } else if (path.includes('/suporte/')) {
        defaultMessage = 'Preciso de suporte técnico.';
    }
    
    if (defaultMessage && window.myChatbot) {
        window.myChatbot.updateConfig({ defaultMessage });
    }
}

// Executar quando widget carregar
window.addEventListener('message', function(event) {
    if (event.data.type === 'Loaded app') {
        setupContextualChat();
    }
});

2. Chat com Timer de Inatividade

// Abrir chat automaticamente após período de inatividade
let inactivityTimer;
let lastActivity = Date.now();

function resetInactivityTimer() {
    lastActivity = Date.now();
    clearTimeout(inactivityTimer);
    
    inactivityTimer = setTimeout(() => {
        if (!window.myChatbot.isChatOpen) {
            window.myChatbot.openChatWithMessage(
                'Posso ajudar você a encontrar o que precisa?'
            );
        }
    }, 30000); // 30 segundos
}

// Detectar atividade do usuário
['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'].forEach(event => {
    document.addEventListener(event, resetInactivityTimer, true);
});

resetInactivityTimer();

3. Chat com Múltiplos Modos

// Sistema de modos de chat diferentes
const chatModes = {
    support: {
        chatbotButtonBackground: '#2196F3',
        defaultMessage: 'Como posso ajudar com suporte?',
        defaultRoute: 'chat'
    },
    sales: {
        chatbotButtonBackground: '#4CAF50',
        defaultMessage: 'Interessado em nossos produtos?',
        enableWhatsApp: true
    },
    emergency: {
        chatbotButtonBackground: '#F44336',
        defaultMessage: 'URGENTE: Preciso de ajuda!',
        autoOpen: true,
        mode: 'cool'
    }
};

function switchChatMode(mode) {
    if (chatModes[mode] && window.myChatbot) {
        window.myChatbot.updateConfig(chatModes[mode]);
        console.log(`Chat mode switched to: ${mode}`);
    }
}

// Uso baseado em condições
if (isBusinessHours()) {
    switchChatMode('support');
} else {
    switchChatMode('emergency');
}

4. Integração com Formulários

// Abrir chat quando formulário falha
document.addEventListener('submit', function(event) {
    const form = event.target;
    
    // Interceptar erros de validação
    if (!form.checkValidity()) {
        event.preventDefault();
        
        // Oferecer ajuda via chat
        setTimeout(() => {
            window.myChatbot.openChatWithMessage(
                'Está com dificuldades no formulário? Posso ajudar!'
            );
        }, 1000);
    }
});

// Chat para campos específicos
document.querySelectorAll('input[data-complex]').forEach(input => {
    input.addEventListener('focus', () => {
        window.myChatbot.updateConfig({
            defaultMessage: `Preciso de ajuda com: ${input.placeholder}`
        });
    });
});

🛡️ Boas Práticas e Segurança

Verificação Segura de Métodos

// Função helper para verificação segura
function safeWidgetCall(method, ...args) {
    if (window.myChatbot && typeof window.myChatbot[method] === 'function') {
        return window.myChatbot[method](...args);
    } else {
        console.warn(`Widget method ${method} not available`);
        return false;
    }
}

// Uso seguro
safeWidgetCall('openChat');
safeWidgetCall('updateConfig', { mode: 'cool' });
safeWidgetCall('openChatWithMessage', 'Olá!');

Aguardar Carregamento do Widget

// Promise para aguardar widget carregar
function waitForWidget(timeout = 10000) {
    return new Promise((resolve, reject) => {
        if (window.myChatbot) {
            resolve(window.myChatbot);
            return;
        }
        
        const checkInterval = setInterval(() => {
            if (window.myChatbot) {
                clearInterval(checkInterval);
                clearTimeout(timeoutId);
                resolve(window.myChatbot);
            }
        }, 100);
        
        const timeoutId = setTimeout(() => {
            clearInterval(checkInterval);
            reject(new Error('Widget failed to load within timeout'));
        }, timeout);
    });
}

// Uso com async/await
async function initializeChat() {
    try {
        const widget = await waitForWidget();
        widget.updateConfig({
            defaultMessage: 'Widget carregado com sucesso!'
        });
    } catch (error) {
        console.error('Failed to load widget:', error);
    }
}

🔧 Manipulação JavaScript Avançada

🚀 Métodos Básicos de Controle

⚙️ Métodos de Configuração

🔄 Métodos de Ciclo de Vida

📡 Integração com Eventos

Exemplo: Controle Baseado em Eventos

🎯 Casos de Uso Práticos

1. Chat Contextual por Página

2. Chat com Timer de Inatividade

3. Chat com Múltiplos Modos

4. Integração com Formulários

🛡️ Boas Práticas e Segurança

Verificação Segura de Métodos

Aguardar Carregamento do Widget