Embed Chatbot🤖

🛠️ Step 1: Generate a JWT Token

Use the following JSON structure:

{
  "org_id": "YOUR_ORG_ID",
  "chatbot_id": "YOUR_CHATBOT_ID",
   // Add your User Id here,
        "variables": {
            // Add your variables here: "key": "value"
        }
}

✅ Click on your access key.
✅ Sign the payload using the access key to generate your embed token.

Example:

This screenshot displays the embedded chatbot interface in a browser window at 127.0.0.1. The chatbot appears in a centered container with the following elements:

• Header:

  • Title: Chatbot

  • Subtitle: Smart Help, On Demand

  • Controls: Fullscreen toggle and close (X) icon

🔗 Step 2: Add Embed Code to Your Product

Paste this into your HTML where you want the chatbot to appear:

<script 
  id="chatbot-main-script"
  embedToken="ENTER_YOUR_EMBED_TOKEN"
  src="https://chatbot-embed.viasocket.com/chatbot-prod.js">
</script>

Once embedded, the chatbot will look something like this:

🧠 Advanced Usage (Send/Receive Data)

📥 Listen for messages:

window.addEventListener('message', (event) => {
  const receivedData = event.data;
});

📤 Send data into the chatbot:

window.SendDataToChatbot({ 
  bridgeName: '<slugName_of_bridge>',
  threadId: '<thread_id>',
  parentId: '<container_id>', // optional
  fullScreen: false,
  hideCloseButton: false,
  hideIcon: false,
  variables: {
    // any dynamic data
  }
});

📋 Parameter Reference

⚙️ Extra Controls

• Open chatbot manually:

window.openChatbot();

• Close chatbot manually:

window.closeChatbot();

✨ Final Result

A smart, configurable chatbot — embedded directly into your UI — helping your users in real-time. Simple setup, powerful interaction.

Let me know if you want this blog in Markdown or formatted as a publishable doc!