Skip to main content

Prerequisites

Before you begin, make sure you have:

A Convocore account with a configured AI agent

Admin access to your Shopify store

​
Integration Steps

1

Access Your Convocore Dashboard

Log in to your Convocore account and navigate to your agent’s settings. Note down your unique agent ID.
You’ll find an agents unique ID on its dedicated card in the Agents tab or in the URL from the agent designer ex. https://www.convocore.ai/app/eu/agents/gib2no07kqdy1f2m/overview
2

Log in to Shopify

Access your Shopify admin panel.
3

Edit Theme Code

  1. Go to Online Store > Themes
  2. Find your current theme and click Actions (three dots) > Edit code
4

Locate theme.liquid

In the list of template files, find and click on theme.liquid.
5

Add Integration Code

Scroll to the bottom of the theme.liquid file. Just before the closing </body> tag, paste the following 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'
            // 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>
Remember to replace YOUR_AGENT_ID with your actual Convocore Agent ID.
6

Save Changes

Click the Save button in the top right corner of the code editor.
7

Test Your Integration

Visit your Shopify store’s frontend and verify that the widget appears and functions correctly.

​
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 store.
Add your own CSS file to the stylesheets array for custom styling:
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 Convocore 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 Convocore Agent ID.
  3. Ensure the code is placed just before the closing </body> tag in your theme.liquid file. If this does not work, try placing it at the bottom of the </header> tag at the top of the theme.liquied file.
  4. Clear your browser cache and refresh your Shopify store to see changes.
If you’re using a third-party Shopify theme, the process might vary slightly. Consult your theme’s documentation or contact the theme developer for specific instructions on adding custom code.