Sharing Your Avatar
Learn how to embed your avatar on any website and share it with the world.
🚨 BEFORE embedding your avatar anywhere, you MUST configure domain whitelisting:
- Go to Settings → Avatar Profiles
- Select your avatar profile
- Scroll to "Allowed Domains for Embedding"
- Add every domain where you plan to use the avatar:
https://yourdomain.com
https://www.yourdomain.com
https://subdomain.yourdomain.com
- 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:
- Go to your project where your avatar lives
- Click "Project Settings"
- Go to the "API Keys" section
- Click "Generate New API Key"
- Copy the key and save it - you'll need this for embedding
Get Your Embed Code
- Open your avatar from the project dashboard
- Click "Share Avatar" or "Get Embed Code"
- 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
⚠️ 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:
- Copy the embed code from your avatar settings
- Paste it into your website's HTML where you want the avatar to appear
- Adjust the width and height to fit your page design
- Save and publish your website
WordPress
Using the HTML Block:
- Edit your page or post
- Add an "HTML" or "Custom HTML" block
- Paste your embed code
- Preview and publish
Using a Plugin: Many WordPress sites use iframe plugins - just paste your embed URL into any iframe plugin.
Shopify
- Go to your theme editor
- Edit the page template where you want the avatar
- Add the embed code in the HTML
- Save the template
Squarespace
Using Code Block:
- Edit your page
- Add a "Code" block
- Paste your embed code
- Click "Apply"
- Save and publish
Using Embed Block:
- Add an "Embed" block
- Paste your embed URL (just the
src
part of the iframe) - Adjust settings for responsive display
- Save
Wix
Using HTML Component:
- Open Wix Editor
- Click "Add" → "Embed Code"
- Select "HTML iframe"
- Paste your embed code
- Resize and position the component
- 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:
- Drag an "Embed" element from the Add Panel
- Paste your embed code
- Set width and height in the element settings
- Style with custom CSS if needed
- 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:
- Add a Code component to your frame
- Paste your embed code
- Adjust component size and positioning
- 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:
- Create or edit a post
- Type
/html
to add an HTML card - Paste your embed code
- Click outside to save
- 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:
- Drag an "HTML" element onto your page
- Paste your embed code in the HTML content
- Set element size and positioning
- Deploy your app
Using Plugin (if available): Search for "iframe" or "embed" plugins in Bubble's plugin marketplace.
Carrd
Using Embed Widget:
- Add a "Widget" element
- Choose "Embed"
- Paste your embed code
- Adjust widget size
- Publish your site
Pro Tip for Carrd: Use the "Code" widget for more control over styling and responsive behavior.
Notion (Limited)
Using Embed Block:
- Type
/embed
in your page - Paste your embed URL (just the
src
part) - Press Enter
Note: Notion has limited iframe support. For better results, link to a dedicated page with your avatar.
HubSpot
Using Rich Text Module:
- Edit your page template
- Add a "Rich Text" module
- Click "Source" to edit HTML
- Paste your embed code
- Save and publish
Using Custom Module: Create a custom module for reusable avatars across your site.
Mailchimp Landing Pages
Using Code Block:
- Add a "Code" block to your landing page
- Paste your embed code
- Preview to ensure it displays correctly
- Publish your landing page
Leadpages
Using HTML Widget:
- Drag an "HTML" widget onto your page
- Paste your embed code
- Adjust widget size and positioning
- Save and publish
Unbounce
Using Custom HTML:
- Add a "Custom HTML" element
- Paste your embed code
- Resize and position the element
- 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:
- Go to Storefront → Script Manager
- Create Script
- Choose "Footer" location
- Paste your embed code
- Select pages where you want the avatar
- Save
Using Page Builder:
- Edit your page in Page Builder
- Add an "HTML" widget
- Paste your embed code
- Style and position the widget
- Save and publish
Magento
Using CMS Static Block:
- Go to Content → Elements → Blocks
- Create new block
- Add your embed code in the content area
- Save block
- Add block to pages via Layout Update XML
Using Widget:
- Go to Content → Elements → Widgets
- Create new widget
- Choose "CMS Static Block"
- Select your block with embed code
- 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:
- Edit with Elementor
- Add "HTML" widget
- Paste your embed code
- Adjust styling in the Style tab
- Update the page
Pro tip: Use Elementor's responsive controls to adjust avatar size for different devices.
Divi (WordPress)
Using Code Module:
- Add a "Code" module to your page
- Paste your embed code
- Adjust module settings for spacing and alignment
- Save and publish
Weebly
Using Embed Code Element:
- Drag "Embed Code" element onto your page
- Click "Edit Custom HTML"
- Paste your embed code
- Save and publish
Jimdo
Using Widget/HTML:
- Add a "Widget/HTML" element
- Paste your embed code
- Adjust element size and positioning
- Save
Strikingly
Using HTML Section:
- Add a "HTML" section
- Paste your embed code
- Preview to check display
- Publish your site
Webnode
Using HTML Widget:
- Add "HTML code" widget
- Paste your embed code
- Adjust widget settings
- Save and publish
Tilda
Using HTML Block:
- Add "HTML" block (T123)
- Paste your embed code
- Adjust block settings
- Publish
ConvertKit Landing Pages
Using Custom HTML:
- Add "Custom HTML" element
- Paste your embed code
- Position and style the element
- Save landing page
ClickFunnels
Using HTML Element:
- Add "HTML" element to your funnel page
- Paste your embed code
- Adjust element size and positioning
- 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:
- Edit your course page
- Add a "Code" block
- Paste your embed code
- Save and publish
Kajabi
Using HTML/CSS Widget:
- Add "HTML/CSS" widget to your page
- Paste your embed code
- Style with custom CSS if needed
- Save
Thinkific
Using HTML/CSS Code:
- Edit your course page
- Add "HTML/CSS Code" block
- Paste your embed code
- 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:
- Go to Settings → Avatar Profiles
- Select your avatar profile
- Find "Allowed Domains for Embedding" section
- Add all domains where your avatar will be used:
https://yourdomain.com
https://www.yourdomain.com
https://subdomain.yourdomain.com
- 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:
- Visit your website where you added the avatar
- Try the conversation - ask questions your visitors might ask
- Test on different devices - phone, tablet, desktop
- Check different browsers - Chrome, Safari, Firefox
- 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!