> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useinvent.com/llms.txt
> Use this file to discover all available pages before exploring further.

# WordPress

> Add your Invent assistant to WordPress sites

## 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: Invent WordPress Plugin (Recommended)

The official Invent plugin requires no code.

<Steps>
  <Step title="Install the Invent Plugin">
    In your WordPress admin, go to **Plugins** → **Add New**, search for **Invent**, then install and activate the plugin.
  </Step>

  <Step title="Add Your Assistant ID">
    Go to **Settings** → **Invent** and paste your Assistant ID from the Invent dashboard. The bubble appears on all pages of your site.
  </Step>
</Steps>

### Method 2: Using a Code Snippets Plugin

<Steps>
  <Step title="Install Code Snippets Plugin">
    Install the free **Code Snippets** plugin from the WordPress plugin directory, or use any custom code plugin you prefer.
  </Step>

  <Step title="Add the Bubble Code">
    Create a new snippet and paste this code:

    ```php theme={"system"}
    function add_invent_assistant() {
        ?>
        <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID"></invent-assistant>
        <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.
  </Step>

  <Step title="Save and Activate">
    Save the snippet and activate it. The bubble will now appear on all pages of your site.
  </Step>
</Steps>

### Method 3: Edit Theme Files Directly

<Warning>
  Make sure to use a child theme to prevent losing your changes when the theme updates.
</Warning>

<Steps>
  <Step title="Open functions.php">
    Navigate to **Appearance** → **Theme File Editor** and open your theme's `functions.php` file.
  </Step>

  <Step title="Add the Code">
    Add this code at the end of the file:

    ```php theme={"system"}
    function add_invent_assistant() {
        ?>
        <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID"></invent-assistant>
        <script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
        <?php
    }
    add_action('wp_footer', 'add_invent_assistant');
    ```
  </Step>

  <Step title="Update File">
    Click **Update File** to save your changes.
  </Step>
</Steps>

### Method 4: 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:

```html theme={"system"}
<invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID"></invent-assistant>
<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:

```php theme={"system"}
function add_invent_assistant() {
    ?>
    <invent-assistant
      assistant-id="ast_YOUR_ASSISTANT_ID"
      theme-appearance="auto"
      theme-button-background-color="#2271b1"
    />
    <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:

```php theme={"system"}
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"></invent-assistant>
    <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:

```php theme={"system"}
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"></invent-assistant>
    <script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
    <?php
}
add_action('wp_footer', 'add_invent_assistant');
```

## User Authentication

<Warning>
  **Security Requirement:** When using any `user-*` attributes (`user-id`, `user-name`), 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.
</Warning>

Pass WordPress user information to Invent for personalized experiences:

```php theme={"system"}
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;

        // 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); ?>"
        />
        <script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
        <?php
    } else {
        ?>
        <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID"></invent-assistant>
        <script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
        <?php
    }
}
add_action('wp_footer', 'add_invent_assistant');
```

## Troubleshooting

<AccordionGroup>
  <Accordion title="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
  </Accordion>

  <Accordion title="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
  </Accordion>

  <Accordion title="Styling conflicts">
    **Possible causes:**

    * Theme CSS interfering with button
    * Z-index conflicts

    **Solutions:**

    * Add custom CSS to your theme
    * Adjust button positioning if needed
  </Accordion>
</AccordionGroup>

## Popular Plugin Compatibility

The bubble works seamlessly with popular WordPress plugins:

<CardGroup cols={2}>
  <Card title="WooCommerce" icon="cart-shopping">
    Perfect for e-commerce support and product questions
  </Card>

  <Card title="Elementor" icon="e">
    Add via Custom HTML widget in header/footer templates
  </Card>

  <Card title="WPML" icon="language">
    Works with multilingual sites automatically
  </Card>

  <Card title="Yoast SEO" icon="magnifying-glass">
    No impact on SEO or page speed
  </Card>
</CardGroup>

## Best Practices

<Note>
  * 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
</Note>