API Reference

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

jsx
// 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