Embed Your Persona on Your Website

Add your AI persona to any website with a customizable chat widget. Your persona can engage visitors, answer questions, capture leads, and provide 24/7 support directly on your site.

What You’ll Create

A chat widget that:

💬 Appears as a floating bubble in the corner of your site
🎨 Matches your brand colors and style
🔄 Works across all pages automatically
📱 Is fully responsive on mobile and desktop
🎤 Supports both text and voice conversations (optional)
🔒 Is secured with authentication tokens

Live examples: Interactive chat bubbles on websites like Intercom, Drift, or Zendesk.

Before You Start

Make sure you have:

✅ An active MyClone account
✅ At least one persona created and trained
✅ Access to your website’s HTML (ability to add code)
⏱️ 10-15 minutes to complete setup

💡 Tip: This is an advanced integration. If you’re just getting started, you may want to share your persona via direct link first. See Sharing Your Persona.

Integration Methods

MyClone offers two ways to embed your persona:

Method	Best For	Limitations
Script (Recommended)	Most websites, full control, customization	Requires JavaScript support
Iframe (Alternative)	Platforms blocking scripts (Hostinger, some builders)	Limited customization, manual setup

Which to choose?

Start with Script - it’s easier and more powerful
Use Iframe only if script doesn’t work on your platform

Method 1: Script Integration (Recommended)

The script approach is the easiest and most powerful way to embed your persona. Your dashboard generates the code automatically.

Log in to your MyClone dashboard
Click “Widgets” in the left sidebar
You’ll see the Widget Customizer interface

Direct link: https://app.myclone.is/dashboard/widgets

Step 2: Create an API Token

API tokens authenticate your widget and keep your integration secure.

How to create a token:

In the Widgets dashboard, find the “API Tokens” section
Click “Create Token” or ”+ New Token”
Give your token a descriptive name (e.g., “Website Widget”, “Production”)
Click “Create”
Copy the token immediately - you won’t be able to see it again

⚠️ Important: Keep your token private! Don’t share it publicly or commit it to version control.

Example token format: wgt_xxxxxxxxxxxxxxxxxxxxx

Can I create multiple tokens? Yes! Create separate tokens for:

Different websites (production, staging)
Different personas
Team members who need separate access

Token management:

✅ Tokens don’t expire
✅ You can revoke/delete tokens anytime
✅ No usage limits per token
❌ You cannot view a token after creation (create a new one if lost)

Step 3: Choose Your Persona

Select which persona visitors will interact with on your website.

In the Widget Customizer, find the “Select Persona” dropdown
Choose the persona you want to embed
The widget preview updates to show your selected persona

💡 Tip: You can create multiple personas for different purposes:

“Support” persona for help documentation
“Sales” persona for product pages
“Onboarding” persona for getting started guides

Step 4: Select API Token

Associate your token with the widget configuration.

Find the “API Token” dropdown in the customizer
Select the token you created in Step 2
The token is now linked to your widget code

Step 5: Customize Appearance

Make the widget match your brand and website design.

What you can customize:

Colors & Branding

Primary Color - Bubble button and accent colors
Background Color - Chat window background
Text Colors - Message text and UI elements
Bubble Color - Floating button background

Example:

Primary: #1b1a18 (dark brand color)
Background: #ffffff (white chat window)
Bubble: #5fac5d (green attention-grabbing button)

Layout & Position

Position - Bottom-right, bottom-left, top-right, top-left
Size - Bubble size, modal dimensions
Spacing - Distance from edges

Features

Enable Voice Chat - Toggle voice conversation support
Bubble Text - Text displayed on the bubble button (e.g., “Chat with me”, “Get Help”)
Welcome Message - First message visitors see when opening chat

Preview Changes

The right panel shows a live preview of your widget
Changes update in real-time as you customize
Test the widget by clicking the preview bubble

💡 Best practice: Match your primary color to your website’s brand color for a cohesive look.

Step 6: Copy Embed Code

Once you’re happy with the customization, get the code to add to your website.

Click the “Code” or “Get Code” tab in the customizer
You’ll see a script tag that looks like this:

<!-- MyClone Widget -->
<script>
  (function() {
    var config = {
      mode: "bubble",
      expertUsername: "your-username",
      personaName: "your-persona",
      widgetToken: "wgt_xxxxxxxxxxxxxxxxxxxxx",
      position: "bottom-right",
      primaryColor: "#1b1a18",
      bubbleText: "Chat with me",
      enableVoice: true,
      welcomeMessage: "Hello! How can I help you?",
      theme: {
        primaryColor: "#1b1a18",
        textColor: "#111827",
        bubbleBackgroundColor: "#5fac5d"
      },
    };

    function initWidget() {
      if (window.MyClone) {
        window.MyClone(config);
      }
    }

    var existingScript = document.querySelector('script[src*="myclone-embed.js"]');
    if (existingScript) {
      initWidget();
      return;
    }

    var script = document.createElement('script');
    script.src = "https://app.myclone.is/embed/myclone-embed.js";
    script.async = true;
    script.onload = initWidget;
    script.onerror = function() {
      console.error('Failed to load MyClone widget');
    };
    document.body.appendChild(script);
  })();
</script>

Click “Copy Code” to copy the entire script

Step 7: Add to Your Website

Paste the code into your website’s HTML.

Where to paste:

✅ Before the closing </body> tag (recommended - best performance)
✅ In your site-wide footer template (appears on all pages)
✅ In a custom HTML widget (WordPress, Wix, Squarespace)

Platform-specific instructions:

WordPress

Go to Appearance → Theme File Editor
Select your theme’s footer.php file
Paste the code just before </body>
Click “Update File”

Alternative (safer):

Use a plugin like “Insert Headers and Footers”
Paste code in the “Footer” section
Save changes

Webflow

Go to Project Settings → Custom Code
Paste code in the “Footer Code” section
Publish your site

Wix

Go to Settings → Custom Code
Click ”+ Add Custom Code”
Paste the code
Set to load “Body - end”
Apply to “All Pages”

Squarespace

Go to Settings → Advanced → Code Injection
Paste code in the “Footer” section
Save changes

HTML Website

Open your site’s HTML files
Find the </body> tag
Paste the code just above it
Save and upload files

After adding the code, verify it works:

Clear your browser cache (important!)
Visit your website
You should see the chat bubble appear in the corner
Click the bubble to open the chat interface
Send a test message to your persona
Verify voice chat works (if enabled)

Not working? See Troubleshooting below.

Method 2: Iframe Integration (Alternative)

Use this method if the script approach doesn’t work on your platform (e.g., Hostinger, some website builders with JavaScript restrictions).

When to Use Iframe

Use iframe integration if:

❌ Your platform blocks custom JavaScript
❌ Script approach shows security errors
❌ You have strict Content Security Policy (CSP)
✅ You only need basic embedding (no programmatic control)
✅ You’re comfortable with manual HTML

How It Works

Instead of a script that creates an iframe dynamically, you add the iframe HTML directly:

<!-- MyClone Iframe Embed -->
<iframe
  src="https://app.myclone.is/embed/inline/YOUR-USERNAME?personaName=YOUR-PERSONA&token=YOUR_WIDGET_TOKEN&primaryColor=%231b1a18&enableVoice=true"
  style="width: 100%; height: 820px; max-width: 100%; border: none; border-radius: 8px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);"
  frameborder="0"
  allow="microphone; camera; autoplay">
</iframe>

Setup Instructions

Step 1: Get Your Credentials

You’ll need:

Your username (from your profile)
Your persona name (from the persona dashboard)
Your widget token (from Widgets dashboard)

Step 2: Build the Iframe URL

Replace these values in the template above:

YOUR-USERNAME → Your MyClone username
YOUR-PERSONA → Your persona name (e.g., support, sales)
YOUR_WIDGET_TOKEN → Your API token (starts with wgt_)

Step 3: Customize (Optional)

Add URL parameters to customize appearance:

?personaName=support
&token=wgt_xxxxxxxxxxxxx
&primaryColor=%230a51f5          (URL-encoded hex color)
&enableVoice=true
&bubbleText=Chat%20with%20me     (URL-encoded text)

Color encoding:

#0a51f5 → %230a51f5 (add %23 for #)
Use online URL encoder tools

Step 4: Add to Your Website

Paste the iframe code where you want the chat to appear:

In a page content area
In a custom HTML block
In a sidebar widget

Iframe Limitations

⚠️ What you can’t do with iframe:

❌ Create floating bubble widget (appears inline only)
❌ Control widget programmatically (open(), close(), etc.)
❌ Get real-time event callbacks
❌ Update configuration dynamically
❌ Use across multiple pages easily (must add to each page)

✅ What works:

Basic chat interface embedded in page
Voice chat (if enabled)
All persona features and knowledge
Email capture and session management

Iframe Example (Real User)

Here’s a working example from a Hostinger user:

<!-- Hostinger Optimized Iframe Embed -->
<iframe
  src="https://app.myclone.is/embed/inline/nedmalki?token=wgt_xxxxxxxxxxxxx&primaryColor=%230a51f5&enableVoice=true"
  style="width: 100%; height: 820px; max-width: 100%; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); border: none; border-radius: 8px;"
  frameborder="0"
  allow="microphone">
</iframe>

Why this works on Hostinger:

Hostinger’s website builder restricts custom JavaScript
Iframe HTML is allowed in custom HTML blocks
User gets basic chat functionality without script

Customization Options Reference

Script Configuration

The script approach supports extensive customization via the config object:

var config = {
  // REQUIRED
  expertUsername: "your-username",
  personaName: "your-persona",
  widgetToken: "wgt_xxxxxxxxxxxxx",

  // WIDGET MODE
  mode: "bubble",  // "bubble", "inline", "fullpage"

  // POSITIONING
  position: "bottom-right",  // "bottom-right", "bottom-left", "top-right", "top-left"

  // APPEARANCE
  primaryColor: "#1b1a18",
  bubbleText: "Chat with me",
  bubbleIcon: "https://...",  // Custom icon URL

  // FEATURES
  enableVoice: true,
  welcomeMessage: "Hello! How can I help you?",
  inputPlaceholder: "Type a message...",

  // THEME (detailed colors)
  theme: {
    primaryColor: "#1b1a18",
    backgroundColor: "#fff4eb",
    textColor: "#111827",
    bubbleBackgroundColor: "#5fac5d",
    userMessageBg: "#1b1a18",
    botMessageBg: "#ffffff"
  },

  // LAYOUT (detailed positioning)
  layout: {
    position: "bottom-right",
    offsetX: "20px",
    offsetY: "20px",
    modalPosition: "bottom-right"  // Keep modal in corner (chatbot-style)
  }
};

For complete configuration options, see the Widget SDK Documentation.

Under the Hood (Script Approach)

When you use the script integration:

Script loads - myclone-embed.js (~5KB) downloads
SDK initializes - Creates an iframe element dynamically
Iframe renders - Loads the chat interface inside the iframe
Communication - Script and iframe talk via postMessage API
User interaction - Click bubble → chat opens → messages sent

Why iframe?

Isolates chat interface from your website’s CSS/JavaScript
Prevents styling conflicts
Provides security sandbox
Loads heavy React app separately

Key insight: The script approach uses an iframe internally, but you never have to deal with iframe HTML directly. The SDK manages everything.

Script vs. Iframe Summary

Feature	Script	Iframe
Dashboard-generated	✅ Yes	❌ Manual
Floating bubble	✅ Yes	❌ No (inline only)
Appears on all pages	✅ Yes (add once)	❌ No (add per page)
Customization	✅ Full	⚠️ Limited
Programmatic control	✅ Yes	❌ No
JavaScript required	✅ Yes	❌ No
Works everywhere	⚠️ Most platforms	✅ All platforms

Video Walkthrough

Watch the complete widget integration process:

Watch on Loom

Video highlights:

0:00 - Access Widgets section
0:32 - Create API token
0:56 - Choose persona
1:06 - Select API token
1:12 - Embed code and platform instructions
1:41 - Customize appearance
2:04 - Finalize and save

Troubleshooting

Problem: Code added but widget doesn’t show

Solutions:

Clear browser cache - Hard refresh (Ctrl+Shift+R / Cmd+Shift+R)
Check JavaScript errors - Open browser console (F12), look for red errors
Verify token - Make sure widgetToken is correct (starts with wgt_)
Check placement - Code should be before </body> tag
Wait for page load - Widget loads after page is fully loaded

Debug:

// Open browser console and type:
window.MyClone
// Should return a function, not undefined

Problem: Iframe added but nothing shows

Solutions:

Check URL format - Make sure URL is properly encoded
Verify token - Token should be valid and not revoked
Check iframe size - Set explicit width and height
Allow microphone - Add allow="microphone" attribute for voice chat
Check CSP - Your site may block iframe sources

Styling Issues

Problem: Widget looks broken or unstyled

Solutions:

Hard refresh - Clear cache completely
Check for CSS conflicts - Your site’s CSS may override widget styles
Verify colors - Use valid hex color codes (#RRGGBB)
Reset customization - Try default settings first

Token Errors

Problem: “Invalid token” or “Unauthorized” errors

Solutions:

Generate new token - Old token may be revoked
Check token format - Should start with wgt_
Don’t expose publicly - Make sure token isn’t committed to public repos
Use correct token - Match token to correct persona/username

Cross-Origin Issues

Problem: “Blocked by CORS” errors in console

Solutions:

Use HTTPS - Both your site and MyClone use HTTPS
Check URL - Make sure you’re using https://app.myclone.is
Update code - Re-copy from dashboard for latest version

Platform-Specific Issues

WordPress: Code Disappears After Saving

Solution: Use a plugin like “Insert Headers and Footers” instead of direct theme editing. Some WordPress themes strip custom code.

Solution: Make sure “Apply to: All Pages” is selected when adding custom code. Also verify code is in “Body - end” location.

Shopify: Permission Errors

Solution: You need Shopify plan that allows custom code (not Basic). Use Shopify’s theme editor to add code to theme.liquid file.

Security Best Practices

Protecting Your Token

🔒 Your widget token is sensitive - treat it like a password.

Do:

✅ Store tokens securely
✅ Use environment variables in code repositories
✅ Create separate tokens for dev/staging/production
✅ Revoke tokens if compromised
✅ Rotate tokens periodically

Don’t:

❌ Commit tokens to public GitHub repos
❌ Share tokens in screenshots or documentation
❌ Use the same token across multiple websites
❌ Embed tokens in client-side code that’s version controlled

Environment Variables (For Developers)

If building with a framework, use environment variables:

Next.js (.env.local):

NEXT_PUBLIC_MYCLONE_TOKEN=wgt_xxxxxxxxxxxxx

React/Vite (.env):

VITE_MYCLONE_TOKEN=wgt_xxxxxxxxxxxxx

Then reference in code:

widgetToken: process.env.NEXT_PUBLIC_MYCLONE_TOKEN
// or
widgetToken: import.meta.env.VITE_MYCLONE_TOKEN

Advanced Integration

Multiple Personas on One Site

Show different personas on different pages:

<script>
  // Show support persona on help pages
  if (window.location.pathname.includes('/help')) {
    window.MyClone({
      expertUsername: "your-username",
      personaName: "support",
      widgetToken: "wgt_xxxxxxxxxxxxx",
      bubbleText: "Get Help",
      primaryColor: "#3b82f6"
    });
  }
  // Show sales persona on product pages
  else if (window.location.pathname.includes('/products')) {
    window.MyClone({
      expertUsername: "your-username",
      personaName: "sales",
      widgetToken: "wgt_xxxxxxxxxxxxx",
      bubbleText: "Chat with Sales",
      primaryColor: "#10b981"
    });
  }
</script>

Programmatic Control

Control the widget with JavaScript:

<script>
  // Initialize widget
  const widget = window.MyClone({
    expertUsername: "your-username",
    widgetToken: "wgt_xxxxxxxxxxxxx"
  });

  // Open widget when user clicks custom button
  document.getElementById('custom-help-button').addEventListener('click', () => {
    widget.open();
  });

  // Close after user completes action
  function onCheckout() {
    widget.close();
  }
</script>

Event Tracking

Track widget usage with analytics:

window.MyClone({
  expertUsername: "your-username",
  widgetToken: "wgt_xxxxxxxxxxxxx",

  // Track when widget opens
  onOpen: () => {
    gtag('event', 'chat_widget_opened');
  },

  // Track messages
  onMessage: (message) => {
    gtag('event', 'chat_message_sent', {
      message_length: message.length
    });
  },

  // Track email capture
  onEmailSubmit: (email) => {
    gtag('event', 'lead_captured', { email });
  }
});

Common Questions

No. The widget script is only ~5KB and loads asynchronously, so it doesn’t block your page from loading. The chat interface loads in an iframe only when a user clicks the bubble.

Can I use multiple widgets on one page?

Yes, but it’s uncommon. You can load multiple personas by calling window.MyClone() multiple times with different configurations and positions.

Yes, the widget is fully responsive. On mobile, the chat modal adapts to smaller screens and takes up more of the viewport for better usability.

Yes! For advanced customization, see the Widget SDK Documentation which covers all configuration options including custom CSS injection.

What happens if my token is compromised?

If you suspect your token was exposed:

Go to Dashboard → Widgets → Tokens
Delete the compromised token
Create a new token
Update your website code with the new token

Old token stops working immediately.

No, the widget requires an internet connection to communicate with your MyClone persona and fetch responses.

Can visitors see the source code?

Yes, like all frontend code, visitors can view the widget code in their browser’s developer tools. However, your API token authenticates requests server-side, so visitors can’t impersonate your persona or access your account.

Next Steps

Now that your persona is embedded on your website:

Monitor Conversations - Review chats and improve responses
Track Analytics - Measure engagement and conversions
Customize Further - Advanced widget configuration
Share Your Persona - Promote across channels

Need help? Check our FAQ or contact support.

Next: Managing Your Persona →

Embed Your Persona on Your Website

What You’ll Create

Before You Start

Integration Methods

Method 1: Script Integration (Recommended)

Step 1: Access Widget Dashboard

Step 2: Create an API Token

Step 3: Choose Your Persona

Step 4: Select API Token

Step 5: Customize Appearance

Colors & Branding

Layout & Position

Features

Preview Changes

Step 6: Copy Embed Code

Step 7: Add to Your Website

WordPress

Webflow

Wix

Squarespace

HTML Website

Step 8: Test Your Widget

Method 2: Iframe Integration (Alternative)

When to Use Iframe

How It Works

Setup Instructions

Iframe Limitations

Iframe Example (Real User)

Customization Options Reference

Script Configuration

Understanding How the Widget Works

Under the Hood (Script Approach)

Script vs. Iframe Summary

Video Walkthrough

Troubleshooting

Widget Not Appearing (Script)

Widget Not Appearing (Iframe)

Styling Issues

Token Errors

Cross-Origin Issues

Platform-Specific Issues

WordPress: Code Disappears After Saving

Wix: Widget Not Loading

Shopify: Permission Errors

Security Best Practices

Protecting Your Token

Environment Variables (For Developers)

Advanced Integration

Multiple Personas on One Site

Programmatic Control

Event Tracking

Common Questions

Does the widget slow down my website?

Can I use multiple widgets on one page?

Will the widget work on mobile?

Can I customize the widget beyond the dashboard options?

What happens if my token is compromised?

Does the widget work offline?

Can visitors see the source code?

Next Steps