Skip to main content

💬 Add a Website Live Chat Widget with Chakra

Along with WhatsApp, Chakra also enables you to create a Website Live Chat Widget — allowing your customers to chat with you directly from your website or landing page. All chats (website + WhatsApp) appear in the same chat inbox for easy management.

⚙️ How to Set Up the Live Chat Widget​

  1. Go to Admin > Chat Settings > Chat Widget > Customize
  2. Under the Customize tab:
    • 🎨 Choose your brand color
    • 💬 Set up welcome messages
    • 📝 Optionally embed a pre-chat form to collect user info or intent before the chat begins
  3. Use the demo widget button (bottom right corner) to preview your customizations
  4. Once you're happy, go to the Embed Code tab
  5. Copy the embed snippet
  6. Paste it into the bottom section of your website or landing page (just before </body>)

✅ That’s it! When you reload your page, you’ll see the chat widget live!

🧩 Send Custom Data with Chats​

You can enrich your live chat with custom structured data (like user IDs, tracking codes, etc.).

Steps:​

  1. First, create custom attributes if you haven’t already. 📚 Reference Guide
  2. In the Embed Code tab, find the section:

    Chat attributes for which data will be sent from the website:

  3. Select the attributes you want to pre-fill
  4. Once selected, the embed code will update to include a chatData object
  5. Replace <value> in the snippet with dynamic or static values as needed
  6. Add this updated snippet to your landing page or website

🎯 When a chat starts, Chakra will automatically capture and store the configured custom data!

📈 Track Chat Widget Interactions with Analytics​

You can listen to various widget lifecycle events and track them in tools like Google Analytics, Mixpanel, etc.

How to do it:​

  1. Go to the Embed Code tab
  2. Look for:

    Widget events that you want to listen to:

  3. Select the events you want to track. Available events:
    • widget:load 🟢 – When the chat button appears
    • widget:open 📂 – When a user opens the chat window
    • widget:close ❌ – When chat window is closed
    • chat:start 💬 – When a chat begins
    • chat:end 🛑 – When a chat is closed
    • message:receive 📥 – When your team sends a message
    • message:send 📤 – When the customer sends a message
  4. Once you select the events you want to track, the embed script will automatically update to include event listener hooks for each selected event.
  5. Copy this updated embed script and paste it into your website or landing page code. ⚠️ Note: The generated functions are just placeholders — they won’t track anything by default.
  6. You’ll need to add your own analytics logic/code inside these handlers to send data to your analytics platform