💡 Exemplos Práticos

Veja como implementar o widget TAU em diferentes cenários reais. Cada exemplo inclui código completo e explicações detalhadas.

lightbulb Prontos para Usar

Todos os exemplos são funcionais e podem ser copiados diretamente para seu projeto. Apenas substitua os valores de configuração pelos seus.

🛍️ E-commerce

Loja Online com Suporte Contextual

Widget que adapta a mensagem baseada na página visitada:

<script>
    // Configuração contextual baseada na página
    function getContextualConfig() {
        const path = window.location.pathname;
        const baseConfig = {
            appId: 'minha-loja.com',
            chatbotButtonBackground: '#FF6B35',
            chatbotButtonSize: 65,
            mode: 'cool'
        };

        if (path.includes('/produto/')) {
            return {
                ...baseConfig,
                defaultMessage: 'Tenho dúvidas sobre este produto',
                defaultRoute: 'chat'
            };
        } else if (path.includes('/carrinho/')) {
            return {
                ...baseConfig,
                defaultMessage: 'Preciso de ajuda com meu carrinho',
                autoOpen: true
            };
        } else if (path.includes('/checkout/')) {
            return {
                ...baseConfig,
                defaultMessage: 'Estou com problemas no checkout',
                enableWhatsApp: true,
                whatsAppMessage: 'URGENTE: Problema no checkout!'
            };
        }
        
        return {
            ...baseConfig,
            defaultMessage: 'Como posso ajudar com sua compra?'
        };
    }

    window.taubotConfig = getContextualConfig();
    
    // Carregar widget
    (function() {
        var script = document.createElement('script');
        script.src = 'https://app.taubot.ai/widget/widget.js';
        script.async = true;
        document.head.appendChild(script);
    })();
</script>

Carrinho Abandonado

Detecta quando o usuário tenta sair da página com itens no carrinho:

// Detectar carrinho abandonado
let cartItems = JSON.parse(localStorage.getItem('cart') || '[]');

if (cartItems.length > 0) {
    let hasLeftPage = false;
    
    document.addEventListener('mouseleave', function(e) {
        if (e.clientY <= 0 && !hasLeftPage) {
            hasLeftPage = true;
            
            // Abrir chat com oferta especial
            setTimeout(() => {
                if (window.myChatbot) {
                    window.myChatbot.openChatWithMessage(
                        'Espere! Você esqueceu itens no carrinho. Posso ajudar a finalizar sua compra com 10% de desconto!'
                    );
                }
            }, 1000);
        }
    });
}

📚 Educação

Plataforma de Ensino Online

Widget que oferece suporte baseado no progresso do aluno:

<script>
    // Configuração para plataforma educacional
    const studentProgress = getUserProgress(); // Função personalizada
    
    let config = {
        appId: 'escola-online.edu.br',
        chatbotButtonBackground: '#4CAF50',
        chatbotButtonForeground: '#FFFFFF',
        mode: 'default'
    };

    // Adaptar baseado no progresso
    if (studentProgress < 25) {
        config.defaultMessage = 'Preciso de ajuda para começar os estudos';
        config.calloutText = 'Começando? Estou aqui para ajudar!';
    } else if (studentProgress < 75) {
        config.defaultMessage = 'Tenho dúvidas sobre o conteúdo';
        config.calloutText = 'Dúvidas? Vamos resolver juntos!';
    } else {
        config.defaultMessage = 'Preciso de orientação para conclusão';
        config.calloutText = 'Quase formando! Como posso ajudar?';
    }

    // Se está em horário de aula, usar WhatsApp
    const now = new Date();
    const isClassTime = now.getHours() >= 19 && now.getHours() <= 22;
    
    if (isClassTime) {
        config.enableWhatsApp = true;
        config.whatsAppMessage = 'Estou assistindo a aula e preciso de ajuda';
    }

    window.taubotConfig = config;
    
    // Função para obter progresso do estudante
    function getUserProgress() {
        // Implementar lógica baseada no seu sistema
        return parseInt(localStorage.getItem('courseProgress') || '0');
    }
</script>

🏥 Saúde

Clínica Médica

Widget para agendamento e suporte médico:

<script>
    window.taubotConfig = {
        appId: 'clinica-saude.med.br',
        chatbotButtonBackground: '#2196F3',
        chatbotButtonSize: 70,
        mode: 'cool',
        defaultRoute: 'chat'
    };

    // Horário de funcionamento
    function isOfficeHours() {
        const now = new Date();
        const day = now.getDay(); // 0 = domingo
        const hour = now.getHours();
        
        // Segunda a sexta: 8h às 18h
        if (day >= 1 && day <= 5) {
            return hour >= 8 && hour < 18;
        }
        // Sábado: 8h às 12h
        if (day === 6) {
            return hour >= 8 && hour < 12;
        }
        return false;
    }

    // Configurar mensagem baseada no horário
    if (isOfficeHours()) {
        window.taubotConfig.defaultMessage = 'Gostaria de agendar uma consulta';
        window.taubotConfig.autoOpen = false;
    } else {
        window.taubotConfig.defaultMessage = 'EMERGÊNCIA: Preciso de atendimento urgente';
        window.taubotConfig.enableWhatsApp = true;
        window.taubotConfig.whatsAppNumber = '+5511999887766';
        window.taubotConfig.whatsAppMessage = 'EMERGÊNCIA MÉDICA - Fora do horário';
        window.taubotConfig.chatbotButtonBackground = '#F44336'; // Vermelho para emergência
    }
</script>

🏨 Hotelaria

Hotel Resort

Suporte diferenciado para hóspedes e visitantes:

<script>
    // Detectar se é hóspede ativo
    const isGuest = localStorage.getItem('hotel_guest_id');
    const roomNumber = localStorage.getItem('room_number');
    
    let config = {
        appId: 'resort-paradise.com.br',
        chatbotButtonBackground: '#FF9800',
        mode: 'cool'
    };

    if (isGuest) {
        // Configuração para hóspedes
        config.defaultMessage = `Quarto ${roomNumber}: Como posso ajudar?`;
        config.user = {
            id: localStorage.getItem('hotel_guest_id'),
            name: localStorage.getItem('guest_name'),
            room: roomNumber
        };
        config.chatbotButtonBackground = '#4CAF50'; // Verde para hóspedes
    } else {
        // Configuração para visitantes
        config.defaultMessage = 'Gostaria de fazer uma reserva';
        config.enableWhatsApp = true;
        config.whatsAppMessage = 'Olá! Gostaria de informações sobre reservas';
    }

    // Serviços especiais durante a estadia
    if (isGuest) {
        const currentHour = new Date().getHours();
        
        // Room service noturno
        if (currentHour >= 22 || currentHour <= 6) {
            config.defaultMessage = `Quarto ${roomNumber}: Gostaria de room service`;
        }
        // Concierge durante o dia
        else if (currentHour >= 9 && currentHour <= 18) {
            config.defaultMessage = `Quarto ${roomNumber}: Informações sobre passeios e atividades`;
        }
    }

    window.taubotConfig = config;
</script>

💼 SaaS/B2B

Plataforma SaaS

Suporte técnico escalonado por plano do usuário:

<script>
    // Obter informações do usuário logado
    const userPlan = getUserPlan(); // 'free', 'pro', 'enterprise'
    const isTrialUser = isInTrial();
    
    let config = {
        appId: 'minha-saas.com',
        chatbotButtonSize: 60,
        mode: 'default'
    };

    // Configuração baseada no plano
    switch(userPlan) {
        case 'enterprise':
            config.chatbotButtonBackground = '#6A1B9A'; // Roxo premium
            config.defaultMessage = 'Suporte Enterprise - Como posso ajudar?';
            config.autoOpen = false;
            config.defaultRoute = 'chat';
            break;
            
        case 'pro':
            config.chatbotButtonBackground = '#1976D2'; // Azul pro
            config.defaultMessage = 'Suporte Pro - Em que posso ajudar?';
            config.defaultRoute = 'chat';
            break;
            
        case 'free':
            config.chatbotButtonBackground = '#388E3C'; // Verde free
            config.defaultMessage = 'Dúvidas sobre como usar a plataforma?';
            config.defaultRoute = 'home';
            break;
    }

    // Usuário em trial - mais proativo
    if (isTrialUser) {
        config.autoOpen = true;
        config.defaultMessage = 'Como está sendo sua experiência? Posso ajudar?';
        config.chatbotButtonBackground = '#FF5722'; // Laranja para trial
    }

    // Suporte durante horário comercial vs. fora do horário
    const isBusinessHours = checkBusinessHours();
    if (!isBusinessHours && userPlan !== 'enterprise') {
        config.enableWhatsApp = true;
        config.whatsAppMessage = `Usuário ${userPlan}: Suporte fora do horário comercial`;
    }

    window.taubotConfig = config;
    
    function getUserPlan() {
        return document.body.dataset.userPlan || 'free';
    }
    
    function isInTrial() {
        return document.body.dataset.trialUser === 'true';
    }
    
    function checkBusinessHours() {
        const now = new Date();
        const hour = now.getHours();
        const day = now.getDay();
        return day >= 1 && day <= 5 && hour >= 9 && hour <= 18;
    }
</script>

🎯 Marketing/Landing Pages

Landing Page de Campanha

Widget otimizado para conversão com UTM tracking:

<script>
    // Capturar UTM parameters para contexto
    const urlParams = new URLSearchParams(window.location.search);
    const utmSource = urlParams.get('utm_source');
    const utmCampaign = urlParams.get('utm_campaign');
    
    let config = {
        appId: 'landing-campaign.com',
        chatbotButtonBackground: '#E91E63',
        chatbotButtonSize: 75,
        mode: 'cool',
        autoOpen: true
    };

    // Personalizar mensagem baseada na origem
    let welcomeMessage = 'Interessado em nossa solução?';
    
    if (utmSource === 'google') {
        welcomeMessage = 'Veio do Google? Ótima escolha! Como posso ajudar?';
    } else if (utmSource === 'facebook') {
        welcomeMessage = 'Olá! Vi que veio do Facebook. Posso esclarecer suas dúvidas?';
    } else if (utmSource === 'email') {
        welcomeMessage = 'Obrigado por clicar no email! Vamos conversar?';
    }
    
    // Adicionar informações da campanha
    if (utmCampaign) {
        welcomeMessage += ` (Campanha: ${utmCampaign})`;
    }
    
    config.defaultMessage = welcomeMessage;
    
    // Auto-abrir apenas para tráfego pago
    const paidSources = ['google', 'facebook', 'linkedin'];
    config.autoOpen = paidSources.includes(utmSource);
    
    // Timeout para abrir chat se usuário não interagir
    setTimeout(() => {
        if (window.myChatbot && !window.myChatbot.isChatOpen) {
            window.myChatbot.openChatWithMessage(
                'Ainda tem dúvidas? Estou aqui para ajudar! 😊'
            );
        }
    }, 30000);

    window.taubotConfig = config;
</script>

🔧 Integração com Analytics

Tracking Completo de Eventos

Integração com Google Analytics, Facebook Pixel e sistemas personalizados:

// Sistema completo de tracking
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://app.taubot.ai') return;
    
    const eventType = event.data.type;
    const eventData = event.data.data;
    
    // Google Analytics 4
    if (typeof gtag !== 'undefined') {
        switch(eventType) {
            case 'Loaded app':
                gtag('event', 'widget_loaded', {
                    event_category: 'engagement',
                    event_label: 'tau_widget'
                });
                break;
                
            case 'Opened chat window':
                gtag('event', 'chat_opened', {
                    event_category: 'engagement',
                    engagement_time_msec: Date.now()
                });
                break;
                
            case 'Sent message':
                gtag('event', 'chat_message_sent', {
                    event_category: 'conversion',
                    value: 1
                });
                break;
                
            case 'conversion':
                gtag('event', 'chat_conversion', {
                    event_category: 'conversion',
                    value: eventData.value || 10,
                    currency: 'BRL'
                });
                break;
        }
    }
    
    // Facebook Pixel
    if (typeof fbq !== 'undefined') {
        switch(eventType) {
            case 'Opened chat window':
                fbq('track', 'InitiateCheckout');
                break;
                
            case 'conversion':
                fbq('track', 'Lead', {
                    content_name: 'Chat Conversion',
                    content_category: 'customer_support'
                });
                break;
        }
    }
    
    // Sistema personalizado
    fetch('/api/analytics/widget-event', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            event_type: eventType,
            event_data: eventData,
            timestamp: new Date().toISOString(),
            user_agent: navigator.userAgent,
            page_url: window.location.href,
            referrer: document.referrer
        })
    }).catch(console.error);
});

🎨 Personalização Avançada

Tema Dinâmico

Widget que adapta cores baseado no tema do site:

// Detectar tema do site
function detectSiteTheme() {
    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const bodyClass = document.body.className;
    
    if (bodyClass.includes('dark') || isDarkMode) {
        return {
            chatbotButtonBackground: '#BB86FC',
            chatbotButtonForeground: '#000000',
            mode: 'cool'
        };
    } else {
        return {
            chatbotButtonBackground: '#6200EA',
            chatbotButtonForeground: '#FFFFFF',
            mode: 'default'
        };
    }
}

// Observar mudanças de tema
const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.attributeName === 'class') {
            const newTheme = detectSiteTheme();
            if (window.myChatbot) {
                window.myChatbot.updateConfig(newTheme);
            }
        }
    });
});

observer.observe(document.body, {
    attributes: true,
    attributeFilter: ['class']
});

// Aplicar tema inicial
window.taubotConfig = {
    appId: 'site-tematico.com',
    ...detectSiteTheme()
};
tips_and_updates Dicas de Implementação

Todos esses exemplos podem ser combinados e adaptados para suas necessidades específicas. Lembre-se de testar em diferentes dispositivos e cenários antes de implementar em produção.