How to add an AI chatbot to Webflow (in 5 minutes)

Nexoply is an AI assistant you build in its own dashboard and add to a Webflow site with one script tag. Webflow only holds that line; the assistant's knowledge, look and behaviour are managed in Nexoply, without code and without an AI key, because Nexoply runs the AI. In practice:

• It knows the business. Add services and prices, FAQs, policies, opening hours and service areas, or import them from the Webflow site's public pages (15 per scan on the Free plan). Nothing is added until you approve it.
• It answers only from that information. It's instructed to say when it doesn't know instead of guessing, and every conversation is in the dashboard to review.
• It fits the design. Message button or side tab, colours, fonts and logo, ready-made templates, a separate look on phones, page rules for chosen pages, and start-screen buttons such as Book, Call or WhatsApp.
• It answers in 12 languages. Visitors who write in another supported language get answers in that language.
• What it isn't. It's not a live-chat inbox for human agents, and it doesn't take bookings or payments itself; its buttons send visitors to a booking page, phone or WhatsApp.

The Free plan includes 50 conversations a month; paid plans start at $19 a month on the pricing page. Building Webflow sites for clients? Each business has its own Nexoply account and one chatbot, so set it up with the client's own information. For the full list of options, see the chatbot features.

Check these three things first:

• A Nexoply account. Sign up free: the Free plan includes 50 conversations a month, with no card needed.
• The business information in Nexoply: services and prices, FAQs, policies, opening hours and service areas. The quickest way is to enter the Webflow site's address and let Nexoply import its public pages, including pages built with JavaScript. You review the suggestions; nothing is added until you approve it.
• Access to the Webflow project's settings, and a plan that allows custom code. If the Custom code settings aren't available to you, check your plan or ask the site's owner.

In your Nexoply dashboard, open the Chatbot page (click Create chatbot if you haven't yet) and copy the installation code. It looks like this:

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

YOUR-KEY is replaced by your chatbot's own key, which the Chatbot page fills in for you. The key is public: it isn't a password and gives no access to your account. Want to see the assistant before touching Webflow? Click Open a test page with your chatbot to try it on a sample page.

1. 1

   Open Project settings

   In Webflow, open the project's Project settings.

2. 2

   Go to Custom code

   Open the Custom code section. Code here is site-wide, so it runs on every page of the project.

3. 3

   Paste into Footer code

   Paste your Nexoply code into Footer code. Footer code is placed just before the end of each page, which is where the script belongs.

4. 4

   Save

   Save the changes in Project settings.

5. 5

   Publish

   Publish the site. Custom code is only added to the published site, so this step is what makes the chat button appear.

Open the published site in a new private window, so you see it the way a visitor does. A chat button appears in the bottom corner. Ask a real question, such as "Do you take new patients?" or "What should I bring to my first appointment?" (more examples in the AI chatbot guide for clinics). Within seconds the conversation shows up under Conversations in your Nexoply dashboard. From then on, changes you make in the dashboard reach the site within about a minute, with no need to publish again in Webflow.

• Not published. Saving Project settings isn't enough: publish the site, then reload it.
• Checking in the Designer. Check the published site in a private window, not the Designer.
• Wrong field or incomplete code. Open Custom code again and check that the code sits in Footer code, complete and unchanged, from <script to </script>.
• Plan or permissions. If you can't save custom code, check that your Webflow plan allows it, or that your role in the project lets you edit Project settings.
• Allowed domains. If you set Only allow on these websites on the Chatbot page, list every address the site is published to (for example myclinic.com, or *.myclinic.com for subdomains).
• Content-Security-Policy. If the site sends a Content-Security-Policy, allow https://nexoply.com in script-src, connect-src and img-src.
• Chatbot switched off, or ad blockers. Check that the Chatbot enabled switch is on. Rarely, a browser extension blocks chat widgets; try another browser.

The design is set in your Nexoply dashboard, not in Webflow. Under Chatbot → Customize you can choose the message button's icon (your own image, or pasted SVG code), text label, shape, size, colours, border, shadow and position, or use a side tab on the edge of the screen (such as "Help") instead. You can set a different look on phones, and use page rules to change it on chosen pages (for example /services/*). Match the chat window to the site's fonts and colours, add a logo, or start from a ready-made template. A start screen can show your own buttons, such as Book, Call or WhatsApp.

To open the chat from one of your own Webflow buttons, a short script can call window.dispatchEvent(new Event("nexoply:open-chat")); to open it as soon as the page loads, add data-open="true" to the script tag. Then review conversations regularly: questions the assistant couldn't answer are listed and can become FAQs in one click. Read how Nexoply works for the full picture, or see how to add an AI chatbot to any website for other platforms.