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
};

On this page