Skip to main content

​
Overview

Add your Invent AI assistant to any WordPress site with a simple floating bubble. Your visitors can chat with your assistant without leaving your website.

​
Quick Installation

The easiest way to add Invent to your WordPress site is by adding the bubble code to your theme.
1

Install Code Snippets Plugin

Install the free Code Snippets plugin from the WordPress plugin directory, or use any custom code plugin you prefer.
2

Add the Bubble Code

Create a new snippet and paste this code:
function add_invent_assistant() {
    ?>
    <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
    <script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>
    <?php
}
add_action('wp_footer', 'add_invent_assistant');
Replace ast_YOUR_ASSISTANT_ID with your actual assistant ID from the Invent dashboard.
3

Save and Activate

Save the snippet and activate it. The bubble will now appear on all pages of your site.

​
Method 2: Edit Theme Files Directly

Make sure to use a child theme to prevent losing your changes when the theme updates.
1

Open functions.php

Navigate to Appearance → Theme File Editor and open your theme’s functions.php file.
2

Add the Code

Add this code at the end of the file:
function add_invent_assistant() {
    ?>
    <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
    <script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>
    <?php
}
add_action('wp_footer', 'add_invent_assistant');
3

Update File

Click Update File to save your changes.

​
Method 3: Using a Page Builder

If you’re using Elementor, Divi, or another page builder:
  1. Add a Custom HTML or Code widget to your header/footer template
  2. Paste the bubble code:
<invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>

​
Customization

​
Change Button Colors

Match the bubble to your WordPress theme: 
function add_invent_assistant() {
    ?>
    <invent-assistant
      assistant-id="ast_YOUR_ASSISTANT_ID"
      theme-appearance="auto"
      theme-button-background-color="#2271b1"
      theme-button-color="#ffffff"
    />
    <script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>
    <?php
}
add_action('wp_footer', 'add_invent_assistant');

​
Show Only on Specific Pages

Show the assistant only on certain pages or post types: 
function add_invent_assistant() {
    // Only show on single posts and pages
    if (!is_single() && !is_page()) {
        return;
    }
    ?>
    <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
    <script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>
    <?php
}
add_action('wp_footer', 'add_invent_assistant');

​
Hide on Specific Pages

Exclude the assistant from certain pages: 
function add_invent_assistant() {
    // Don't show on checkout or cart pages
    if (is_page(['checkout', 'cart'])) {
        return;
    }
    ?>
    <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
    <script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>
    <?php
}
add_action('wp_footer', 'add_invent_assistant');

​
User Authentication

Security Requirement: When using any user-* attributes (user-id, user-name, user-avatar), you must also provide user-hash. Both user-id and user-hash must be provided together, or neither should be provided. The user-hash must be generated on your backend using HMAC-SHA256 with your assistant’s secret key. Never expose the secret key to the client.
Pass WordPress user information to Invent for personalized experiences: 
function add_invent_assistant() {
    $secret_key = 'your_secret_key_here'; // Get from Invent dashboard

    if (is_user_logged_in()) {
        $current_user = wp_get_current_user();
        $user_id = (string) $current_user->ID;
        $user_name = $current_user->display_name;
        $user_avatar = get_avatar_url($current_user->ID);

        // Generate secure hash
        $user_hash = hash_hmac('sha256', $user_id, $secret_key);
        ?>
        <invent-assistant
          assistant-id="ast_YOUR_ASSISTANT_ID"
          user-hash="<?php echo esc_attr($user_hash); ?>"
          user-id="<?php echo esc_attr($user_id); ?>"
          user-name="<?php echo esc_attr($user_name); ?>"
          user-avatar="<?php echo esc_url($user_avatar); ?>"
        />
        <script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>
        <?php
    } else {
        ?>
        <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
        <script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>
        <?php
    }
}
add_action('wp_footer', 'add_invent_assistant');

​
WooCommerce Integration

Pass product information to your assistant for shopping assistance: 
function add_invent_assistant() {
    ?>
    <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
    <script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>

    <script>
    jQuery(document).ready(function($) {
        // Send product context when on product page
        <?php if (is_product()): ?>
            window.inventContext = {
                page: 'product',
                product: {
                    id: <?php echo get_the_ID(); ?>,
                    name: '<?php echo esc_js(get_the_title()); ?>',
                    price: '<?php echo esc_js(get_post_meta(get_the_ID(), '_price', true)); ?>'
                }
            };
        <?php endif; ?>
    });
    </script>
    <?php
}
add_action('wp_footer', 'add_invent_assistant');

​
Troubleshooting

Possible causes:
  • Code not added correctly
  • JavaScript conflicts
  • Theme compatibility issues
Solutions:
  • Check browser console for JavaScript errors
  • Temporarily disable other plugins to check for conflicts
  • Verify the code is in the wp_footer hook
  • Clear WordPress cache if using a caching plugin
Possible causes:
  • Code added in multiple places
  • Theme already includes footer scripts
Solutions:
  • Remove duplicate code snippets
  • Use only one integration method
Possible causes:
  • Theme CSS interfering with button
  • Z-index conflicts
Solutions:
  • Add custom CSS to your theme
  • Adjust button positioning if needed
The bubble works seamlessly with popular WordPress plugins:

WooCommerce

Perfect for e-commerce support and product questions

Elementor

Add via Custom HTML widget in header/footer templates

WPML

Works with multilingual sites automatically

Yoast SEO

No impact on SEO or page speed

​
Best Practices

  • Store your secret key in wp-config.php using define() for security
  • Use a child theme to prevent losing changes during theme updates
  • Test on staging environment before deploying to production
  • Consider page load times when adding authentication logic