How to Add an AI Chatbot to Your Website in 60 Seconds (WordPress, Shopify, Squarespace, Wix)

You have decided to add an AI chatbot to your website. Great decision. The problem is that most chatbot platforms make installation feel like a software engineering project — embed codes, API keys, JavaScript snippets, configuration files, and a 45-minute setup process that requires your web developer.

With FrontlineHQ, it takes 60 seconds and one line of code. No developer needed. No plugins to install. No configuration files to edit.

Here is exactly how to do it on every major website platform.

Before You Start: Get Your Embed Code

First, sign up at frontlinehq.ai and create your chatbot. The setup wizard walks you through three steps:

1. 1.Enter your website URL — our AI scrapes your site and learns your business automatically.
2. 2.Review the knowledge base — add any FAQs or details the scraper missed.
3. 3.Copy your embed code.

Your embed code looks like this:

```html <script src="https://frontlinehq.ai/api/widget/YOUR-BUSINESS-ID" defer></script> ```

That is it. One line. Now let us put it on your website.

WordPress

WordPress is the most common platform for local businesses, powering over 40% of all websites. Here is how to add the chatbot:

Option 1: Using the Theme Editor (fastest)

1. 1.Log in to your WordPress admin panel (yourdomain.com/wp-admin).
2. 2.Go to Appearance then Theme File Editor (or Theme Editor in older versions).
3. 3.In the right sidebar, find and click footer.php (or theme-footer if using a block theme).
4. 4.Paste your embed code just above the closing body tag.
5. 5.Click Update File.
6. 6.Visit your website — the chat bubble should appear in the bottom-right corner.

Option 2: Using a Plugin (no code editing)

If you are not comfortable editing theme files:

1. 1.Install the Insert Headers and Footers plugin (by WPCode) — it is free.
2. 2.Go to Code Snippets then Header & Footer.
3. 3.Paste your embed code in the Footer section.
4. 4.Click Save Changes.

Option 3: Using Elementor, Divi, or other page builders

1. 1.Add an HTML widget or module to your footer template.
2. 2.Paste the embed code.
3. 3.Save and publish.

The chatbot will now appear on every page of your WordPress site.

Shopify

Shopify stores can add the chatbot in under a minute:

1. 1.Log in to your Shopify admin (yourstore.myshopify.com/admin).
2. 2.Go to Online Store then Themes.
3. 3.Click Actions (or the three dots) then Edit code.
4. 4.In the left sidebar, find Layout and click theme.liquid.
5. 5.Scroll to the bottom and find the closing body tag.
6. 6.Paste your embed code just above it.
7. 7.Click Save.

That is it. The chatbot will appear on every page of your Shopify store — product pages, collections, the homepage, and even the cart page.

Why this matters for e-commerce: Shopify stores see an average of 2 to 3% conversion rate. A chatbot that answers product questions in real time can increase that to 4 to 5% — because visitors who engage with a chatbot are 2.8 times more likely to purchase.

Squarespace

Squarespace makes it easy with their built-in code injection feature:

1. 1.Log in to your Squarespace account.
2. 2.Go to Settings then Advanced then Code Injection.
3. 3.In the Footer field, paste your embed code.
4. 4.Click Save.

Done. The chatbot appears on every page. No plugins, no theme editing, no developer needed.

Note: Code Injection is available on Squarespace Business and Commerce plans. If you are on a Personal plan, you will need to upgrade — but if you are adding a chatbot, you are likely already on a Business plan.

Wix

Wix requires a slightly different approach, but it is still simple:

1. 1.Log in to your Wix dashboard.
2. 2.Go to Settings then Custom Code (under Advanced).
3. 3.Click Add Custom Code.
4. 4.Paste your embed code.
5. 5.Set the placement to Body - End.
6. 6.Set it to load on All pages.
7. 7.Click Apply.

The chatbot will appear across your entire Wix site.

Alternative method using Wix Editor:

1. 1.Open the Wix Editor for your site.
2. 2.Click Add (the plus icon) then Embed Code then Custom Element or HTML iframe.
3. 3.Paste the embed code.
4. 4.Position it where you want (though the chatbot auto-positions to the bottom-right regardless).
5. 5.Publish.

Custom HTML / Any Other Platform

If your website runs on a custom CMS, static HTML, Next.js, React, Vue, or literally anything else — the process is the same:

1. 1.Open your main HTML template or layout file.
2. 2.Find the closing body tag.
3. 3.Paste the embed code just above it.
4. 4.Save and deploy.

The FrontlineHQ widget is a single JavaScript file that creates its own container using Shadow DOM. It does not conflict with your existing CSS or JavaScript. It does not require jQuery, React, or any framework. It works on any website that can run JavaScript — which is every website.

Verifying the Installation

After adding the code, verify it is working:

1. 1.Visit your website in a browser (use an incognito window to avoid caching).
2. 2.Look for the chat bubble in the bottom-right corner. It should appear within 1 to 2 seconds of page load.
3. 3.Click the bubble and send a test message.
4. 4.Check your dashboard at frontlinehq.ai/dashboard — the test conversation should appear in your conversations tab.

If the bubble does not appear:

• •Check the browser console (right-click, Inspect, Console tab) for any JavaScript errors.
• •Verify the business ID in your embed code matches your dashboard.
• •Clear your browser cache and try again.
• •Check if an ad blocker is interfering — some ad blockers block third-party scripts.

Common Questions

Does it slow down my website?

No. The script uses the defer attribute, which means it loads after your page content. It does not block rendering. The total script size is under 15KB — smaller than most images on your site.

Will it conflict with my existing chat or pop-up tools?

No. The FrontlineHQ widget runs inside a Shadow DOM, which means its CSS and JavaScript are completely isolated from your website. It will not affect your existing tools, and they will not affect it.

Can I customize the position and colors?

Yes. From your FrontlineHQ dashboard, you can change the accent color, initial greeting message, and position. These changes apply automatically — no code changes needed on your website.

Does it work on mobile?

Yes. The widget is fully responsive and designed mobile-first. On phones, it opens as a full-screen chat overlay for the best experience.

Can I add it to only certain pages?

Yes. Instead of adding the code to your global footer, add it only to the specific pages where you want the chatbot to appear. For WordPress, you can use conditional logic in your theme or a plugin like WPCode to load scripts on specific pages.

Next Steps

Once your chatbot is live, there are a few things you should do:

1. 1.Test it thoroughly. Ask it the questions your customers ask. Make sure the answers are accurate.
2. 2.Add custom Q&A. If the chatbot gets something wrong or does not know an answer, add it to your knowledge base in the FrontlineHQ dashboard.
3. 3.Check leads daily. Every lead captured by the chatbot appears in your dashboard. Follow up quickly — speed to response is everything.
4. 4.Review conversations weekly. See what customers are asking. This is free market research. If the same question comes up repeatedly, add it to your website FAQ and your chatbot knowledge base.

Your AI chatbot is now live and working 24/7. It answers questions, captures leads, and engages visitors while you focus on running your business.

Get started free at frontlinehq.ai — setup takes less than 5 minutes.

Frequently Asked Questions