Add your thinnestAI agent to any WordPress site with a simple plugin or embed code.

WordPress

Add your AI agent to your WordPress site. Works with any WordPress theme — classic editor, block editor, or page builders like Elementor and Divi.

Method 1: Embed Code (Recommended)

The simplest approach — paste the embed script into your WordPress site.

Option A: Site-Wide (Header/Footer)

Add the widget to every page on your site:

In WordPress admin, go to Appearance > Theme Editor (or Customize > Additional CSS/JS)
Or install a plugin like Insert Headers and Footers
Add this code to your site's <head> or footer:

<script
  src="https://app.thinnest.ai/embed.js"
  data-agent-id="YOUR_AGENT_ID"
  data-theme="light"
  data-position="bottom-right"
  async
></script>

Save and visit your site — the chat bubble should appear

Option B: Specific Pages Only

Add the widget to individual pages or posts:

Edit the page or post
Add a Custom HTML block (block editor) or switch to Text mode (classic editor)
Paste the embed code
Publish or update the page

Option C: Elementor

Edit your page with Elementor
Add an HTML widget
Paste the embed code
Save

Option D: Divi

Edit your page with Divi Builder
Add a Code module
Paste the embed code
Save

Method 2: Custom Plugin

For more control, create a simple WordPress plugin:

Create the Plugin

Connect to your WordPress site via FTP or file manager
Navigate to /wp-content/plugins/
Create a folder: thinnestai-chat
Create a file thinnestai-chat.php:

<?php
/**
 * Plugin Name: thinnestAI Chat Widget
 * Description: AI chat widget powered by thinnestAI
 * Version: 1.0
 */

function thinnestai_enqueue_widget() {
    $agent_id = get_option('thinnestai_agent_id', '');
    if (empty($agent_id)) return;

    wp_enqueue_script(
        'thinnestai-embed',
        'https://app.thinnest.ai/embed.js',
        array(),
        null,
        true
    );

    wp_script_add_data('thinnestai-embed', 'data-agent-id', $agent_id);
}
add_action('wp_enqueue_scripts', 'thinnestai_enqueue_widget');

// Settings page
function thinnestai_settings_page() {
    add_options_page(
        'thinnestAI Settings',
        'thinnestAI',
        'manage_options',
        'thinnestai',
        'thinnestai_settings_html'
    );
}
add_action('admin_menu', 'thinnestai_settings_page');

function thinnestai_settings_html() {
    if (!current_user_can('manage_options')) return;

    if (isset($_POST['thinnestai_agent_id'])) {
        check_admin_referer('thinnestai_settings');
        update_option('thinnestai_agent_id', sanitize_text_field($_POST['thinnestai_agent_id']));
        echo '<div class="updated"><p>Settings saved.</p></div>';
    }

    $agent_id = get_option('thinnestai_agent_id', '');
    ?>
    <div class="wrap">
        <h1>thinnestAI Settings</h1>
        <form method="post">
            <?php wp_nonce_field('thinnestai_settings'); ?>
            <table class="form-table">
                <tr>
                    <th><label for="thinnestai_agent_id">Agent ID</label></th>
                    <td><input type="text" id="thinnestai_agent_id" name="thinnestai_agent_id"
                        value="<?php echo esc_attr($agent_id); ?>" class="regular-text" /></td>
                </tr>
            </table>
            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}

// Output embed script with data attributes
function thinnestai_add_widget_script() {
    $agent_id = get_option('thinnestai_agent_id', '');
    if (empty($agent_id)) return;
    ?>
    <script
      src="https://app.thinnest.ai/embed.js"
      data-agent-id="<?php echo esc_attr($agent_id); ?>"
      data-theme="light"
      data-position="bottom-right"
      async
    ></script>
    <?php
}
add_action('wp_footer', 'thinnestai_add_widget_script');

Activate the plugin in Plugins > Installed Plugins
Go to Settings > thinnestAI and enter your Agent ID

Configuration

All widget configuration options work in WordPress. Add data- attributes to the script tag:

<script
  src="https://app.thinnest.ai/embed.js"
  data-agent-id="YOUR_AGENT_ID"
  data-theme="dark"
  data-primary-color="#6366F1"
  data-title="Need Help?"
  data-welcome-message="Hi! Ask me anything about our products."
  data-position="bottom-right"
  async
></script>

Lead Capture

Lead capture works the same as the standard web widget. Configure the lead form in your agent's Deploy settings — it will appear in the WordPress widget automatically.

WooCommerce Integration

For WooCommerce stores, you can pass product context to your agent:

<script
  src="https://app.thinnest.ai/embed.js"
  data-agent-id="YOUR_AGENT_ID"
  data-welcome-message="Hi! I can help you find the perfect product."
  async
></script>

Your agent's knowledge base can include your product catalog (via URL scraping or file upload) so it can answer product questions accurately.

Performance

The embed script is:

Async loaded — Does not block page rendering
Lightweight — ~15KB gzipped
Lazy initialized — Widget UI only loads when the user clicks the bubble
CDN delivered — Fast loading worldwide

No impact on your WordPress site's PageSpeed score.

Troubleshooting

Issue	Solution
Widget doesn't appear	Check for JavaScript errors in browser console
Conflicts with other plugins	Try loading the script in the footer instead of header
Caching issues	Clear your WordPress cache and CDN cache
CSP errors	Add `app.thinnest.ai` to your Content Security Policy
Widget overlaps content	Adjust `data-position` or add custom CSS margin

WordPress

On this page