Practical Examples

Landing page — invisible tracking for WhatsApp

Use this model when the page has WhatsApp buttons, but you do not want to show the visual widget. The single widget.js snippet enables campaign tracking and recognizes common WhatsApp links automatically.

<a href="https://wa.me/15551234567?text=Hi%2C%20I%20came%20from%20the%20campaign">
  Talk on WhatsApp
</a>

<script>
  window.taubotConfig = {
    appId: 'my-company.com',
    widgetMode: 'tracking_only',
    attribution: { enabled: true }
  };

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

If the WhatsApp button is a custom component that does not use a standard link, mark the element with data-taubot-wa or contact TAU to configure specific selectors.

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

Practical Examples

On this page