Installation Guide

Add your chatbot in 2 minutes

Paste two lines of code on your website. Works on any platform — no developer needed.

Zero dependencies Loads asynchronously Works on any framework Shadow DOM isolated
1

Create & train your chatbot

Sign up for LeadGPTApp, create a chatbot, and train it on your website URLs or documents. Your Chatbot ID (called a slug) is shown in the Embed tab of your chatbot.

Open Dashboard
2

Copy your embed snippet

Replace YOUR_CHATBOT_ID with the slug shown in your dashboard's Embed tab. Then copy the snippet below.

<!-- LeadGPTApp Chat Widget -->
<script>
  window.LeadGPT = { chatbotId: "YOUR_CHATBOT_ID" };
</script>
<script src="https://cdn.leadgptapp.com/widget.js" async></script>

The first script sets your chatbot ID before the widget loads. Both tags are required and must appear in this order.

3

Paste it on your website

The snippet works on any website — React, Next.js, Vue, plain HTML, or a hosted builder. Choose your platform for exact step-by-step instructions.

Any website or framework — React, Next.js, Vue, plain HTML, and more

  1. 1

    Open your global layout or template file

    Look for the file that wraps every page: index.html, _layout.html, app.html, or the root layout in Next.js / Nuxt / SvelteKit / Remix.

  2. 2

    Find the closing </body> tag

    It's usually near the very bottom of the file.

  3. 3

    Paste the two-line snippet just before </body>

    Both script tags are required and must stay in this order. The first sets your chatbot ID; the second loads the widget script.

  4. 4

    Save and deploy

    Publish your changes. Refresh your live site — the chat icon appears in the bottom-right corner of every page.

4

Verify it's working

Open your website and check these three things:

💬

Chat icon visible

A floating button appears in the bottom-right corner.

🤖

Bot responds

Click it and send a message — the bot answers from your content.

📋

Leads captured

Conversations and captured contacts appear in the Leads tab.

Frequently asked questions

Do I need a developer to install this?

No. If you can edit your website's HTML, you can install the widget. The entire installation is copy-paste.

Will the widget slow down my website?

No. The second script tag uses the async attribute, which means it loads in the background without blocking your page rendering.

Can I add it to multiple pages?

Yes — and you should. Paste the snippet in your site's global layout or footer template so it appears on every page automatically.

What is the chatbotId / slug?

It's a short URL-friendly identifier for your chatbot (e.g. my-store-support). You'll find it in the Embed tab of your chatbot dashboard.

The widget isn't appearing — what's wrong?

Check that: (1) both script tags are present and in order, (2) your chatbot is set to Active in the Setup tab, and (3) you've added at least one training source.

Can I change the widget's color and position?

Yes. Go to Setup → Appearance in your dashboard to customise the accent colour, launcher size, position (left or right), and logo.

Ready to get started?

Create your first chatbot for free. No credit card required.

Get started free