Skip to main content

Prerequisites

Before you begin, make sure you have:

A Glowstudio account with a configured AI agent

Admin access to your WordPress website

​
Integration Methods

There are three main ways to integrate your Glowstudio 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

​
Glowstudio Widget Code

Before proceeding with any method, you’ll need your Glowstudio 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 Glowstudio 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 Glowstudio 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 Glowstudio 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 Glowstudio 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:
Modify the render option to ‘bottom-left’ or ‘bottom-right’ to change the widget’s position.
Add autostart: true, to the VG_CONFIG object to have the widget open automatically when a user visits your website.
Add your own CSS file to the stylesheets array for custom styling:
javascript
    stylesheets: [
        "https://vg-bunny-cdn.b-cdn.net/vg_live_build/styles.css",
        "https://your-custom-css-url.css"
    ],

​
Troubleshooting

If you encounter issues with your Glowstudio 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 Glowstudio 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 Glowstudio scripts from loading.