Overview - TIXAE Agents

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

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

<div style="width: 500px; height: 500px;" id="VG_OVERLAY_CONTAINER"></div>
<script defer>
    (function() {
        window.VG_CONFIG = {
            ID: "YOUR_AGENT_ID",
            region: 'eu', // or 'na' for North America
            render: 'full-width',
            // 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>

Iframes introduce a whole new range of usecases with the huge variety of applications TIXAE Agents brings to the table.

Integrating as a more integral part of websites, platforms or internal helper agents, iframes are a good way to point to your agent without the need to render the script directly on the site, where it might conflict with other scripts. The same with CSS as it might (in some cases - very rare) affect a sites stylesheet. Some popular use-cases are:

Integrate on platform: Make the agent available to use in your own platform, whether it be PowerBI, Slack, Teams or Monday.com it can easily be put in wherever you want.
Use the agent as its own addon on your SaaS platorm: This is an increasingly popular way to integrate AI in no-time and at the same time offer your users a new feature where you can charge a monthly retainer fee or make it custom for each client with a set-up fee and a credit based subscription model. The possibilities are many. For more information read our sales doc (COMING SOON).
Use as a part of webnsite layout: Put the iframe direclty on the front page instead of as a traditional chatbot bubble. This makes for a unique experience that users will definitely appreciate (keep in mind - works best on iPad or PC). Another integration that has increasing popularity is replacing the FAQ page entirely, and giving it all to your AI agent. This will supercharge your FAQ page with natural language, tools and interactive UI elements.
Send it as a URL: This is a fantastic way to share your agent—simply connect it to a button that points to the iframe’s source URL. You can easily send it via email or embed it on your website. The possibilities are endless and its only your creativity that sets the limits.
We cant wait to see all your awesome integrations and use-cases - feel free to share them with us, either via discord or make Gia send it.

Regards, the TIXAE AI team

<iframe
    src="https://voiceglow.org/app/eu/render/YOUR_AGENT_ID/iframe"
    style="width: 100%; height: 100vh;"
    frameborder="0">
</iframe>

Always replace YOUR_AGENT_ID with your actual TIXAE 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:

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