Website Integration

Add CrispChat to any website with a simple script tag. Works with HTML, React, Vue, Angular, and any other web framework.

Basic Installation

Add the following script tag just before the closing </body> tag:

<script src="https://www.crispchat.app/chatbot-embed.js?id=YOUR_SITE_ID"></script>

Replace YOUR_SITE_ID with your actual Site ID from your dashboard.

React / Next.js

For React applications, you can add the script using a useEffect hook or in your HTML template.

Option 1: Script Component (Next.js)

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://www.crispchat.app/chatbot-embed.js?id=YOUR_SITE_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Option 2: useEffect Hook

import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://www.crispchat.app/chatbot-embed.js?id=YOUR_SITE_ID';
    script.async = true;
    document.body.appendChild(script);

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

  return <div>Your App</div>;
}

Vue.js

Add the script in your main App.vue or index.html file:

<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://www.crispchat.app/chatbot-embed.js?id=YOUR_SITE_ID';
    script.async = true;
    document.body.appendChild(script);
  }
}
</script>

Single Page Applications (SPA)

For SPAs, load the script once when your application mounts. The chat widget will persist across route changes automatically.

Note

The CrispChat widget is designed to work seamlessly with client-side routing. You only need to load the script once - it will automatically track page changes.

Verify Installation

After adding the script, verify the installation:

Open your website in a browser
Look for the chat widget button (usually in the bottom-right corner)
Click the button to open the chat window
Send a test message
Check your CrispChat dashboard to see the message

Success!

If you see the chat widget and your test message appears in the dashboard, the integration is complete.