How to Embed Your AI Clone: Website, Community & App Integration

Step 1: Get Your Embed Code

From your AI platform dashboard, navigate to the embedding section and copy your embed code. This is typically a script tag and a container div.

<!-- AIyou Widget -->
<script src="https://cdn.meetaiyou.com/widget.js"></script>
<div id="aiyou-widget" data-ai-id="your-ai-id"></div>

Step 2: Add to Your Website

Paste the embed code into your website's HTML. For most platforms:

• WordPress: Add to footer.php or use a plugin
• Shopify: Add to theme.liquid in the footer
• Webflow: Add custom code in page settings
• Custom HTML: Add before closing </body> tag

Step 3: Customize Appearance

Customize your widget's appearance to match your brand:

• Choose widget position (bottom-right, bottom-left, etc.)
• Set brand colors and fonts
• Add your logo or avatar
• Configure welcome message

Step 4: Test and Launch

Test your embedded AI on different pages and devices. Ensure it loads correctly and responds appropriately. Once verified, your AI is live on your website.

Discord Integration

Add your AI clone as a Discord bot:

1. Create a Discord bot application
2. Get your bot token
3. Connect your AI platform's Discord integration
4. Invite bot to your server
5. Configure channels and permissions

Slack Integration

Add your AI clone to Slack workspace:

1. Create Slack app in your workspace
2. Enable bot token scopes
3. Connect your AI platform's Slack integration
4. Install app to workspace
5. Configure channels and mentions

Circle Community Integration

Embed your AI clone in Circle communities:

1. Get your AI clone's embed code
2. Add custom HTML block in Circle
3. Paste embed code
4. Configure visibility (members only, etc.)
5. Test and launch

API Integration Overview

Most AI platforms provide REST APIs for custom integrations. You'll need:

• API key from your AI platform
• API endpoint URL
• HTTP client library (fetch, axios, etc.)
• UI components for chat interface

Example: React Native Integration

import { useState } from 'react';
import { View, TextInput, Button } from 'react-native';

const AIChat = () => {
  const [message, setMessage] = useState('');
  const [response, setResponse] = useState('');

  const sendMessage = async () => {
    const res = await fetch('https://api.meetaiyou.com/chat', {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer YOUR_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ message }),
    });
    const data = await res.json();
    setResponse(data.response);
  };

  return (
    <View>
      <TextInput value={message} onChangeText={setMessage} />
      <Button title="Send" onPress={sendMessage} />
      <Text>{response}</Text>
    </View>
  );
};

SDKs Available

Many platforms offer SDKs for easier integration:

• React Native SDK
• Flutter SDK
• Swift SDK (iOS)
• Kotlin SDK (Android)
• JavaScript SDK (web)

1. Choose the Right Placement

Place your AI widget where users naturally need help—on product pages, checkout pages, or support sections. Avoid placing it where it might be intrusive.

2. Match Your Brand

Customize colors, fonts, and styling to match your brand. Your AI should feel like a natural part of your platform, not a generic widget.

3. Set Clear Expectations

Use welcome messages to set expectations. Let users know they're talking to an AI and what it can help with.

4. Monitor Performance

Track engagement metrics, common questions, and user satisfaction. Use this data to improve your AI's knowledge base and responses.

5. Test Across Devices

Ensure your embedded AI works correctly on desktop, tablet, and mobile devices. Test on different browsers and screen sizes.

Issue: Widget Not Loading

Possible Causes:

• Script tag not properly placed
• Content Security Policy blocking scripts
• Network issues or API downtime

Solutions: Check script placement, review CSP settings, verify API status, check browser console for errors.

Issue: Styling Conflicts

Possible Causes:

• CSS conflicts with your site's styles
• Z-index issues
• Responsive design conflicts

Solutions: Use iframe embedding, add CSS overrides, adjust z-index values, test responsive breakpoints.

Issue: API Rate Limits

Possible Causes:

• Too many concurrent requests
• Exceeding API rate limits
• Inefficient API usage

Solutions: Implement request throttling, cache responses, upgrade API plan, optimize API calls.