Embed a Chatbot on Your Website (Step-by-Step)

How to Embed Chatnest on Your Website

Add an AI chatbot to your website in under 5 minutes. Works on any platform—no coding required.

Quick Start

Get your embed code from your Chatnest dashboard → Deploy → Public Access, then paste it before your closing </body> tag:

<script src="https://chatnest.co/widget.js"
  data-bot-id="YOUR_BOT_ID"
  data-public-key="YOUR_PUBLIC_KEY">
</script>

That's it! Your chatbot bubble will appear on every page.

Platform Guides

WordPress

Option 1: Plugin (Easiest)

Install "Insert Headers and Footers" (free)
Settings → Insert Headers and Footers → "Scripts in Footer"
Paste embed code → Save

Option 2: Theme Editor

Appearance → Theme Editor → footer.php
Paste code before </body> → Update File

Shopify

Online Store → Themes → Actions → Edit Code
Open theme.liquid (Layout folder)
Paste code before </body> → Save

Wix

Settings → Custom Code → "+ Add Custom Code"
Name: "Chatnest Widget"
Paste code → Choose "Body - end" → "All pages" → Publish

Squarespace

Settings → Advanced → Code Injection
Paste in "Footer" section → Save → Publish

Note: Requires Business plan or higher

Webflow

Project Settings → Custom Code tab
Paste in "Footer Code" → Publish

JavaScript Frameworks

React / Next.js

'use client'; // Next.js 13+ only
import { useEffect } from 'react';

export default function ChatNestWidget({ botId, publicKey }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://chatnest.co/widget.js';
    script.setAttribute('data-bot-id', botId);
    script.setAttribute('data-public-key', publicKey);
    document.body.appendChild(script);

    return () => {
      if (document.body.contains(script)) {
        document.body.removeChild(script);
      }
    };
  }, [botId, publicKey]);

  return null;
}

Add to layout:

import ChatNestWidget from '@/components/ChatNestWidget';

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <ChatNestWidget
          botId="your-bot-id"
          publicKey="your-public-key"
        />
      </body>
    </html>
  );
}

Vue.js 3

<script setup>
import { onMounted, onUnmounted } from 'vue';

const props = defineProps(['botId', 'publicKey']);
let script = null;

onMounted(() => {
  script = document.createElement('script');
  script.src = 'https://chatnest.co/widget.js';
  script.setAttribute('data-bot-id', props.botId);
  script.setAttribute('data-public-key', props.publicKey);
  document.body.appendChild(script);
});

onUnmounted(() => {
  if (script && document.body.contains(script)) {
    document.body.removeChild(script);
  }
});
</script>

Troubleshooting

Widget Not Showing?

Check Bot ID and Public Key match your dashboard
Open browser console (F12) for errors
Disable ad blockers temporarily
Verify code is before </body>

Want to Control Pages?

Load conditionally with JavaScript:

// Skip checkout page
if (!window.location.pathname.includes('/checkout')) {
  const script = document.createElement('script');
  script.src = 'https://chatnest.co/widget.js';
  script.setAttribute('data-bot-id', 'YOUR_BOT_ID');
  script.setAttribute('data-public-key', 'YOUR_PUBLIC_KEY');
  document.body.appendChild(script);
}

CSP Errors?

Add to Content-Security-Policy:

script-src https://chatnest.co;
connect-src https://api.chatnest.co;

Testing Checklist

After installing:

Widget bubble appears in bottom-right (default)
Clicking opens chat window
Bot responds to test messages
Works on mobile
Tested in Chrome, Safari, Firefox

Get Started

Create your free account → Build a bot → Deploy → Copy embed code → Paste on your site

Setup time: 5 minutes

Updated December 2025