Installing the Widget

Install the widget on the website or app where users should interact with the integration.

If you want your own LLM client or agent framework to connect without the widget, see Native MCP Integration.

Get the Widget Snippet

1. Open Integrations.
2. Select the integration.
3. Copy the widget install snippet.
4. Add it to your website or app.

The snippet includes your integration key.

The current embed attribute is named data-product-key for compatibility, but the value is your integration key.

Basic Snippet Shape

Your integration page provides the exact snippet. It looks similar to:

<script
  src="https://instamcp.digineuron.agency/widget.js"
  data-product-key="YOUR_INTEGRATION_KEY"
></script>

Use the snippet from your integration page instead of typing it manually.

Widget Display Mode

The widget supports two display modes:

• compact: opens as a floating chat window.
• sidebar: opens as a side panel.

Use the snippet generated by your integration page. If you need to set the mode manually, add data-widget-type:

<script
  src="https://instamcp.digineuron.agency/widget.js"
  data-product-key="YOUR_INTEGRATION_KEY"
  data-widget-type="sidebar"
></script>

If data-widget-type is omitted, the widget uses compact mode.

Optional Size Controls

The widget has default dimensions. In most cases, you do not need to change them.

If your website layout or mobile experience needs a different size, you can add optional size attributes to the script tag.

Compact mode example:

<script
  src="https://instamcp.digineuron.agency/widget.js"
  data-product-key="YOUR_INTEGRATION_KEY"
  data-widget-type="compact"
  data-width="420px"
  data-height="640px"
  data-mobile-width="100%"
  data-mobile-height="100%"
></script>

Sidebar mode example:

<script
  src="https://instamcp.digineuron.agency/widget.js"
  data-product-key="YOUR_INTEGRATION_KEY"
  data-widget-type="sidebar"
  data-sidebar-width="460px"
  data-sidebar-height="100vh"
  data-sidebar-mobile-width="100%"
  data-sidebar-mobile-height="100%"
></script>

On phone-sized screens, sidebar mode may occupy the full viewport. While it is open, the host page behind the widget is locked so scroll gestures stay inside the chat.

By default, this scroll lock applies to sidebar mode at viewport widths up to 1024px. If your layout needs a different cutoff, set data-scroll-lock-breakpoint:

<script
  src="https://instamcp.digineuron.agency/widget.js"
  data-product-key="YOUR_INTEGRATION_KEY"
  data-widget-type="sidebar"
  data-scroll-lock-breakpoint="1200"
></script>

Supported size attributes:

• data-width
• data-height
• data-mobile-width
• data-mobile-height
• data-sidebar-width
• data-sidebar-height
• data-sidebar-mobile-width
• data-sidebar-mobile-height
• data-canvas-width
• data-canvas-height

Use valid CSS size values, such as 420px, 90%, 100vw, or 90dvh. Invalid values are ignored.

Changing Size Without Refreshing

Your website can update widget size at runtime with the global widget API.

window.InstaMCPWidget.setSize({
  width: "420px",
  height: "640px",
  mobileHeight: "90dvh",
});

You can also use update:

window.InstaMCPWidget.update({
  size: {
    sidebarWidth: "460px",
    sidebarHeight: "100dvh",
  },
});

To return to default sizing:

window.InstaMCPWidget.resetSize();

This is useful when your app changes layouts without a full page refresh, or when you want custom behavior at specific responsive breakpoints.

Opening and Closing the Widget from Your App

Your website can open, close, or toggle the widget without requiring the visitor to click the floating chat button.

window.InstaMCPWidget.open();
window.InstaMCPWidget.close();
window.InstaMCPWidget.toggle();

To check whether the widget is currently open:

const isOpen = window.InstaMCPWidget.isOpen();

This is useful when you want to open chat from your own help button, close it after a custom workflow, or coordinate the widget with your app's responsive layout.

Allowed Domains

The widget only works on domains allowed by the integration configuration.

If the widget does not load:

1. Open the integration.
2. Check allowed domains.
3. Add the current website domain.
4. Save the integration.
5. Refresh the website.

Installing in a Logged-In App

If your API needs the visitor's identity, your app must also provide double-hop auth.

See Double-Hop Authentication.

Installing with Host Capabilities

If the AI agent should interact with your website or app, declare host capabilities from your app.

See Host Capabilities.

Installing with Canvas

If the AI agent should render rich visual panels, enable canvas on the integration and provide canvas capabilities.

See Canvas.

Customizing the Chatbot Title

By default, the title bar of the chatbot widget displays the Product Name configured in your InstaMCP dashboard.

If you want to dynamically customize or override the chatbot title at runtime from your host application, use the global InstaMCPWidget JavaScript API:

// Dynamically set the chatbot title bar name
window.InstaMCPWidget.setConversationTitle("Custom Support Bot");

window.MCP_API remains available for older installations, but new integrations should use window.InstaMCPWidget.

Verification Checklist

• Widget script loads without browser errors.
• Integration key is correct.
• Domain is allowed.
• Chat opens.
• Custom size settings work on desktop and mobile if you added them.
• Test question receives a response.
• Tool calls work if the integration uses a bridge.