Skip to main content

Sharing Your Avatar

Learn how to embed your avatar on any website and share it with the world.

CRITICAL - Domain Whitelisting Required First!

🚨 BEFORE embedding your avatar anywhere, you MUST configure domain whitelisting:

  1. Go to Settings → Avatar Profiles
  2. Select your avatar profile
  3. Scroll to "Allowed Domains for Embedding"
  4. Add every domain where you plan to use the avatar:
    • https://yourdomain.com
    • https://www.yourdomain.com
    • https://subdomain.yourdomain.com
  5. Save the profile

🔒 Why this matters: Your avatar uses CORS (Cross-Origin Resource Sharing) security. Without whitelisting your domains, the avatar will fail to load with CORS errors.

💡 Pro tip: Add both www and non-www versions of your domain to avoid issues.

Getting Your Embed Code

Generate API Key

Before you can share your avatar, you need an API key for security:

  1. Go to your project where your avatar lives
  2. Click "Project Settings"
  3. Go to the "API Keys" section
  4. Click "Generate New API Key"
  5. Copy the key and save it - you'll need this for embedding

Get Your Embed Code

  1. Open your avatar from the project dashboard
  2. Click "Share Avatar" or "Get Embed Code"
  3. Copy the provided HTML code - it looks like this:
<iframe 
src="https://oktalkto.me/embed.html?apiKey=YOUR_API_KEY&profileId=YOUR_PROFILE_ID"
width="100%"
height="600px"
frameborder="0">
</iframe>

Adding to Your Website

Domain Check Required

⚠️ Before proceeding: Make sure you've added your domain to the "Allowed Domains for Embedding" list in your avatar profile settings. Otherwise, your avatar will show CORS errors instead of loading properly.

For Any Website

The simplest way to add your avatar:

  1. Copy the embed code from your avatar settings
  2. Paste it into your website's HTML where you want the avatar to appear
  3. Adjust the width and height to fit your page design
  4. Save and publish your website

WordPress

Using the HTML Block:

  1. Edit your page or post
  2. Add an "HTML" or "Custom HTML" block
  3. Paste your embed code
  4. Preview and publish

Using a Plugin: Many WordPress sites use iframe plugins - just paste your embed URL into any iframe plugin.

Shopify

  1. Go to your theme editor
  2. Edit the page template where you want the avatar
  3. Add the embed code in the HTML
  4. Save the template

Squarespace

Using Code Block:

  1. Edit your page
  2. Add a "Code" block
  3. Paste your embed code
  4. Click "Apply"
  5. Save and publish

Using Embed Block:

  1. Add an "Embed" block
  2. Paste your embed URL (just the src part of the iframe)
  3. Adjust settings for responsive display
  4. Save

Wix

Using HTML Component:

  1. Open Wix Editor
  2. Click "Add" → "Embed Code"
  3. Select "HTML iframe"
  4. Paste your embed code
  5. Resize and position the component
  6. Publish your site

Using Wix Corvid (for developers):

// Add to your page code
$w.onReady(function () {
$w('#htmlComponent').src = "https://oktalkto.me/embed.html?apiKey=YOUR_API_KEY&profileId=YOUR_PROFILE_ID";
});

Webflow

Using Embed Element:

  1. Drag an "Embed" element from the Add Panel
  2. Paste your embed code
  3. Set width and height in the element settings
  4. Style with custom CSS if needed
  5. Publish your site

Custom CSS for Webflow:

.avatar-embed {
width: 100%;
height: 600px;
border: none;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

@media screen and (max-width: 479px) {
.avatar-embed {
height: 500px;
}
}

Framer

Using Code Component:

  1. Add a Code component to your frame
  2. Paste your embed code
  3. Adjust component size and positioning
  4. Preview and publish

Using HTML Override:

import { addPropertyControls, ControlType } from "framer"

export default function AvatarEmbed(props) {
return (
<iframe
src={`https://oktalkto.me/embed.html?apiKey=${props.apiKey}&profileId=${props.profileId}`}
width="100%"
height="600px"
frameBorder="0"
style={{ borderRadius: "10px" }}
/>
)
}

addPropertyControls(AvatarEmbed, {
apiKey: { type: ControlType.String, title: "API Key" },
profileId: { type: ControlType.String, title: "Profile ID" }
})

Ghost

Using HTML Card:

  1. Create or edit a post
  2. Type /html to add an HTML card
  3. Paste your embed code
  4. Click outside to save
  5. Publish your post

Using Injection (theme-wide): Add to your theme's default.hbs file:

{{#is "page"}}
{{#has slug="chat"}}
<div class="avatar-container">
<iframe src="https://oktalkto.me/embed.html?apiKey=YOUR_API_KEY&profileId=YOUR_PROFILE_ID"
width="100%" height="600px" frameborder="0"></iframe>
</div>
{{/has}}
{{/is}}

Bubble

Using HTML Element:

  1. Drag an "HTML" element onto your page
  2. Paste your embed code in the HTML content
  3. Set element size and positioning
  4. Deploy your app

Using Plugin (if available): Search for "iframe" or "embed" plugins in Bubble's plugin marketplace.

Carrd

Using Embed Widget:

  1. Add a "Widget" element
  2. Choose "Embed"
  3. Paste your embed code
  4. Adjust widget size
  5. Publish your site

Pro Tip for Carrd: Use the "Code" widget for more control over styling and responsive behavior.

Notion (Limited)

Using Embed Block:

  1. Type /embed in your page
  2. Paste your embed URL (just the src part)
  3. Press Enter

Note: Notion has limited iframe support. For better results, link to a dedicated page with your avatar.

HubSpot

Using Rich Text Module:

  1. Edit your page template
  2. Add a "Rich Text" module
  3. Click "Source" to edit HTML
  4. Paste your embed code
  5. Save and publish

Using Custom Module: Create a custom module for reusable avatars across your site.

Mailchimp Landing Pages

Using Code Block:

  1. Add a "Code" block to your landing page
  2. Paste your embed code
  3. Preview to ensure it displays correctly
  4. Publish your landing page

Leadpages

Using HTML Widget:

  1. Drag an "HTML" widget onto your page
  2. Paste your embed code
  3. Adjust widget size and positioning
  4. Save and publish

Unbounce

Using Custom HTML:

  1. Add a "Custom HTML" element
  2. Paste your embed code
  3. Resize and position the element
  4. Publish your page

React Applications

Using Component:

import React from 'react';

const AvatarEmbed = ({ apiKey, profileId, width = "100%", height = "600px" }) => {
return (
<iframe
src={`https://oktalkto.me/embed.html?apiKey=${apiKey}&profileId=${profileId}`}
width={width}
height={height}
frameBorder="0"
style={{ borderRadius: '10px', boxShadow: '0 4px 20px rgba(0,0,0,0.1)' }}
title="AI Avatar Chat"
/>
);
};

export default AvatarEmbed;

Vue.js Applications

Using Component:

<template>
<iframe
:src="embedUrl"
:width="width"
:height="height"
frameborder="0"
class="avatar-embed"
title="AI Avatar Chat"
/>
</template>

<script>
export default {
name: 'AvatarEmbed',
props: {
apiKey: String,
profileId: String,
width: { type: String, default: '100%' },
height: { type: String, default: '600px' }
},
computed: {
embedUrl() {
return `https://oktalkto.me/embed.html?apiKey=${this.apiKey}&profileId=${this.profileId}`;
}
}
}
</script>

<style scoped>
.avatar-embed {
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
</style>

BigCommerce

Using HTML Widget:

  1. Go to Storefront → Script Manager
  2. Create Script
  3. Choose "Footer" location
  4. Paste your embed code
  5. Select pages where you want the avatar
  6. Save

Using Page Builder:

  1. Edit your page in Page Builder
  2. Add an "HTML" widget
  3. Paste your embed code
  4. Style and position the widget
  5. Save and publish

Magento

Using CMS Static Block:

  1. Go to Content → Elements → Blocks
  2. Create new block
  3. Add your embed code in the content area
  4. Save block
  5. Add block to pages via Layout Update XML

Using Widget:

  1. Go to Content → Elements → Widgets
  2. Create new widget
  3. Choose "CMS Static Block"
  4. Select your block with embed code
  5. Choose where to display

WooCommerce (WordPress)

Using Shortcode: Create a shortcode in your theme's functions.php:

function oktalkto_avatar_shortcode($atts) {
$atts = shortcode_atts(array(
'api_key' => '',
'profile_id' => '',
'width' => '100%',
'height' => '600px'
), $atts);

return '<iframe src="https://oktalkto.me/embed.html?apiKey=' . $atts['api_key'] . '&profileId=' . $atts['profile_id'] . '" width="' . $atts['width'] . '" height="' . $atts['height'] . '" frameborder="0"></iframe>';
}
add_shortcode('oktalkto_avatar', 'oktalkto_avatar_shortcode');

Then use in posts/pages:

[oktalkto_avatar api_key="YOUR_API_KEY" profile_id="YOUR_PROFILE_ID"]

Elementor (WordPress)

Using HTML Widget:

  1. Edit with Elementor
  2. Add "HTML" widget
  3. Paste your embed code
  4. Adjust styling in the Style tab
  5. Update the page

Pro tip: Use Elementor's responsive controls to adjust avatar size for different devices.

Divi (WordPress)

Using Code Module:

  1. Add a "Code" module to your page
  2. Paste your embed code
  3. Adjust module settings for spacing and alignment
  4. Save and publish

Weebly

Using Embed Code Element:

  1. Drag "Embed Code" element onto your page
  2. Click "Edit Custom HTML"
  3. Paste your embed code
  4. Save and publish

Jimdo

Using Widget/HTML:

  1. Add a "Widget/HTML" element
  2. Paste your embed code
  3. Adjust element size and positioning
  4. Save

Strikingly

Using HTML Section:

  1. Add a "HTML" section
  2. Paste your embed code
  3. Preview to check display
  4. Publish your site

Webnode

Using HTML Widget:

  1. Add "HTML code" widget
  2. Paste your embed code
  3. Adjust widget settings
  4. Save and publish

Tilda

Using HTML Block:

  1. Add "HTML" block (T123)
  2. Paste your embed code
  3. Adjust block settings
  4. Publish

ConvertKit Landing Pages

Using Custom HTML:

  1. Add "Custom HTML" element
  2. Paste your embed code
  3. Position and style the element
  4. Save landing page

ClickFunnels

Using HTML Element:

  1. Add "HTML" element to your funnel page
  2. Paste your embed code
  3. Adjust element size and positioning
  4. Save and publish

Gumroad

Using Product Description: Add your embed code to product descriptions or create a dedicated page:

<div style="margin: 20px 0;">
<h3>Questions? Chat with our AI assistant:</h3>
<iframe src="https://oktalkto.me/embed.html?apiKey=YOUR_API_KEY&profileId=YOUR_PROFILE_ID"
width="100%" height="500px" frameborder="0"></iframe>
</div>

Teachable

Using Code Block:

  1. Edit your course page
  2. Add a "Code" block
  3. Paste your embed code
  4. Save and publish

Kajabi

Using HTML/CSS Widget:

  1. Add "HTML/CSS" widget to your page
  2. Paste your embed code
  3. Style with custom CSS if needed
  4. Save

Thinkific

Using HTML/CSS Code:

  1. Edit your course page
  2. Add "HTML/CSS Code" block
  3. Paste your embed code
  4. Save and publish

Custom HTML Sites

Basic Integration:

<!DOCTYPE html>
<html>
<head>
<title>Your Website</title>
<style>
.avatar-section {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.avatar-embed {
width: 100%;
height: 600px;
border: none;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
.avatar-embed {
height: 500px;
}
}
</style>
</head>
<body>
<div class="avatar-section">
<h2>Chat with Our AI Assistant</h2>
<iframe
src="https://oktalkto.me/embed.html?apiKey=YOUR_API_KEY&profileId=YOUR_PROFILE_ID"
class="avatar-embed"
title="AI Avatar Chat">
</iframe>
</div>
</body>
</html>

Platform-Specific Tips

E-commerce Platforms:

  • Add avatars to product pages for instant customer support
  • Use on checkout pages to reduce cart abandonment
  • Place on FAQ pages to answer common questions

Course/Education Platforms:

  • Add to course introductions for student questions
  • Use in lesson pages for immediate clarification
  • Include in resource sections for extra help

Landing Page Builders:

  • Use avatars to qualify leads through conversation
  • Answer objections before visitors leave
  • Provide personalized recommendations

No-Code Platforms:

  • Test embed code in preview mode first
  • Use responsive settings to ensure mobile compatibility
  • Check loading times on slower connections

Customizing Your Avatar

Size and Placement

Adjust the iframe dimensions:

<!-- Full width, tall avatar -->
<iframe
src="https://oktalkto.me/embed.html?apiKey=YOUR_API_KEY&profileId=YOUR_PROFILE_ID"
width="100%"
height="800px"
frameborder="0">
</iframe>

<!-- Smaller sidebar avatar -->
<iframe
src="https://oktalkto.me/embed.html?apiKey=YOUR_API_KEY&profileId=YOUR_PROFILE_ID"
width="400px"
height="500px"
frameborder="0">
</iframe>

Full-Page Avatar

Create a dedicated page for your avatar:

<!DOCTYPE html>
<html>
<head>
<title>Chat with Our AI Assistant</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.avatar-container {
width: 100vw;
height: 100vh;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div class="avatar-container">
<iframe src="https://oktalkto.me/embed.html?apiKey=YOUR_API_KEY&profileId=YOUR_PROFILE_ID"></iframe>
</div>
</body>
</html>

Mobile-Friendly Design

Make sure your avatar works well on phones:

<style>
.avatar-wrapper {
width: 100%;
max-width: 800px;
margin: 0 auto;
}

.avatar-wrapper iframe {
width: 100%;
height: 600px;
border: none;
border-radius: 10px;
}

@media (max-width: 600px) {
.avatar-wrapper iframe {
height: 500px;
}
}
</style>

<div class="avatar-wrapper">
<iframe src="https://oktalkto.me/embed.html?apiKey=YOUR_API_KEY&profileId=YOUR_PROFILE_ID"></iframe>
</div>

Security Settings

Domain Restrictions

🔒 CRITICAL SECURITY STEP - Configure domain restrictions for your avatar:

  1. Go to Settings → Avatar Profiles
  2. Select your avatar profile
  3. Find "Allowed Domains for Embedding" section
  4. Add all domains where your avatar will be used:
    • https://yourdomain.com
    • https://www.yourdomain.com
    • https://subdomain.yourdomain.com
  5. Save the profile

⚠️ Important Notes:

  • Your avatar WILL NOT WORK without proper domain whitelisting
  • Include both www and non-www versions of your domain
  • Use full URLs with https:// for best compatibility
  • This prevents unauthorized use AND enables CORS for your legitimate domains

API Key Management

Keep Your Keys Safe:

  • Don't share API keys publicly
  • Store API keys securely in your website code
  • Contact support if you think your key has been compromised

Important Notes:

  • Each project has one API key that works for all avatar profiles
  • You cannot create multiple API keys per project
  • Use avatar profiles (not multiple keys) to organize and track different avatars

Sharing Strategies

Customer Support

Add to Support Pages:

  • FAQ pages
  • Contact us pages
  • Help documentation
  • Support ticket forms

Example placement: "Need help? Chat with our AI assistant below, or contact our team directly."

Sales and Marketing

Product Pages:

  • Let visitors ask questions about products
  • Provide instant information and support
  • Capture leads through conversation

Landing Pages:

  • Engage visitors immediately
  • Answer common objections
  • Guide people through your offerings

Content and Education

Blog Posts:

  • Add avatars to educational content
  • Let readers ask follow-up questions
  • Create interactive learning experiences

Resource Centers:

  • Help people find relevant information
  • Answer questions about your content
  • Provide personalized recommendations

Testing Your Avatar

Before Going Live

Test Everything:

  1. Visit your website where you added the avatar
  2. Try the conversation - ask questions your visitors might ask
  3. Test on different devices - phone, tablet, desktop
  4. Check different browsers - Chrome, Safari, Firefox
  5. Verify mobile experience - make sure it's easy to use on phones

Monitor Performance

Check Analytics:

  • See how many people are talking to your avatar
  • Review common questions to improve content
  • Track token usage to plan capacity

Get Feedback:

  • Ask team members to test the avatar
  • Monitor customer feedback about the experience
  • Update content based on real conversations

Troubleshooting

Common Issues

Avatar Not Loading:

  • 🚨 MOST COMMON ISSUE: Check that your domain is whitelisted in avatar profile settings
  • Verify your API key is correct
  • Make sure your website uses HTTPS (required for microphone access)
  • Check browser console for CORS errors (indicates domain not whitelisted)

Poor Performance:

  • Ensure your website loads quickly
  • Check your internet connection
  • Try embedding on a different page to isolate issues

Not Working on Mobile:

  • Test the responsive design
  • Check that the iframe isn't too small
  • Verify touch interactions work properly

Getting Help

Quick Fixes:

  • Copy the embed code again from your dashboard
  • Try refreshing your website cache
  • Test in an incognito/private browser window

Need Support:

  • Email us at support@oktalkto.me
  • Include your avatar ID and website URL
  • Describe what's happening and what you expected

Advanced Tips

Multiple Avatars

Different Avatars for Different Pages:

  • Create different avatar profiles for different purposes
  • Each profile has a unique avatar ID for tracking usage
  • Customize personalities for specific audiences

How Avatar Tracking Works:

  • Each avatar profile gets a unique profileId in the embed URL
  • Example: ...embed.html?apiKey=your-key&profileId=profile-123
  • Track usage by monitoring conversations per avatar profile
  • View analytics in your dashboard to see which avatars perform best

A/B Testing:

  • Try different avatar personalities using different profiles
  • Test different placements on your website
  • Monitor which avatar profiles get more engagement
  • Use the unique avatar IDs to track performance differences

Analytics and Optimization

Track Success:

  • Monitor conversation length and engagement
  • See which topics people ask about most
  • Use insights to improve your avatar's knowledge

Continuous Improvement:

  • Add new content based on user questions
  • Refine avatar personalities based on feedback
  • Update responses to be more helpful

Your avatar is now ready to engage with visitors on your website 24/7. Start conversations, provide instant support, and create amazing user experiences!