Skip to main content

Setup a WhatsApp widget on your website

You can configure a WhatsApp chat widget button on your website or landing page using Chakra's embed widget.

Widget with Pop Up​

This widget configuration shows a brief CTA popup before redirecting the customer to your WhatsApp chat. Copy the script below and put it at the end of your landing page / website home page.

Following customization parameters are available

  • phoneNumber - add your business's WhatsApp phone number here
  • welcomeText - The popup welcome text
  • customerMessage - The first message taht will be popualted in the customer's WhatsApp input box
  • ctaText - The text of the button on the popup
  • brandName - Your brand's name. This is optional
  • brandIconUrl - Your brand icon's url. This is optional
  • primaryColor - the color of the initial 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>

Widget without a Pop Up​

This widget configuration creates a WhatsApp button that takes a user directly to your business's WhatsApp number. Copy the script below and put it at the end of your landing page / website home page.

The following customization parameters are available

  • phoneNumber - add your business's WhatsApp phone number here
  • customerMessage - The first message taht will be popualted in the customer's WhatsApp input box
  • primaryColor - the color of the initial WhatsApp icon
<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>