💬 Add a WhatsApp Chat Widget to Your Website

You can easily add a WhatsApp chat widget to your website or landing page using Chakra's embed widget. Choose between a popup-style widget or a direct chat button — both are simple to set up and customize.

🪄 Option 1: Widget with Pop-Up

This version displays a small popup CTA before redirecting the visitor to WhatsApp. Great for engaging users without being intrusive.

📌 Where to add: Paste the following script at the end of your website or landing page (before the closing </body> tag).

✅ Customization Options:

• phoneNumber 📞 – Your business's WhatsApp number
• welcomeText 👋 – Text shown in the popup
• customerMessage 💬 – Prefilled message in WhatsApp chat box
• ctaText 🔘 – Text on the popup button
• brandName 🏷️ – Optional brand name
• brandIconUrl 🖼️ – Optional brand icon URL
• primaryColor 🎨 – Color of the WhatsApp icon

<script>  window.ChakraChatWidgetSettings = {    widgetType: 'whatsapp',    chatLauncherConfig: {      // primaryColor: '#13c2c2',    },    whatsappWidget: {      phoneNumber: '+91**01258455',      theme: 'classic',      classic: {        welcomeText: 'Do you have more questions?',        // brandName: 'ChakraHQ', // optional        // brandIconUrl: 'https://s3.ap-south-1.amazonaws.com/static-data.chakrahq.com/assets/images/chakra-icon-with-bg/icon-48x48.png', // optional        customerMessage: 'Tell me more',        ctaText: 'Chat Now'      }    }  };</script><script type="text/javascript" async defer src="https://embed.chakrahq.com/chat/v1/widget.js"></script>

🚀 Option 2: Widget Without Pop-Up

This version creates a floating WhatsApp button that directly opens a WhatsApp chat — perfect for minimalist UI.

📌 Where to add

Place the script at the bottom of your page, just before the closing </body> tag.

✅ Customization Options

• phoneNumber 📞 – Your business's WhatsApp number
• customerMessage 💬 – Prefilled WhatsApp message
• primaryColor 🎨 – WhatsApp icon color

<script>  window.ChakraChatWidgetSettings = {    widgetType: 'whatsapp',    chatLauncherConfig: {      // primaryColor: '#13c2c2',    },    whatsappWidget: {      phoneNumber: '9901258433',      theme: 'buttonOnly',      buttonOnly: {        customerMessage: 'Tell me more'      },    }  };</script><script type="text/javascript" async defer src="https://embed.chakrahq.com/chat/v1/widget.js"></script>

Here is the reference: