How to Add a Crisp Chatbot Plugin to Your Vercel Website

By Ari Nakos • 2025-03-07

In this tutorial, we will add for FREE Crisp's Chatbot plugin to my NextJS app RealReview.Space within 5 minutes in a 4 step process via crisp.chat.

Quick Overview of the Process

  1. Sign up for a Crisp account
  2. Get the Crisp ID for our website
  3. Add it in the Client Layout of our app
  4. Deploy the changes

After that, we'll add AI capabilities by adding our own knowledge base (KB) in 3 steps:

  1. Create a chatbot scenario
  2. Add a website in the knowledge base (KB)
  3. Launch the chatbot scenario

Adding a customer support chatbot to your website is one of the most effective ways to engage visitors, answer questions in real-time, and convert prospects into customers. According to Drift's State of Conversational Marketing, implementing a chatbot can increase conversion rates by up to 45%. Among the many chat solutions available, Crisp stands out for its ease of use, powerful features, and developer-friendly integration options. In this guide, we'll walk through the process of adding Crisp to your Next.js application deployed on Vercel.

Why Choose Crisp for Your Vercel Website?

Before diving into the implementation details, let's explore why Crisp is an excellent choice for Next.js applications:

  1. Lightweight Integration: Crisp's script adds minimal overhead to your application
  2. Extensive Customization: Easy to match your brand's look and feel
  3. Powerful Chatbot Capabilities: Build automated conversations without coding
  4. Multi-platform Support: Engage with visitors via mobile apps, email, or social media
  5. Developer-Friendly API: Extend functionality with custom integrations

Prerequisites

Before we begin, make sure you have:

Step 1: Create a Crisp Account and Get Your Website ID

  1. Sign up for a Crisp account at crisp.chat
  2. After logging in, navigate to Settings → Website Settings
  3. Add your website if you haven't already
  4. Find your Website ID, which looks something like 7598bf86-9ebb-46bc-8d61-e73938d38fba

This unique identifier connects your website to your Crisp dashboard.

Step 2: Basic Integration with Next.js

There are several approaches to integrating Crisp with your Next.js application. We'll cover the most common methods, starting with the simplest.

Here's the only technical step you need to implement in your Next.js app:

Method 1: Using a Script Tag in _document.js

This is the most straightforward approach and works well for most applications, as recommended in the Next.js documentation for custom scripts:

  1. Create or modify your _document.js file in the pages directory (or _document.tsx if using TypeScript):
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        {/* Other head elements */}
      </Head>
      <body>
        <Main />
        <NextScript />
        <script
          type="text/javascript"
          dangerouslySetInnerHTML={{
            __html: `
              window.$crisp=[];
              window.CRISP_WEBSITE_ID="YOUR_WEBSITE_ID";
              (function(){
                const d=document;
                const s=d.createElement("script");
                s.src="https://client.crisp.chat/l.js";
                s.async=1;
                d.getElementsByTagName("head")[0].appendChild(s);
              })();
            `
          }}
        />
      </body>
    </Html>
  )
}

Replace YOUR_WEBSITE_ID with the Website ID you obtained in Step 1.

Method 2: Using a Custom React Component

For more control over when and how Crisp loads, create a dedicated component. This is the approach I used in my demo:

jsx
const ClientLayout = ({ children }: { children: ReactNode }) => {
  useEffect(() => {Crisp.configure("3ff1f4ab-6d86-4f15-9685-fe9a4b473eee")}, []);

  return (
    <div className="min-h-screen flex flex-col">
      {/* Content inside app/page.js files  */}
      <main className="flex-1 container mx-auto px-4 py-8">
        {children}
      </main>
      
      {/* Show tooltips if any JSX elements has these 2 attributes: data-tooltip-id="tooltip" data-tooltip-content="" */}
      <Tooltip
        id="tooltip"
        className="z-[60] !opacity-100 max-w-sm shadow-lg"
      />
    </div>
  );
};

This simplified version shows just the essential parts needed for the Crisp integration. In your actual implementation, you would replace the Crisp ID with your own.

Step 3: Deploy Your Changes

After implementing the Crisp integration in your Next.js application, it's time to deploy your changes:

  1. Commit your changes to your repository
  2. Push to your Vercel-connected repository or run vercel deploy
  3. Wait for the deployment to complete
  4. Visit your deployed site to verify the chat widget appears correctly

Step 4: Customizing Your Crisp Chat Experience

Once the basic integration is complete, you can customize the chat widget to match your brand and requirements.

Adding AI Capabilities with Knowledge Base

One of the most powerful features of Crisp is the ability to add AI capabilities to your chatbot by creating a knowledge base:

Crisp AI Knowledge Base Setup

The process is straightforward:

  1. Create a chatbot scenario in the Crisp dashboard
  2. Add your website to the knowledge base
  3. Launch the chatbot scenario

This allows your chatbot to automatically answer questions based on the content of your website, providing a much better user experience.

Real Conversations with Your AI Chatbot

Here's an example of a conversation with the AI-powered chatbot:

Crisp Inbox Conversation

The AI can understand user questions and provide relevant answers based on your website content, making it a powerful tool for customer support.

Setting Chat Colors and Appearance

Add this code to your Crisp component to customize the appearance:

jsx
useEffect(() => {
  // Initialize Crisp
  window.$crisp = [];
  window.CRISP_WEBSITE_ID = "YOUR_WEBSITE_ID";
  
  // Load Crisp script
  (function() {
    const d = document;
    const s = d.createElement("script");
    s.src = "https://client.crisp.chat/l.js";
    s.async = 1;
    d.getElementsByTagName("head")[0].appendChild(s);
  })();
  
  // Customize appearance after Crisp is loaded
  window.$crisp.push(["set", "session:data", [
    [["website_color", "#d2b48c"]], // Use your brand color here from the brand guide
  ]]);
  
  // Set chat box position (right or left)
  window.$crisp.push(["set", "position:reverse", true]); // true for left, false for right
  
}, []);

Passing User Information

When a user is authenticated, you can pass their information to Crisp:

jsx
// Inside your Crisp component
useEffect(() => {
  // ... Crisp initialization code ...
  
  // Set user information if available
  if (user) {
    window.$crisp.push(["set", "user:email", user.email]);
    window.$crisp.push(["set", "user:nickname", user.name]);
  }
}, [user]); // Add user as a dependency

Controlling Chat Visibility

You might want to show the chat only on certain pages:

jsx
// Show chat
window.$crisp.push(["do", "chat:show"]);

// Hide chat
window.$crisp.push(["do", "chat:hide"]);

Step 5: Implementing Advanced Features

Setting Up Chat Events

You can listen for chat events and respond to them:

jsx
window.$crisp.push(["on", "message:received", function(message) {
  console.log("New message from operator:", message);
  // Track event in analytics, etc.
}]);

window.$crisp.push(["on", "chat:opened", function() {
  console.log("Chat window opened");
  // Track event in analytics, etc.
}]);

Creating Custom Actions

You can trigger custom actions from your application:

jsx
// Open the chat window programmatically
function openChat() {
  window.$crisp.push(["do", "chat:open"]);
}

// Send a message programmatically
function sendWelcomeMessage() {
  window.$crisp.push(["do", "message:send", ["text", "Hello! How can I help you today?"]]);
}

Step 6: Testing and Deploying to Vercel

  1. Test your integration locally by running your Next.js application
  2. Make sure the chat widget appears and functions correctly
  3. Deploy your application to Vercel using your preferred method:
bash
# Using Vercel CLI
vercel

# Or for production deployment
vercel --prod
  1. After deployment, verify that the chat widget works correctly on your live site

Troubleshooting Common Issues

Chat Widget Not Appearing

If the chat widget doesn't appear:

  1. Check browser console for errors
  2. Verify that your Website ID is correct
  3. Ensure the Crisp script is loading (check Network tab in DevTools)
  4. Make sure you haven't accidentally hidden the chat widget

Script Loading Multiple Times

If you notice the Crisp script loading multiple times:

  1. Make sure you're only including the Crisp component once in your application
  2. Add a check to prevent multiple initializations:
jsx
if (!window.$crisp) {
  window.$crisp = [];
  window.CRISP_WEBSITE_ID = "YOUR_WEBSITE_ID";
  // Rest of initialization code
}

Issues with TypeScript

If you're using TypeScript and getting errors about the $crisp property not existing on window:

  1. Create a declaration file (e.g., crisp.d.ts) in your project:
typescript
interface Window {
  $crisp: any[];
  CRISP_WEBSITE_ID: string;
}
  1. Reference this file in your tsconfig.json or import it where needed

Performance Considerations

To ensure the Crisp integration doesn't impact your website's performance:

  1. Lazy Loading: Consider loading Crisp only after the page has fully loaded:
jsx
useEffect(() => {
  // Wait for page to load completely
  if (document.readyState === 'complete') {
    initCrisp();
  } else {
    window.addEventListener('load', initCrisp);
    return () => window.removeEventListener('load', initCrisp);
  }
  
  function initCrisp() {
    // Crisp initialization code
  }
}, []);
  1. Route-Based Loading: Load Crisp only on pages where customer support is most needed:
jsx
// In your page component
import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function Layout({ children }) {
  const router = useRouter();
  
  useEffect(() => {
    // Only load Crisp on specific pages
    if (router.pathname.includes('/pricing') || 
        router.pathname.includes('/contact') ||
        router.pathname.includes('/support')) {
      // Load Crisp
    }
  }, [router.pathname]);
  
  return <>{children}</>;
}

Conclusion

Adding Crisp to your Next.js application deployed on Vercel is a straightforward process that can significantly enhance your user experience and support capabilities. By following the steps outlined in this guide, you can have a fully functional chat widget up and running in minutes.

Remember that the key to successful customer engagement isn't just implementing the tool, but using it effectively to address user needs and gather insights that can improve your product. Combined with platforms like RealReview.Space for more structured feedback collection, you can create a comprehensive system for understanding and serving your users better. According to McKinsey's research, companies that excel at customer experience grow revenues 4-8% above their market.

Start implementing Crisp today and take your customer communication to the next level!