Chatbot
Reference
Chatbot
Reference
Chatbot Integration Guide
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>
<script type="module">
import Chatbox from 'https://cdn.mu.chat/embeds/dist/chatbox/index.js?v=2';
Chatbox.initBubble({
agentId: 'YOUR_AGENT_ID',
});
</script>
<script
id="muchat-agent"
type="module"
dangerouslySetInnerHTML={{
__html: `import Chatbox from 'https://cdn.mu.chat/embeds/dist/chatbox/index.js?v=2';
Chatbox.initBubble({
agentId: 'YOUR_AGENT_ID',
});`
}}
/>
<Script
strategy="lazyOnload"
type="module"
dangerouslySetInnerHTML={{
__html: `
import Chatbox from 'https://cdn.mu.chat/embeds/dist/chatbox/index.js?v=2';
Chatbox.initBubble({
agentId: 'YOUR_AGENT_ID',
});
`
}}
/>
<script
id="muchat-agent"
type="module"
dangerouslySetInnerHTML={{
__html: `
import Chatbox from 'https://cdn.mu.chat/embeds/dist/chatbox/index.js?v=2';
Chatbox.initBubble({
agentId: 'YOUR_AGENT_ID',
formId: 'YOUR_FORM_ID',
contact: {
firstName: 'John',
lastName: 'Doe',
email: '[email protected]',
phoneNumber: '+33612345644',
userId: '42424242',
},
interface: {
primaryColor: '#145dee',
},
loadStrategy: "FAST",
});
`
}}
/>
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',
// 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>
<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',
// 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>
<script
id="muchat-agent"
type="module"
dangerouslySetInnerHTML={{
__html: `
import Chatbox from 'https://cdn.mu.chat/embeds/dist/chatbox/index.js?v=2';
Chatbox.initBubble({
// Set the id
agentId: 'YOUR_AGENT_ID',
// Contact configuration
contact: {
firstName: 'John',
lastName: 'Doe',
email: '[email protected]',
phoneNumber: '+33612345644',
userId: '42424242',
},
// Context for the agent
context: "The user you are talking to is John. Start by Greeting him by his name.",
// Interface configuration
interface: {
primaryColor: '#145dee',
},
initConfig: {
primaryColor: '#145dee',
},
// Loading strategy
loadStrategy: "FAST", // Options: 'FAST' | 'SEO_FRIENDLY' | 'COMPLETE_LOAD'
// Callback functions
onMarkedAsResolved: () => {
// Handle conversation resolution
},
onAgentLoaded: (agent) => {
// Handle when agent loaded event
},
});
`
}}
/>
<Script
strategy="lazyOnload"
type="module"
dangerouslySetInnerHTML={{
__html: `
import Chatbox from 'https://cdn.mu.chat/embeds/dist/chatbox/index.js?v=2';
Chatbox.initBubble({
// Set the id
agentId: 'YOUR_AGENT_ID',
// Contact is unique on email and phoneNumber and userId
contact: {
firstName: 'John',
lastName: 'Doe',
email: '[email protected]',
phoneNumber: '+33612345644',
userId: '42424242',
},
// Context for the agent
context: "The user you are talking to is John. Start by Greeting him by his name.",
// Interface configuration
interface: {
primaryColor: '#145dee',
},
initConfig: {
primaryColor: '#145dee',
},
// Loading strategy
loadStrategy: "FAST", // Options: 'FAST' | 'SEO_FRIENDLY' | 'COMPLETE_LOAD'
// Callback functions
onMarkedAsResolved: () => {
// Handle conversation resolution
},
onAgentLoaded: (agent) => {
// Handle when agent loaded event
},
});
`
}}
/>
ID of the Agent
The name to display for the agent interface
Description text for the agent interface
Primary color theme for the interface
Font family choice (options: ‘estedad’, ‘yekanbakh’)
Text direction (options: ‘rtl’, ‘ltr’)
Interface language (options: ‘fa’, ‘en’)
Controls chat bubble visibility
Enables/disables chat reset functionality
Array of initial messages to display
Predefined message templates
Interface position (options: ‘left’, ‘right’)
URL for agent avatar
URL for interface icon
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.
Initial Agent messages
Extra context that will be appended to the Agent system prompt
The load strategy determines how the chatbot will be loaded on the page.
Fast load strategy
SEO friendly load strategy (when user have some activity on the page like ‘keydown’, ‘touchmove’, ‘touchstart’, ‘mouseover’)
Fired when all website resources (including images, scripts, stylesheets, and other assets) have completely finished loading. This event ensures that every component of your webpage has been successfully downloaded and rendered.
Methods
Open Bubble Chatbox
const widget = await Chatbox.initBubble({
agentId: 'YOUR_AGENT_ID',
})
window.Muchat.open()
Close Bubble Chatbox
const widget = await Chatbox.initBubble({
agentId: 'YOUR_AGENT_ID',
})
window.Muchat.close()
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
-
muchat_ready: when the widget is ready -
muchat_open: when the widget is openedonly for bubble widget -
muchat_close: when the widget is closedonly for bubble widget -
muchat_sendMessage: when the user sends a message -
muchat_createNewConversation: when the user creates a new conversation -
muchat_markedResolved: when the user marks the conversation as resolved
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>
On this page