Embedding Chatbots & Workflows

A comprehensive guide to embedding your MindPal chatbots and workflows on your website or platform.

What is Embedding?

Embedding allows you to integrate your MindPal chatbots and workflows directly into your website, platform, or application. Instead of sending users to a separate MindPal page, they can interact with your AI tools right where they already are - creating a seamless, branded experience.

What Can Be Embedded?

• Published Chatbots: AI agents published as interactive chatbots
• Published Workflows: Multi-agent workflows published as interactive forms

Both types can be embedded using the same methods, though some features may vary.

How Embedding Works

When you publish a chatbot or workflow in MindPal, you get:

1. A unique URL - A shareable link that anyone can access
2. Embedding code - HTML/JavaScript code you can add to your website
3. Customization options - Control over appearance, behavior, and security

The embedding process involves three main steps:

1. Publish your chatbot or workflow in MindPal
2. Copy the embedding code from the publish modal
3. Paste the code into your website where you want it to appear

Step-by-Step: Publishing Your Chatbot

Step-by-Step: Publishing Your Workflow

Embedding Methods

MindPal offers three main methods for embedding your chatbots and workflows. Each has different use cases and benefits.

Direct Links

Chatbot Example:

https://chatbot.getmindpal.com/your-chatbot-slug

Workflow Example:

https://workflow.getmindpal.com/your-workflow-slug

Iframe Embed

Simple Chatbot (without custom user ID or custom session context):

<iframe
  src="https://chatbot.getmindpal.com/your-chatbot-slug"
  allow="clipboard-read; clipboard-write; microphone"
  style="width: 100%; height: 100%; min-height: 700px"
></iframe>

Chatbot with Advanced Features (with custom user ID or custom session context):

<iframe
  id="my-chatbot"
  src="https://chatbot.getmindpal.com/your-chatbot-slug"
  allow="clipboard-read; clipboard-write; microphone"
  style="width: 100%; height: 100%; min-height: 700px"
></iframe>
<script>
  window.mindpalIframeConfig = {
    "my-chatbot": {
      customUserId: "USER_123", // Replace with actual user ID
      customSessionContext: {
        "customer-name": "John Doe",
        "account-type": "premium",
        "order-id": "12345",
      },
    },
  };
</script>
<script
  src="https://chatbot.getmindpal.com/iframe.min.js"
  data-target="my-chatbot"
></script>

Simple Workflow (without custom user ID or custom session context):

<iframe
  src="https://workflow.getmindpal.com/your-workflow-slug"
  allow="clipboard-read; clipboard-write; microphone"
  style="width: 100%; height: 100%; min-height: 700px"
></iframe>

Workflows with Advanced Features (custom user ID or custom session context):

<iframe
  id="my-workflow"
  src="https://workflow.getmindpal.com/your-workflow-slug"
  allow="clipboard-read; clipboard-write; microphone"
  style="width: 100%; height: 100%; min-height: 700px"
></iframe>
<script>
  window.mindpalIframeConfig = {
    "my-workflow": {
      customUserId: "USER_123", // Replace with actual user ID
      customSessionContext: {
        "customer-name": "John Doe",
        "account-type": "premium",
      },
    },
  };
</script>
<script
  src="https://workflow.getmindpal.com/iframe.min.js"
  data-target="my-workflow"
></script>

Floating Widget (Chatbots Only)

Simple Chatbot (without custom user ID or custom session context):

<script>
  window.mindpalConfig = {
    chatbotId: "your-chatbot-slug",
  };
</script>
<script src="https://chatbot.getmindpal.com/embed.min.js"></script>

Chatbot with Advanced Features (with custom user ID or custom session context):

<script>
  window.mindpalConfig = {
    chatbotId: "your-chatbot-slug",
    customUserId: "USER_123", // Replace with actual user ID
    customSessionContext: {
      "customer-name": "John Doe",
      "account-type": "premium",
      "order-id": "12345",
    },
    behavior: {
      showInitialMessageBubbleWhenMinimized: true,
      minimizedByDefault: false,
    },
  };
</script>
<script src="https://chatbot.getmindpal.com/embed.min.js"></script>

Advanced Features

MindPal embedding supports powerful advanced features that let you create personalized, context-aware experiences. These features are covered in detail in specialized guides, but here's an overview:

Custom User ID

What it does: Identifies individual users so your chatbot or workflow can remember their conversations and provide personalized experiences.

Key benefits: Conversation history per user, personalized interactions, user-specific tracking, better integration with your user system.

Quick setup: Enable "Custom User ID" in your chatbot/workflow settings, choose a mode (Optional or Required), and pass the user ID from your website when embedding.

Example:

<script>
  window.mindpalConfig = {
    chatbotId: "your-chatbot",
    customUserId: "USER_123", // Pass your user's ID here
  };
</script>

Learn more: See the Custom User ID guide for detailed instructions, platform-specific examples, and troubleshooting.

Custom Session Context

What it does: Passes contextual information about your users (name, account type, order details, etc.) to your chatbot or workflow so the AI already knows relevant details without asking.

Key benefits: Personalized greetings and responses, context-aware conversations, no need for users to repeat information, seamless integration with your existing data.

Quick setup: Enable "Custom Session Context" in your chatbot/workflow settings, define context keys (e.g., "Customer Name", "Account Type"), and pass context values from your website when embedding.

Example:

<script>
  window.mindpalConfig = {
    chatbotId: "your-chatbot",
    customSessionContext: {
      "customer-name": "John Doe",
      "account-type": "premium",
      "order-id": "12345",
    },
  };
</script>

Learn more: See the Custom Session Context guide for detailed instructions, platform-specific examples, and security best practices.

Platform-Specific Instructions

MindPal provides optimized embedding instructions for popular platforms. When you use the "Share & Embed" feature, you can select your platform to get customized code.

Supported Platforms

• Kajabi - Dedicated integration guide available
• Circle - Dedicated integration guide available
• GoHighLevel - Dedicated integration guide available
• WordPress - Widget or iframe methods with PHP integration
• Shopify - Liquid template integration for customer data
• Wix - Velo code or static embed options
• Google Tag Manager - Tag management system integration
• Notion - Iframe embed support
• Webflow - Custom code integration
• Framer - Interactive design platform integration
• Squarespace - CMS integration
• Base44 - Coding platform with built-in authentication
• Custom Websites - Generic HTML/JavaScript code

When you select a platform, you'll get platform-optimized code, specific instructions for that platform, automatic mapping of user data fields (where supported), and platform-specific best practices.

Security & Access Control

Domain Restrictions

What it does: Prevents unauthorized websites from embedding your chatbot or workflow.

How to enable: Go to your chatbot/workflow settings, navigate to "Access & Security" or "Control access", enable "Embedding Restrictions", and add your allowed domains (one per line).

Example:

yourwebsite.com
app.yourwebsite.com
*.yourwebsite.com

Why it matters: Without domain restrictions, anyone could embed your chatbot on their website, potentially using your AI credits or creating a poor user experience.

Rate Limiting

What it does: Controls how many requests users can make to prevent abuse and manage costs.

How to enable: Go to your chatbot/workflow settings, navigate to "Access & Security", and configure rate limit rules with different scopes (Global, Per IP, Per user, Per session). Set maximum requests and time window for each rule.

Example: Maximum requests: 50, Time window: 1 hour, Scope: Per IP address. This means each IP address can make 50 requests per hour. You can configure multiple rules with different scopes and time windows for flexible rate limiting.

Learn more: See the Rate Limit guide for detailed configuration options.

Next Steps

Now that you understand embedding basics, explore these related guides:

• Custom User ID - Enable personalized experiences with user identification
• Custom Session Context - Pass contextual information to your chatbots and workflows
• Rate Limiting - Control usage and prevent abuse