Skip to main content

Setup a Webiste chat widget

Along with WhatsApp Chakra also allows you to create a website live chat widget, for your custoemrs to chat with you directly. Website chats and WhatsApp chats show up together in the chat inbox. Follow the steps below to set it up

  • Go to Website Chat widget customization page Admin > Chat Settings > Chat Widget > Customize
  • On the Customize tab, you can configure the look and feel of your widget
  • You can choose your brand color and welcome messages
  • You can also embed a form to collect basic information or intent before starting a live chat
  • After making the necessary configuration, you can click on the demo chat widget button on the bottom right corner to preview the customizations
  • Once satisfied, click the "Embed Code" tab
  • Here you will see a embed snippet
  • Copy the snippet and add it to the bottom part of your landing page or website

Thats it - whenn you reload your landing page or website you should see the live chat widget.

Send custom data as part of new chats​

You can customize the chat widget to send custom data from the webpage to Chakra.

  • First make sure you have created some custom chat attributes. Reference
  • Then under the Embed Code tab, look for Chat attributes for which data will be sent from the website: input
  • Here select the attribtues that you would want to pre-fill
  • once you have selected a custom attribute, the embed snippet will change to indicate how to pass custom chatData
  • Embed this new snippet in you landing pages and replace the <value> part of the chatData with your actual data
  • Note that this data can be dynamic too
  • Now when a chat is created from this widget, it will contain the values configured as part of chatData

Use analytics for chat widget interactions​

You can listen to widget lifecycle events and use it to track these in your analytics platform.

  • Under the Embed Code tab, look for Widget events that you want to listen to: input
  • Select the events that you want to listen to. The following events are available
    • widget:load - This event is fired when the chat widget has loaded and the button is visible on your website
    • widget:open - This is fired once a user clicks the widget button and opens the Chat window
    • widget:close - This is fired once a chat window is closed
    • chat:start - This event is triggered once a chat has sarted
    • chat:end - This event is triggered once a chat has closed
    • message:receive - Every message received by the customer triggrs this event
    • message:send - Every message sent by your customer triggers this event
  • Once you have select the events, the embed script will change to show you hooks for each of these events
  • You need to copy the updated emebd script and update your landing page or website code with the same
  • Please note that only dummy functions are generated against every event configured
  • You will have to add your own code to publish your analytics event in these functions to actually make the tracking work