Embed AI Agent on a Website

How to embed an AI agent on a website

To embed an AI Agent on a website, you can go to any AI Agent in your dashboard and go to the Integrations tab to see the embed code and available settings to control when the AI Agent pops up.

Squarespace

🔧 How to Embed the Agent Supply Chat Widget into a Squarespace Site (Step by Step)

---

1. Introduction

This guide walks you through embedding the Agent Supply chat widget into your Squarespace site so visitors can chat with your AI or support agent directly.

---

2. Obtain the Widget Code

• Log into your Agent Supply account (or create one).

• Go to your dashboard and find the embed code for your chat widget.

• This is usually a JavaScript or HTML snippet meant to be copied and embedded into your website.

---

3. Access Squarespace Editor

• Open your Squarespace website and navigate to the page where you'd like the chat to appear.

• Click Edit to enter the page builder.

---

4. Insert a Code Block

• Click the + button to add a new block to the page.

• Select the “Code” block.

• Paste the Agent Supply chat widget code into the code block.

• You can place this in the page footer or any section where you want the widget to appear.

---

5. Save and Publish

• Click Apply or Save after pasting the code.

• Exit the editor and publish the page to make your changes live.

---

6. Verify the Widget on the Live Site

• Visit your live Squarespace site in a regular browser window.

• You should see the Agent Supply chat widget — usually a floating icon in the bottom corner.

• Open it to make sure it works and is connected to your Agent Supply account.

---

7. Troubleshooting (if the widget doesn’t show up)

• Make sure:

  • You used a Code block (not text).

  • The script was pasted correctly.

  • You saved and published changes.

  • There are no conflicting scripts.

  • You’ve cleared your browser cache.

---

8. Conclusion

Your site now has the Agent Supply chat widget active, enabling real-time AI-powered chat. You can further customize its appearance or behavior in your Agent Supply dashboard.

---

✅ Summary Table

Step	Action
1	Copy chat embed code from Agent Supply
2	Open Squarespace editor on your desired page
3	Add a Code block and paste the code
4	Save and publish
5	Verify the chat is working on the live site

Shopify

✅ How to Embed the Agent Supply Chat Widget into a Shopify Store

1. Introduction & Overview

• The goal is to enable real-time AI Agent interaction on your storefront using Agent Supply.

---

2. Accessing Your Shopify Theme Code

• In your Shopify admin panel, go to Online Store → Themes.

• Find your current active theme and click “Actions” → “Edit code”.

---

3. Opening the Correct File

• In the left sidebar, open the theme.liquid file under the Layout section.

• This file contains your site’s overall HTML structure — the place to insert the widget code.

---

4. Inserting the Agent Supply Widget Code

• Copy the Agent Supply chat widget script (usually a <script> tag provided by Agent Supply).

• Paste it just before the closing </body> tag inside theme.liquid.

---

5. Saving and Previewing

• Click Save in the upper-right corner of the code editor.

• Go to your store’s homepage and refresh the page.

• You should now see the Agent Supply chat widget — typically a floating chat bubble.

---

6. Testing the Widget

• Click the chat bubble to open the Agent Supply assistant.

• A welcome message should appear, showing that the widget is active and connected.

---

7. Customization Options

• You can customize the widget via the Agent Supply dashboard, such as:

  • Changing the greeting message

  • Adjusting theme colors

  • Selecting which Agent to deploy

• Advanced users can modify the script’s behavior directly in the embed code.

---

8. Summary

• To embed the Agent Supply widget:

  1. Go to Edit Code in Shopify.

  2. Open theme.liquid.

  3. Paste the Agent Supply script before </body>.

  4. Save and refresh.

Wix

🎯 Step 1: Copy the Agent Supply Embed Code

• Open your Agent Supply dashboard and navigate to your AI Agent.

• Go to the Integrations or Embed Chatbot section.

• Copy the provided HTML/JavaScript embed snippet, which usually includes a <script> tag plus a <div> with a unique widget ID.

---

🧩 Step 2: Add an Embed Element in Wix

• In the Wix Editor, click Add Elements → Embed Code.

• Choose Embed HTML (or sometimes called "Custom HTML/iFrame").

• Drag the element onto the page where you want the widget to appear.

---

✏️ Step 3: Insert the Code Snippet

• Click the embedded box on your page.

• In the settings panel, select Enter Code.

• Paste the Agent Supply embed snippet into the HTML field, then click Apply.

---

📏 Step 4: Adjust Sizing & Responsiveness

• By default, Wix uses static pixel dimensions.

• Replace width="560"/height="315" with width="100%" and height="100%" in the <iframe> or container so the widget adapts fluidly across screen sizes.

---

✅ Step 5: Preview & Publish

• Use the Wix preview mode to check positioning and widget behavior.

• Once satisfied, Publish your site.

• Visitors will now see and can interact with the Agent Supply chat widget.

---

🔧 Notes & Troubleshooting

• Ensure the embed code uses HTTPS, as Wix enforces SSL for embeds.

• If the widget doesn't show:

  • Confirm the script isn’t blocked by browser extensions.

  • Check for JavaScript errors via browser console.

• Some users note that embed elements sometimes need to be added either via the standard editor or via Advanced Settings → Custom Code for site-wide or footer placement.

---

Summary Table

Task	Action
Grab embed code	From Agent Supply dashboard → Integrations
Insert embed on Wix	Add → Embed Code → HTML → paste snippet
Make it responsive	Set width/height to 100%
Check & publish	Preview then go live