How to add an AI chatbot to your website (any platform, step by step)

Adding an AI chatbot to a website has two parts: building the assistant, and placing it on the site. With Nexoply the first part happens in the Nexoply dashboard, without code and without an AI key, because Nexoply runs the AI. The second part is one line of code. You need:

• A Nexoply account. Sign up free: the Free plan includes 50 conversations a month, with no card needed. Paid plans start at $19 a month on the pricing page.
• Access to the place where your site accepts custom code: a footer code setting in your site builder, your theme's files, or your HTML templates. On hosted builders, check that your plan allows custom code.
• About five minutes, plus the time to review your business information.

An AI chatbot for a small business website is only as useful as what it knows. In Nexoply you give it your services and prices, FAQs, policies, opening hours and service areas. The quickest way is the website import: enter your site's address and Nexoply reads your public pages (Free 15, Starter 40, Business 100, Pro 200 per scan), including pages built with JavaScript, then suggests services with prices, FAQs, policies, hours and contact details. You review the suggestions; nothing is added until you approve it.

From then on the assistant answers only from that information. It's instructed to say when it doesn't know instead of guessing, and every conversation is in your dashboard to review. Visitors can write in any of 12 languages and get answers in theirs. Nexoply is not a live-chat inbox for human agents, and it doesn't take bookings or payments itself; its buttons can send visitors to your booking page, phone or WhatsApp. See how Nexoply works for the full picture.

Open the Chatbot page in your dashboard (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; it only tells the widget which business it belongs to. To see the assistant before changing your site, click Open a test page with your chatbot.

On a site you edit as HTML files, paste the code on its own line just above the closing </body> tag:

    <!-- …your page content… -->
    <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
  </body>
</html>

1. 1

   Find your shared footer

   If your pages share a footer template or include (common on PHP sites and static site generators), paste the code there once. Otherwise, paste it into each page where the chat button should appear.

2. 2

   Paste once per page

   One copy per page is enough. The script loads asynchronously, so placing it at the end of the page lets your content appear first.

3. 3

   Upload or deploy

   Save the files and upload or deploy them the way you usually update your site.

Site builders and frameworks each have one place for site-wide code. Paste the same line there; the platform guides walk through each one step by step.

• No npm package needed. The widget is always the same script tag. It also works when the tag is added from code, as long as it keeps the data-chatbot attribute and a src containing widget.js.
• Single-page apps. It mounts once on the page, outside your app's root element, keeps the conversation while visitors navigate, and re-checks page rules when the URL changes. Loading it twice is harmless.
• Server-side rendering. It only runs in the browser and doesn't touch your framework's markup, so there are no hydration issues.
• Content-Security-Policy. If your site sends one, allow https://nexoply.com in script-src, connect-src and img-src.
• Testing locally. If you fill in Only allow on these websites, add your local development host with its port (for example localhost:3000), or leave the list empty while testing.

Open your live site in a new private window. A chat button appears in the bottom corner. Ask a real question, such as "Do you do emergency call-outs on weekends?" or "Which areas do you cover?" (more examples in the AI chatbot guide for plumbers). Within seconds the conversation shows up under Conversations in your Nexoply dashboard. From then on, changes you make in the dashboard reach your site within about a minute, without editing the code again.

• Code not live yet. Make sure the change is saved and published or deployed, then reload the live site in a private window. Editor previews in site builders don't always run custom code.
• Code changed or incomplete. Check that the line is complete, from <script to </script>, with data-chatbot and your key unchanged.
• Custom code not allowed. On hosted builders, custom code can depend on your plan (for example Wix needs a premium plan with a connected domain, and Squarespace the Business plan or higher).
• Allowed domains. If you set Only allow on these websites on the Chatbot page, make sure every address of your site is listed exactly (for example mybusiness.com, or *.mybusiness.com for subdomains).
• Content-Security-Policy. A strict policy blocks the script until https://nexoply.com is allowed 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, never in your site's code. Under Chatbot → Customize you can choose the message button's icon (or your own image or SVG), 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 or hide the button on chosen pages (for example /services/*). Match the chat window to your fonts and colours, add your logo, or start from a ready-made template. A start screen can show your own buttons, such as Book, Call or WhatsApp. The widget uses a Shadow DOM, so your site's CSS doesn't affect it.

Then review conversations regularly: questions the assistant couldn't answer are listed and can become FAQs in one click, and insights show topics, busiest times and the pages where the chat was opened. For the full list of options, see the chatbot features; to compare tools first, read the best AI chatbots for small business.