​
initialization

<script type="module">
import Chatbox from 'https://cdn.mu.chat/embeds/dist/chatbox/index.js?v=2';

Chatbox.initBubble({
agentId: 'YOUR_AGENT_ID',
});
</script>

​
Attributes / Props

<script type="module">
import Chatbox from 'https://cdn.mu.chat/embeds/dist/chatbox/index.js?v=2';

Chatbox.initBubble({
//set the id
agentId: 'YOUR_AGENT_ID',


// If provided will create a contact for the user and link it to the conversation
contact: {
firstName: 'John',
lastName: 'Doe',
email: '[email protected]',
phoneNumber: '+33612345644',
userId: '42424242',
},
// Provided context will be appended to the Agent system prompt
context: "The user you are talking to is John. Start by Greeting him by his name.",


// Your interface configuration
interface: {
  primaryColor: '#145dee',
  initialMessages: ["hello","how are you"]
},
initConfig: {
  primaryColor: '#145dee',
},

// Optional: Loading strategy
loadStrategy: "FAST", // Options: 'FAST' | 'SEO_FRIENDLY' | 'COMPLETE_LOAD'

// Optional: Callback functions
onMarkedAsResolved: () => {
  // Handle conversation resolution
},
onAgentLoaded: (agent) => {
  // Handle when agent loaded event
},
});

</script>
​
agentId
string
required

ID of the Agent

​
interface
object
​
contact
string

Contact identification is unique based on any of these fields:

  • email (one email can only be associated with one contact)
  • phoneNumber (one phone number can only be associated with one contact)
  • userId (one userId can only be associated with one contact)

Different contacts can be created with different combinations of these unique identifiers.

​
initialMessages
string array

Initial Agent messages

​
context
string

Extra context that will be appended to the Agent system prompt

​
loadStrategy
enum

The load strategy determines how the chatbot will be loaded on the page.

​
Methods

​
open
bubble widget only

Open Bubble Chatbox

const widget = await Chatbox.initBubble({
  agentId: 'YOUR_AGENT_ID',
})

window.Muchat.open()
​
close
bubble widget only

Close Bubble Chatbox

const widget = await Chatbox.initBubble({
  agentId: 'YOUR_AGENT_ID',
})

window.Muchat.close()
​
toggle
bubble widget only
Toggle Bubble Chatbox
const widget = await Chatbox.initBubble({
  agentId: 'YOUR_AGENT_ID',
})

window.Muchat.toggle()
​
createNewConversation
Create New Conversation
const widget = await Chatbox.initBubble({
  agentId: 'YOUR_AGENT_ID',
})

window.Muchat.createNewConversation()
​
on

provide a function to be called when the event is triggered

On event
const widget = await Chatbox.initBubble({
agentId: 'YOUR_AGENT_ID',
})


window.Muchat.on('muchat_ready', () => {
//do something when the widget is ready
});

window.Muchat.on('muchat_sendMessage', ({ message }) => {
// do something when the user sends a message
// also you can get the message
});
window.Muchat.on('muchat_open', () => {
// do something when the widget is opened
});

window.Muchat.on('muchat_close', () => {
// do something when the widget is closed
});

window.Muchat.on('muchat_createNewConversation', () => {
// do something when the user creates a new conversation
});

window.Muchat.on('muchat_markedResolved', () => {
// do something when the conversation is marked as resolved
});

// other events are similar

<ParamField path="off">
<ToDoDoc />
</ParamField>

<ParamField path="setStyle">
<ToDoDoc />
</ParamField>