MLCPluginOptions Interface
Detailed documentation for all available configuration options.
The MLCPluginOptions interface allows you to configure various aspects of the Mindlogic Plugin, such as its position, behavior, custom styling, and event handling.
divId?: string
The HTML element ID where the plugin will be portaled into.
- Type: string (optional)
- Default:"mlc-root"
- Usage: Defines the ID of the DOM element where the plugin will be mounted.
position?: { right, bottom }
The initial position of the plugin within the viewport.
- Type:
- right: number
- bottom: number
- Default:{ right: 10, bottom: 10 }
- Usage: Controls where the plugin will appear on the screen when it is initialized. Both right and bottom can be used to position the plugin relative to the edges of the viewport.
initialOpen?: boolean
Determines whether the plugin will be open when initialized.
- Type: boolean (optional)
- Default:false
- Usage: Set to true to have the plugin open immediately when it is initialized.
movePlugin?: boolean
Indicates whether the plugin should be movable by dragging the header and resizable by dragging its corners.
- Type: boolean (optional)
- Default:false
- Usage: Set to true to allow users to drag and resize the plugin.
customImage?: { width, height, url }
Custom image properties for the plugin's trigger button.
- Type:
- width: number
- height: number
- url: string
- Usage: Specifies a custom image for the trigger button, providing the image's dimensions and URL.
backgroundImage?: string
Custom background image properties for the plugin.
- Type: string (optional)
- Usage: Specifies a custom background image for the plugin, providing the image's URL.
hideButton?: boolean
Indicates whether the trigger button should be hidden.
- Type: boolean (optional)
- Default:false
- Usage: Set to true to hide the trigger button, preventing users from manually triggering the plugin.
showInitialGuideModal?: boolean
Whether the modal should be displayed on first entry.
- Type: boolean (optional)
- Default:true
- Usage: Set to false if you do not want the guide modal to appear when the user enters.
hideCloseButton?: boolean
Controls the visibility of the close button in the chat window header.
- Type: boolean (optional)
- Usage: Set to true to hide the close button, preventing users from manually closing the chat window. Default is false (close button is visible).
stylesheetUrl?: string
The URL of a stylesheet to be loaded into the Shadow DOM of the plugin.
- Type: string (optional)
- Usage: Allows you to specify a URL pointing to an external CSS file to apply custom styles to the plugin.
styles?: string
A string containing custom CSS that will be injected directly into the Shadow DOM of the plugin.
- Type: string (optional)
- Usage: Pass custom styles as a raw CSS string, allowing you to style the plugin without needing an external stylesheet.
Example: Importing CSS file as inline
// Make sure to import the CSS inline
import pluginStyles from "./plugin-styles.css?inline"
window.MLCPlugin.init(windowId, {
styles: pluginStyles
})onMessageSend?: function
Callback function triggered when the user sends a message.
- Type: function (optional)
- params.sessionId: The current session's ID.
- params.message: The message content sent by the user (optional).
- Usage: Provide a function to handle when a message is sent by the user, e.g., logging the message or processing it further.
onRefresh?: function
Callback function triggered when the user refreshes their session.
- Type: function (optional)
- params.sessionId: The current session's ID.
- Usage: Provide a function to handle session refreshes, e.g., resetting the session or refreshing session-specific data.
onHide?: function
Callback function triggered when the chat window is closed.
- Type: function (optional)
- Usage: Provide a function to handle when the chat window is closed either by the user or programmatically.
onOpen?: function
Callback function triggered when the chat window is opened.
- Type: function (optional)
- Usage: Provide a function to handle when the chat window is opened either by the user or programmatically.
Example Usage:
const options: MLCPluginOptions = {
divId: "custom-plugin-container",
position: { right: 20, bottom: 30 },
initialOpen: true,
movePlugin: true,
customImage: {
width: 60,
height: 60,
url: "https://example.com/custom-image.png",
},
hideButton: false,
onRefresh: (params) => {
console.log(`Session refreshed with ID: ${params.sessionId}`);
},
onMessageSend: (params) => {
console.log(`Message sent: ${params.message} in session ${params.sessionId}`);
},
stylesheetUrl: "./customStyles.css",
styles: `
.plugin-container {
background-color: lightgreen;
border: 2px solid darkgreen;
}
`,
};Mindlogic, Inc.
331, Bongeunsa-ro, Gangnam-gu, Seoul, Republic of Korea
contact@mindlogic.ai