Overview - Eagle Agents

Eagle Agents can be deployed almost anywhere, from the most popular website builders to SaaS platforms. By utilizing code snippets for integration, the widget can be seamlessly embedded into your digital environment of choice.

Integration Methods

There are four main methods of integrating your AI agent:

Popup Widget

A chat widget that appears in the corner of your website, allowing for easy access without interfering with the main content.

Embedded Chat

A full-width chat interface embedded directly into your page, offering a more immersive experience.

iframe

An iframe that can be placed anywhere on your site, providing maximum flexibility in terms of placement and sizing.

Full html

An iframe that can be placed anywhere on your site, providing maximum flexibility in terms of placement and sizing.

Universal Code Snippets

Regardless of the platform you’re using, these code snippets form the basis of your Eagle integration:

<div id="VG_OVERLAY_CONTAINER"></div>
<script defer>
    (function() {
        window.VG_CONFIG = {
            ID: "YOUR_AGENT_ID",
            region: 'eu', // or 'na' for North America
            render: 'bottom-right', // or 'bottom-left'
            // modalMode: true, // Set this to 'true' to open the widget in modal mode
            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>

Always replace YOUR_AGENT_ID with your actual Eagle Agent ID in all code snippets.

Key Configuration Options

The VG_CONFIG object in the script allows for customization of your agent’s behavior and appearance:

region

render

stylesheets

Additional Configuration Options

You can further customize your chatbot by adding these optional parameters to the VG_CONFIG object:

window.VG_CONFIG = {
  // ... other config options ...
  user: {
    name: "John Doe",
    email: "johndoe@example.com",
    phone: "+1234567890",
  },
  userID: "CUSTOM_USER_ID",
  autostart: true,
};

Providing user data can enhance the personalization of your agents interactions. The autostart option, when set to true, will open the widget automatically when a user visits your site.

Platform-Specific Integration Guides

While the core integration code remains consistent, the method of adding this code to your site varies by platform. Click on each platform for detailed integration instructions:

Shopify: Add the code to your theme.liquid file just before the closing </body> tag.
WordPress: Use a plugin like “Insert Headers and Footers” or edit your theme’s footer.php file.
Wix: Use the Custom Code feature in the Wix Editor.
Webflow: Add the code in the “Custom Code” section of your page settings.
Squarespace: Use the Code Injection feature to add the integration code.
Iframe / Full Page HTML: Learn how to effectively use iframes for various use cases.

For detailed, platform-specific integration guides, please refer to the individual documentation pages for each platform.

​Integration Methods

Popup Widget

Embedded Chat

iframe

Full html

​Universal Code Snippets

​Key Configuration Options

​Additional Configuration Options

​Platform-Specific Integration Guides

Integration Methods

Universal Code Snippets

Key Configuration Options

Additional Configuration Options

Platform-Specific Integration Guides