Add an AI Chatbot to Custom HTML, React & Next.js

Built your site by hand or with a JavaScript framework? The chatbot is a single deferred script tag. Here’s how to add it to plain HTML, React (Vite/CRA) and Next.js.

Before you start

• You need: Access to your site’s code or a developer who can deploy a one-line change.
• Time: about 2–5 minutes
• Your snippet: included in your setup email from StartupLime (it contains your unique bot ID)

<script src="https://chat.startuplime.com/widget.js" data-bot="YOUR-BOT-ID" defer></script>

Your setup email contains the snippet with your real bot ID. Prefer not to touch code? We install it for free.

How to add the chatbot to Custom HTML

1. Plain HTML or PHP: paste the snippet just before </body> in your shared footer or every page template.
2. React (Vite or Create React App): paste it before </body> in index.html (Vite) or public/index.html (CRA).
3. Next.js (App Router): in app/layout.tsx add <Script src="…" data-bot="…" strategy="lazyOnload" /> from next/script inside <body>.
4. Static site generators (Hugo, Jekyll, Astro, Eleventy): add it to your base layout before </body>.
5. Deploy, then test on the live site.

Tips for Custom HTML

• Single-page apps: the widget persists across client-side route changes; no re-initialization needed.
• Content Security Policy: allow the chatbot’s script and API domains (we send the exact list).
• Use a data-chat-open attribute on any element to open the chat from your own buttons.

Custom HTML chatbot FAQ