Qurius AI
All posts

How to Add an AI Chatbot to Your Website (WordPress, Webflow, Wix, or Any Site)

Adding an AI chatbot to your website used to mean building decision trees or hiring a developer. Today, most AI support assistants install with a single snippet of code, and they answer from your own content instead of scripted replies.

This guide walks through the whole process: preparing your content, getting your snippet, and installing it on the most popular website platforms.

Before you start: what your chatbot needs to know

An AI chatbot is only as good as the content it learns from. Before installing anything, gather:

  • Your most common customer questions and their answers (your FAQ).
  • Your docs or help articles, if you have them.
  • Your website, so it can learn about your product, pricing, and features.

With Qurius AI, you add this in your dashboard: write FAQs, start from an industry template or let it crawl your website on any plan, and upload documents on paid plans. Growth and Pro also re-crawl your site automatically so answers stay current.

Step 1: Create your assistant and test it

Want to see it on your own site first? Enter your website and Qurius builds a preview assistant from your pages in about a minute, no signup needed. When you're ready:

  1. Sign up for free and enter your company details.
  2. Add your knowledge (FAQs, documents, or your website).
  3. Open Test it live in your dashboard and ask the questions your customers ask most.

Testing first matters. If an answer is wrong or missing, fix the content now, before customers see it.

Step 2: Copy your snippet

In your dashboard, open Install on your website and copy your snippet. It looks like this, with your own company ID and key filled in:

<script
  src="https://qurius.app/widget-iframe-embed.js"
  data-id="YOUR_COMPANY_ID"
  data-key="YOUR_WIDGET_KEY"
  data-plan="starter"
  data-theme="dark"
  data-primary-color="#3B82F6"
></script>

You can change data-theme (light or dark) and data-primary-color to match your brand.

Security tip: your widget key is visible in your page source, which is expected. On paid plans, add your site's domain to the allowed domains list in your widget settings so the widget only works on your website.

Step 3: Install it on your platform

Paste the snippet just before the closing </body> tag of your site, or in your platform's "footer code" setting. Here's where to find that on popular platforms.

WordPress

The easiest way is a header and footer code plugin:

  1. In your WordPress admin, go to Plugins → Add New and install a header/footer code plugin (for example, WPCode).
  2. Open the plugin's settings and paste your snippet into the Footer section.
  3. Save, then visit your site to see the chat button.

If you're comfortable editing your theme, you can also paste the snippet into your theme's footer.php just before </body>. Use a child theme so updates don't remove it.

Webflow

  1. Open your project and go to Site settings → Custom code.
  2. Paste the snippet into the Footer code box.
  3. Save and publish your site. Custom code only runs on the published site, not inside the Designer.

Note: Webflow requires a paid site plan for custom code.

Wix

  1. In your Wix dashboard, go to Settings → Custom code (under Advanced).
  2. Click Add custom code, paste the snippet, and choose to add it to all pages.
  3. Set the placement to Body - end and apply.

Note: Wix requires a premium plan and a connected domain for custom code.

Framer

  1. Open Site settings → General → Custom code.
  2. Paste the snippet into End of <body> tag.
  3. Publish your site.

Plain HTML, React, Next.js, or Vue

Paste the snippet before </body> in your main HTML file. In single-page apps (React, Vue, Next.js), add it once to your root layout or index.html rather than on individual pages, so it persists as visitors navigate.

Step 4: Check it works

  1. Open your website in a private browser window.
  2. Click the chat button and ask a real customer question.
  3. Try asking for a person to make sure the handoff works and you receive the email alert.

If the chat button doesn't appear, check that you published the site after adding the code, and, if you've set allowed domains, that your site's domain is on the list.

Step 5: Improve it every week

Once it's live, your dashboard on paid plans shows what customers ask, which answers they rated, and the questions your assistant couldn't answer. Each week, add answers for the top gaps. Within a few weeks, your assistant will handle most repetitive questions on its own.

Frequently asked questions

Do I need to know how to code? No. If you can paste text into a settings box, you can install it.

Will it slow down my website? The widget loads in a lightweight iframe, separately from your page content.

What happens when it can't answer? Customers can always choose to talk to a person. They leave their contact details and your team gets an email alert with the conversation.

Is there a free plan? Yes. The free plan includes 50 messages a month and a 10-page import of your website, so you can try it on your real site before upgrading.

Ready to try it? Start free, or see the live demo first.

Read next