TAU Widget
Practical Examples
Complete TAU Widget implementations for different segments and use cases.
Practical Examples
E-commerce — contextual support by page
Widget that adapts the message based on the page being visited:
<script>
function getContextualConfig() {
const path = window.location.pathname;
const base = {
appId: 'my-store.com',
chatbotButtonBackground: '#FF6B35',
chatbotButtonSize: 65,
mode: 'cool'
};
if (path.includes('/product/')) {
return { ...base, defaultMessage: 'I have questions about this product', defaultRoute: 'chat' };
}
if (path.includes('/cart/')) {
return { ...base, defaultMessage: 'I need help with my cart', autoOpen: true };
}
if (path.includes('/checkout/')) {
return { ...base, defaultMessage: 'I am having trouble at checkout',
enableWhatsApp: true, whatsAppMessage: 'URGENT: Checkout problem!' };
}
return { ...base, defaultMessage: 'How can I help with your purchase?' };
}
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 — abandoned cart
Detects when the user tries to leave with items in the cart:
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(
'Wait! You left items in your cart. Can I help you finish with a 10% discount?'
);
}, 1000);
}
});
}Educational platform
Adapts support based on the student's progress:
const progress = getUserProgress(); // your function
window.taubotConfig = {
appId: 'online-school.edu',
chatbotButtonBackground: '#4CAF50',
mode: 'default',
defaultMessage: progress < 30
? 'I need help getting started with my studies'
: progress < 70
? 'I have questions about the current content'
: 'I am preparing for my final assessment'
};Medical clinic — business hours
function isOfficeHours() {
const now = new Date();
const day = now.getDay(); // 0 = Sunday
const hour = now.getHours();
// Mon–Fri 8am–6pm
if (day >= 1 && day <= 5 && hour >= 8 && hour < 18) return true;
// Sat 8am–12pm
if (day === 6 && hour >= 8 && hour < 12) return true;
return false;
}
window.taubotConfig = {
appId: 'health-clinic.com',
chatbotButtonBackground: '#2196F3',
mode: 'cool',
defaultRoute: 'chat',
enableWhatsApp: !isOfficeHours(),
whatsAppMessage: 'Hi! I would like to schedule an appointment.',
defaultMessage: isOfficeHours()
? 'I would like to schedule an appointment'
: 'We are outside business hours — click to reach us on WhatsApp'
};Hotel — guest vs. visitor
const guestId = localStorage.getItem('hotel_guest_id');
const room = localStorage.getItem('room_number');
window.taubotConfig = guestId
? {
appId: 'paradise-resort.com',
chatbotButtonBackground: '#4CAF50',
mode: 'cool',
defaultMessage: `Room ${room}: How can I help?`,
user: {
id: guestId,
name: localStorage.getItem('guest_name'),
hash: localStorage.getItem('guest_hmac') // generated on the server
}
}
: {
appId: 'paradise-resort.com',
chatbotButtonBackground: '#FF9800',
mode: 'cool',
defaultMessage: 'I would like to make a reservation',
enableWhatsApp: true,
whatsAppMessage: 'Hi! I would like information about reservations'
};B2B SaaS — tiered support by plan
const user = getCurrentUser(); // your function
const supportConfig = {
free: { background: '#9E9E9E', message: 'I have a question about the plan' },
pro: { background: '#4834D4', message: 'I need technical support' },
enterprise: { background: '#FFB300', message: 'Priority support — I need urgent help' }
};
const plan = user?.plan || 'free';
const cfg = supportConfig[plan];
window.taubotConfig = {
appId: 'my-saas.com',
chatbotButtonBackground: cfg.background,
defaultMessage: cfg.message,
mode: plan === 'enterprise' ? 'cool' : 'default',
user: user ? {
id: user.id,
hash: user.widgetHash, // generated on the server
name: user.name,
email: user.email
} : undefined
};