TAU Widget
Exemplos Práticos
Implementações completas do TAU Widget para diferentes segmentos e casos de uso.
Exemplos Práticos
E-commerce — suporte contextual por página
Widget que adapta a mensagem conforme a página visitada:
<script>
function getContextualConfig() {
const path = window.location.pathname;
const base = {
appId: 'minha-loja.com',
chatbotButtonBackground: '#FF6B35',
chatbotButtonSize: 65,
mode: 'cool'
};
if (path.includes('/produto/')) {
return { ...base, defaultMessage: 'Tenho dúvidas sobre este produto', defaultRoute: 'chat' };
}
if (path.includes('/carrinho/')) {
return { ...base, defaultMessage: 'Preciso de ajuda com meu carrinho', autoOpen: true };
}
if (path.includes('/checkout/')) {
return { ...base, defaultMessage: 'Estou com problemas no checkout',
enableWhatsApp: true, whatsAppMessage: 'URGENTE: Problema no checkout!' };
}
return { ...base, defaultMessage: 'Como posso ajudar com sua compra?' };
}
window.taubotConfig = getContextualConfig();
(function() {
var script = document.createElement('script');
script.src = 'https://app.taubot.ai/widget/widget.js';
script.async = true;
document.head.appendChild(script);
})();
</script>E-commerce — carrinho abandonado
Detecta quando o usuário tenta sair com itens no carrinho:
const cartItems = JSON.parse(localStorage.getItem('cart') || '[]');
if (cartItems.length > 0) {
let triggered = false;
document.addEventListener('mouseleave', function(e) {
if (e.clientY < 0 && !triggered) {
triggered = true;
setTimeout(() => {
window.myChatbot?.openChatWithMessage(
'Espere! Você esqueceu itens no carrinho. Posso ajudar a finalizar com 10% de desconto!'
);
}, 1000);
}
});
}Plataforma educacional
Adapta o suporte conforme o progresso do aluno:
const progress = getUserProgress(); // sua função
window.taubotConfig = {
appId: 'escola-online.edu.br',
chatbotButtonBackground: '#4CAF50',
mode: 'default',
defaultMessage: progress < 30
? 'Preciso de ajuda para começar os estudos'
: progress < 70
? 'Tenho dúvidas sobre o conteúdo atual'
: 'Estou me preparando para a avaliação final'
};Clínica médica — horário de funcionamento
function isOfficeHours() {
const now = new Date();
const day = now.getDay(); // 0 = domingo
const hour = now.getHours();
// Seg–Sex 8h–18h
if (day >= 1 && day <= 5 && hour >= 8 && hour < 18) return true;
// Sáb 8h–12h
if (day === 6 && hour >= 8 && hour < 12) return true;
return false;
}
window.taubotConfig = {
appId: 'clinica-saude.med.br',
chatbotButtonBackground: '#2196F3',
mode: 'cool',
defaultRoute: 'chat',
enableWhatsApp: !isOfficeHours(),
whatsAppMessage: 'Olá! Gostaria de agendar uma consulta.',
defaultMessage: isOfficeHours()
? 'Gostaria de agendar uma consulta'
: 'Estamos fora do horário — clique para chamar no WhatsApp'
};Hotel — hóspede vs. visitante
const guestId = localStorage.getItem('hotel_guest_id');
const room = localStorage.getItem('room_number');
window.taubotConfig = guestId
? {
appId: 'resort-paradise.com.br',
chatbotButtonBackground: '#4CAF50',
mode: 'cool',
defaultMessage: `Quarto ${room}: Como posso ajudar?`,
user: {
id: guestId,
name: localStorage.getItem('guest_name'),
hash: localStorage.getItem('guest_hmac') // gerado no servidor
}
}
: {
appId: 'resort-paradise.com.br',
chatbotButtonBackground: '#FF9800',
mode: 'cool',
defaultMessage: 'Gostaria de fazer uma reserva',
enableWhatsApp: true,
whatsAppMessage: 'Olá! Gostaria de informações sobre reservas'
};SaaS B2B — suporte escalonado por plano
const user = getCurrentUser(); // sua função
const supportConfig = {
free: { background: '#9E9E9E', message: 'Tenho uma dúvida sobre o plano' },
pro: { background: '#4834D4', message: 'Preciso de suporte técnico' },
enterprise: { background: '#FFB300', message: 'Suporte prioritário — preciso de ajuda urgente' }
};
const plan = user?.plan || 'free';
const cfg = supportConfig[plan];
window.taubotConfig = {
appId: 'meu-saas.com.br',
chatbotButtonBackground: cfg.background,
defaultMessage: cfg.message,
mode: plan === 'enterprise' ? 'cool' : 'default',
user: user ? {
id: user.id,
hash: user.widgetHash, // gerado no servidor
name: user.name,
email: user.email
} : undefined
};