Skip to main content

Deploy Agent to Web

Learn how to add your AI agent to your website using the AgentsGT chat widget. This guide will walk you through integrating the agent into any web page.

What is Web Deployment?​

Web deployment allows you to embed your AI agent as a chat widget on your website. Visitors can interact with your agent directly on your web pages without leaving your site.

Benefits:

  • Instant customer support
  • Lead generation and qualification
  • Product recommendations
  • 24/7 availability
  • Seamless user experience

Prerequisites​

Before deploying to web, make sure you have:

  • ✓ Created and configured your agent
  • ✓ Tested your agent and verified responses
  • ✓ Access to your website's code or content management system
  • ✓ Basic knowledge of HTML (or someone who can help)

Getting the Widget Code​

Step 1: Open Your Agent​

Go to your agents list and click on the agent you want to add to your website.

AgentsGT Homepage

Step 2: Go to Integrations​

On your agent's page, click on the "Integrations" section.

AgentsGT Homepage

Here you'll find all the ways to connect your agent to different platforms.

Step 3: Click on Embed Code​

In the Integrations section, find and click on "Embed Code".

AgentsGT Homepage

This will show you the code to add your agent to your website.

Step 4: Copy Your Widget Code​

Simply click the "Copy Code" button to copy the code to your clipboard.

AgentsGT Homepage

The code will look something like this:

<div id="agentsgt-container"></div>
<script>
(function(w,d,c,v,o){
  var t,l=d.createElement('link'),s=d.createElement('script');
  l.rel='stylesheet';
  l.href = v + '/dist/agentsgt-widget.css';
  s.src = v + '/dist/widget.umd.js';
  l.onload=function(){d.body.appendChild(s)};
  s.onload=function(){w.AgentSGTWidget&&w.AgentSGTWidget.loadWidget(c,o)};
  d.head.appendChild(l)
})(window,document,'agentsgt-container','https://cdn.jsdelivr.net/npm/@ddrinnova/agentsgt-widget@0.0.9',{
  name: 'AgentSGT Assistant',
  initialMessage: 'How can I help?',
  runtimeUrl: 'Your runtime URL',
  basePath: 'https://cdn.jsdelivr.net/npm/@ddrinnova/agentsgt-widget@0.0.9',
  apiKey: 'Your api key'
});
</script>

Adding the Widget to Your Website​

Now that you have the code, you need to add it to your website. Choose the method that matches your website platform:

Method 1: Regular Website (HTML)​

If you have a regular website or access to HTML files:

Step 1: Open Your Website's HTML File​

Find the main HTML file of your website. This is usually called index.html or similar.

Step 2: Paste the Code at the Bottom​

Scroll to the bottom of the file and find the </body> tag.

Paste the widget code right before this </body> tag:

    <!-- Your existing HTML content -->

    <!-- AgentsGT Chat Widget -->
    <div id="agentsgt-container"></div>
    <script>
    (function(w,d,c,v,o){
      var t,l=d.createElement('link'),s=d.createElement('script');
      l.rel='stylesheet';
      l.href = v + '/dist/agentsgt-widget.css';
      s.src = v + '/dist/widget.umd.js';
      l.onload=function(){d.body.appendChild(s)};
      s.onload=function(){w.AgentSGTWidget&&w.AgentSGTWidget.loadWidget(c,o)};
      d.head.appendChild(l)
    })(window,document,'agentsgt-container','https://cdn.jsdelivr.net/npm/@ddrinnova/agentsgt-widget@0.0.9',{
      name: 'AgentSGT Assistant',
      initialMessage: 'How can I help?',
      runtimeUrl: 'Your runtime URL',
      basePath: 'https://cdn.jsdelivr.net/npm/@ddrinnova/agentsgt-widget@0.0.9',
      apiKey: 'Your api key'
    });
    </script>
  </body>
</html>

Step 3: Save and See It Live​

  1. Save your HTML file
  2. Upload it to your web server (if editing locally)
  3. Visit your website - you should see the chat widget appear!

Method 2: WordPress Website​

If your website uses WordPress, it's even easier:

Using a Plugin (Easiest Way)​

  1. In your WordPress admin, go to Plugins → Add New
  2. Search for "Insert Headers and Footers" or "Code Snippets"
  3. Install and activate the plugin
  4. Go to the plugin's settings page
  5. Paste your widget code in the Footer section
  6. Click Save
  7. Visit your website to see the widget!

Why use a plugin? It's safer and won't be lost when you update your theme.

Method 3: Shopify Store​

If you have a Shopify store:

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Actions → Edit Code
  3. Find and click on theme.liquid in the Layout folder
  4. Scroll down and find the </body> tag
  5. Paste your widget code right before </body>
  6. Click Save
  7. Visit your store to see the widget!

Method 4: Other Website Platforms​

Wix:

  1. Go to Settings → Custom Code
  2. Click + Add Custom Code
  3. Paste your widget code
  4. Choose Body - End
  5. Apply to All Pages
  6. Click Apply

Squarespace:

  1. Go to Settings → Advanced → Code Injection
  2. Paste your code in the Footer box
  3. Click Save

Webflow:

  1. Go to Project Settings → Custom Code
  2. Paste your code in the Footer Code box
  3. Click Save
  4. Publish your site

Google Tag Manager:

  1. Create a new tag called "AgentsGT Widget"
  2. Choose Custom HTML as tag type
  3. Paste your widget code
  4. Set trigger to All Pages
  5. Save and publish

Testing Your Widget​

Make Sure Everything Works​

After adding the code, it's important to test that everything is working correctly.

1. Check if the Widget Appears​

Open your website in a browser. You should see a small chat bubble (usually in the bottom-right corner).

If you don't see it:

  • Refresh the page (Ctrl+R or Cmd+R)
  • Clear your browser cache
  • Make sure you saved your changes

2. Test the Chat​

Click on the chat bubble to open it.

Try these things:

  • Send a test message
  • Check if your agent responds
  • Close and reopen the widget
  • Make sure it looks good on your website

3. Test on Your Phone​

Open your website on your phone to make sure the widget works on mobile devices too!

The widget should automatically adjust to fit smaller screens.

Common Issues and Solutions​

Widget Not Showing Up?​

If you don't see the widget on your website:

  1. Refresh your browser - Press Ctrl+R (Windows) or Cmd+R (Mac)
  2. Clear your cache - Sometimes old versions are cached
  3. Check if you saved - Make sure you saved the file with the code
  4. Look for the code - Verify the code is actually on your website
  5. Check your agent - Make sure your agent is active in AgentsGT

Widget Not Responding?​

If the widget appears but doesn't respond:

  1. Check your agent status - Go to AgentsGT and make sure your agent is active
  2. Verify your credits - Make sure you have credits available
  3. Test your agent - Try chatting with it directly in AgentsGT first

Need to Remove the Widget?​

Simply delete the code you added to your website and save the file. The widget will disappear.

What's Next?​

Congratulations! Your AI agent is now live on your website. 🎉

You can now:

Need help? If something isn't working, contact support and include:

  • Your website URL
  • What's not working
  • Screenshots if possible