> ## 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: Using a Plugin (Recommended)

<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" />
        <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 2: 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" />
        <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 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:

```html theme={"system"}
<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:

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

```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" />
    <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" />
    <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`, `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.
</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;
        $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:

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

<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>