Prerequisites

Before you begin, make sure you have:

A TIXAE Agents account with a configured AI agent

Admin access to your WordPress website

Integration Methods

There are three main ways to integrate your TIXAE Agent widget into WordPress:

Plugin Method

Using the “Insert Headers and Footers” plugin

Theme Editor Method

Directly editing your theme’s header.php file

Elementor Method

Using Elementor’s Custom Code feature

TIXAE Agent Widget Code

Before proceeding with any method, you’ll need your TIXAE Agent widget code:

<div id="VG_OVERLAY_CONTAINER"></div>
<script defer>
    (function() {
        window.VG_CONFIG = {
            ID: "YOUR_AGENT_ID", // Replace with your actual agent ID
            region: 'eu', // or 'na' for North America
            render: 'bottom-right', // or 'bottom-left'
            stylesheets: [
                "https://vg-bunny-cdn.b-cdn.net/vg_live_build/styles.css",
            ],
        }
        var VG_SCRIPT = document.createElement("script");
        VG_SCRIPT.src = "https://vg-bunny-cdn.b-cdn.net/vg_live_build/vg_bundle.js";
        VG_SCRIPT.defer = true;
        document.body.appendChild(VG_SCRIPT);
    })()
</script>

Remember to replace YOUR_AGENT_ID with your actual TIXAE Agent ID.

Method 1: Using a Plugin

1

Install Plugin

  1. Open your WordPress dashboard
  2. Go to Plugins > Add New
  3. Search for Insert Headers and Footers
  4. Install and activate the plugin by WPBrigade
2

Access Plugin Settings

Go to Settings > WP Headers and Footers in the sidebar

3

Add Widget Code

Paste the TIXAE Agent widget code in the header section

4

Save Changes

Click Save Changes

Method 2: Using the Theme Editor

Editing theme files directly can break your site if not done correctly. Always backup your site before making changes.

1

Access Theme Editor

  1. Open your WordPress dashboard
  2. Go to Appearance > Theme File Editor
2

Edit Header File

  1. In the Theme Files section on the right, find and open the header.php file
  2. Locate the closing </head> tag
3

Add Widget Code

Paste the TIXAE Agent widget code just before the closing </head> tag

4

Save Changes

Click Update File to save your changes

Method 3: Using Elementor

1

Access Elementor Custom Code

  1. Login to WP Admin
  2. Go to Elementor > Custom Code
2

Add New Custom Code

Click Add New Custom Code

3

Configure Custom Code

  1. Enter a title for your code snippet
  2. Choose the Location:
    • <head> for page level
    • <body> - Start for beginning of the page’s body
    • <body> - End for end of the page’s body
  3. Set the Priority (1-10, lower numbers have higher priority)
  4. Paste the TIXAE Agent widget code in the code block editor
4

Set Display Conditions

  1. In the Publish block, click Edit next to Conditions
  2. Set the desired conditions for where the widget should appear
5

Publish

Click Publish to make your changes live

Customization Options

You can customize your widget’s behavior and appearance by adjusting the VG_CONFIG options:

Troubleshooting

If you encounter issues with your TIXAE Agent widget integration:

  1. Verify that you’ve copied the entire code snippet correctly.
  2. Double-check that you’ve replaced “YOUR_AGENT_ID” with your actual TIXAE Agent ID.
  3. Clear your browser cache and refresh your WordPress website to see changes.
  4. If using a caching plugin, clear the cache after making changes.
  5. Check for conflicts with other plugins or theme customizations.

If you’re using a security plugin, make sure it’s not blocking the TIXAE Agent scripts from loading.