WordPress

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.

Method 1: Using a Plugin (Recommended)

Install Code Snippets Plugin

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

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/embed.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.

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.

Open functions.php

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

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/embed.js" async defer></script>
    <?php
}
add_action('wp_footer', 'add_invent_assistant');

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:

Add a Custom HTML or Code widget to your header/footer template
Paste the bubble code:

<invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/embed.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/embed.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/embed.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/embed.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/embed.js" async defer></script>
        <?php
    } else {
        ?>
        <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
        <script type="text/javascript" src="https://www.useinvent.com/embed.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/embed.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

Bubble not appearing

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

Button appears multiple times

Possible causes:

Code added in multiple places
Theme already includes footer scripts

Solutions:

Remove duplicate code snippets
Use only one integration method

Styling conflicts

Possible causes:

Theme CSS interfering with button
Z-index conflicts

Solutions:

Add custom CSS to your theme
Adjust button positioning if needed

Popular Plugin Compatibility

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

Getting Started

Assistants

Features

Broadcasts

Workspace Management

Overview

Quick Installation

Method 1: Using a Plugin (Recommended)

Method 2: Edit Theme Files Directly

Method 3: Using a Page Builder

Customization

Change Button Colors

Show Only on Specific Pages

Hide on Specific Pages

User Authentication

WooCommerce Integration

Troubleshooting

Popular Plugin Compatibility

WooCommerce

Elementor

WPML

Yoast SEO

Best Practices

​Overview

​Quick Installation

​Method 1: Using a Plugin (Recommended)

​Method 2: Edit Theme Files Directly

​Method 3: Using a Page Builder

​Customization

​Change Button Colors

​Show Only on Specific Pages

​Hide on Specific Pages

​User Authentication

​WooCommerce Integration

​Troubleshooting

​Popular Plugin Compatibility

WooCommerce

Elementor

WPML

Yoast SEO

​Best Practices

Overview

Quick Installation

Method 1: Using a Plugin (Recommended)

Method 2: Edit Theme Files Directly

Method 3: Using a Page Builder

Customization

Change Button Colors

Show Only on Specific Pages

Hide on Specific Pages

User Authentication

WooCommerce Integration

Troubleshooting

Popular Plugin Compatibility

Best Practices