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: 'customer@email.com',
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',
  // Initial messages can be personalized with the contact's name
  initialMessages: ["hello John","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>