Add a BetterCX AI Chatbot to Next.js (App Router) - Production Pattern

AI Chatbot on Next.js (App Router) - How to Implement BetterCX Step by Step

If your website runs on Next.js, you can add the BetterCX AI chatbot without having to build your own chat system from scratch. In practice, this boils down to three steps: retrieving the pk_... public key from the BetterCX dashboard, adding the domain to the allowed origins, and embedding the client-side widget in your Next.js application.

This is important because in the Next.js App Router, many components render on the server by default, and interactive components should be marked as Client Components using the 'use client' directive. Additionally, ssr: false in next/dynamic is not supported in Server Components, so such a widget must be placed in a client component, not a server component.

Why You Should Add an AI Chatbot to Your Next.js Website

For a business owner, technology only matters if it supports sales and customer service. An AI chatbot on a Next.js site can respond instantly, capture leads without an additional form, and relieve the team of simple questions before the conversation is forwarded to a sales representative or support.

This is particularly important on modern marketing websites and landing pages built with Next.js, where traffic often comes from SEO, advertising campaigns, and content marketing. If a user lands on the site with the intent to purchase, a quick response and a well-placed widget can shorten the path from landing on the page to a conversation, contact, and lead.

How does a Next.js implementation differ from WordPress?

In WordPress, the easiest approach is to use the official plugin, which lets you run the widget without touching the theme’s code, and the installation process is just like installing a regular WordPress plugin. In Next.js, things are different because you’re not installing a traditional plugin; instead, you embed a React component into the application and have to make sure it doesn’t render on the server side.

This doesn’t mean that implementation is difficult. It just means that technically, you have to do it correctly: use a client-side component, dynamic import with SSR disabled, and the NEXT_PUBLIC_BCX_PUBLIC_KEY environment variable, instead of hard-coding the key into the code.

What to Prepare Before Implementing BetterCX in Next.js

Before you dive into the code, set up the basic configuration on the BetterCX side:

• a BetterCX account,
• a project for your specific website,

• the widget's public key pk_... from the Widget panel,
• your website’s domain added to the allowed origins,
• HTTPS enabled on your website.

This is the minimum implementation scenario: key + domain + correct component embedding. If you omit the allowed origins or HTTPS, the widget may not connect correctly, even if the code itself looks correct.

Step 1: Download the public keypk_... and set the allowed origins

First, log in to BetterCX and go to the Widget section. That’s where you’ll find the widget’s public key, which is used to connect your website to your BetterCX project.

Next, add your website’s domain to the list of allowed origins. If you’re working separately on production and staging environments, add both domains individually; otherwise, the browser may block the widget session or the connection to the service.

At this stage, it’s also a good idea to make sure your website uses HTTPS. In the BetterCX documentation, the lack of HTTPS is listed as one of the most common causes of connection errors in web implementations.

Step 2: Install the BetterCX Widget npm package

This is a point that you definitely shouldn’t overlook in this guide. If you’re setting up BetterCX in Next.js, start by installing the official npm package:

You can find the official package here: bettercx-widget on npm. The npm documentation indicates that the recommended approach for React is to install bettercx-widget and then import the component from bettercx-widget/react.

This approach is convenient and clean because you don’t have to manually embed an external script into your React application. Instead, you use a maintained React wrapper that fits better with the Next.js architecture.

Step 3: Add an environment variable in Next.js

In Next.js, it’s best not to enter the pk_... key directly into the component. The BetterCX implementation documentation recommends using the NEXT_PUBLIC_BCX_PUBLIC_KEY environment variable in the .env.local file or specifying the environment variable in Next.js

Example:

NEXT_PUBLIC_BCX_PUBLIC_KEY=pk_YOUR_KEY

This approach is more convenient from an organizational standpoint because you don’t hard-code values into the repository; instead, when deploying to production, you can set the same variable with your hosting provider, such as Vercel. After changing the environment variables, you’ll also need to restart your local development server, because without a restart, Next.js may not load the new variable correctly.

Step 3: Create a client-side component for the widget

In the Next.js App Router, components are rendered on the server by default, and the 'use client' directive defines the boundary beyond which the component should be rendered on the client. This is important because the BetterCX widget is interactive and should work in the browser, not on the server.

On top of that, there’s dynamic importing. The official Next.js documentation explains that ssr: false is used to disable server-side rendering for components you don’t need on the server. At the same time, the App Router documentation emphasizes that ssr: false cannot be used in Server Components, and such code must be moved to a Client Component.

Below is a safe, minimal example of how to integrate the BetterCX widget into the Next.js App Router, in accordance with the guidelines in the implementation document:

'use client';

import dynamic from 'next/dynamic';

const BetterCXWidgetReact = dynamic(
  () =>
    import('bettercx-widget/react').then((mod) => ({
      default: mod.BetterCXWidgetReact,
    })),
  { ssr: false, loading: () => null }
);

export function Widget() {
  const publicKey = process.env.NEXT_PUBLIC_BCX_PUBLIC_KEY ?? '';

  if (!publicKey) {
    return null;
  }

  return <BetterCXWidgetReact publicKey={publicKey} />;
}

This pattern does exactly what you need in Next.js: the component is client-side thanks to 'use client', and the widget itself is loaded dynamically with SSR disabled.

Step 4: Add the widget globally to the layout

Once you have your Widget component ready, add it to the app’s main layout. The BetterCX documentation offers a simple recommendation: embed the widget once, globally, so that it’s available throughout the entire app or marketing website.

This is important for two reasons. First, the user sees a consistent point of contact on all subpages. Second, you avoid a situation where the widget appears and disappears between routes because it was placed too low in the component tree.

For the business team, this can be described very simply: instead of adding the chat separately to every subpage, you insert it once in the main layout, and BetterCX works globally.

Step 5: Expand the knowledge base so that the AI provides meaningful responses

Simply embedding the widget is only half the implementation process. The BetterCX implementation guide explicitly emphasizes that it’s worth populating the knowledge base, because then the AI responds based on your specific facts rather than engaging in “general chit-chat.”

For a Next.js website, it’s usually worth adding the following to the knowledge base:

• product pages,
• FAQs,
• service descriptions,
• blog,
• information about implementation, pricing and the collaboration process.

This is the point at which a chatbot stops being just a widget and starts functioning as a real sales and customer service tool. The better you describe your offerings and address the most common questions, the better the answers users will receive when they land on your site from Google, ads, or referrals.

Step 6: Configure the widget for conversion, not just for appearance

Once you've implemented the code, you should immediately proceed to the widget configuration, where you can set the welcome message, colors, and light or dark mode. In the BetterCX documentation, this section is highlighted as the primary place to configure the widget's appearance and behavior without further modifying the app's code.

From a conversion perspective, the following elements are particularly worth refining:

• the first welcome message,
• the tone of communication,
• colors consistent with the brand,
• a link to the privacy policy,
• the visibility of the widget on key subpages.

These are small changes, but they have significant business implications. On the landing page, the user must immediately understand why they should click on the chat and what benefit they will receive: a quick response, help in choosing an offer, contact with the team, or the ability to schedule a call.

Step 7: Track the conversations, leads, and pages that are actually working

Once the widget is implemented, it’s important to look not only at whether it’s displaying properly, but also at what actually happens next. In BetterCX, you’ll find the Chat and Analytics, sections, which help you see where conversations are coming from and where your team should take over from the AI.

This is important from an SEO and CRO perspective. If you notice that specific pages are generating leads, that’s where you should focus on strengthening the content, refining the headings, adding stronger CTAs, and improving internal linking. In practice, the chatbot thus becomes not only a communication channel but also a source of insight into which pages are actually generating leads.

Common Mistakes When Implementing BetterCX on Next.js

The most common issues are fairly common and are well documented in both the BetterCX and Next.js documentation.

Widget missing after deployment

The most common issues are the absence of NEXT_PUBLIC_BCX_PUBLIC_KEY, failure to restart the server after changing the environment, or the absence of an authorized domain on the BetterCX side.

Problems with hydration or SSR

If you try to insert a widget without dynamic(..., { ssr: false }) or without a client-side wrapper, you may run into classic App Router issues, because `ssr: false` is not supported in Server Components.

The widget works locally, but not in production

This usually indicates a problem with a domain on the allowlist, an incorrect key, or the absence of HTTPS.

The widget disappears when switching between routes

This is usually a sign that the component has been placed too low in the application tree, rather than globally in the layout.

Why This Post Is Important Even for Less Tech-Savvy Business Owners

Even if you don’t write code yourself, it’s important to understand what you’re asking a developer or software company to do. In the case of BetterCX for Next.js, the entire process can be boiled down to a simple brief:

1. download the pk_... key from BetterCX
2. add the domain to the origins,
3. set NEXT_PUBLIC_BCX_PUBLIC_KEY,
4. embed the client-side widget component using dynamic import and ssr: false,
5. populate the knowledge base and configure the widget.

This is important because it allows you to discuss specific steps with the developer, rather than the abstract concept of “implementing AI on the website.” What matters to a business is the result: the chatbot works, responds sensibly, captures conversations, and drives conversions.

Who Should Consider Implementing BetterCX in Next.js

This implementation model works best if:

• you have a marketing website or landing page built with Next.js,
• you want to provide quick responses to visitors,
• you want to collect leads without adding another form,
• you want to improve conversion rates from SEO traffic and campaigns,
• you plan to grow your website without relying on a heavy, custom chat solution.

This is an especially good fit for SaaS companies, service providers, startups, and modern corporate websites, where Next.js is already the primary marketing stack and the chatbot is intended to be a practical tool for sales and customer support.

Frequently Asked Questions

Do I need a developer to implement BetterCX on Next.js?

In practice, yes, at least when it comes to integrating the component into the application. The configuration on the BetterCX side is straightforward, but adding the widget correctly in the App Router requires a client-side component and a dynamic import with SSR disabled.

Can I just import the widget?

This is not the recommended approach for App Router. The widget should be loaded on the client side, and ssr: false must be set in the client component, as it is not supported in Server Components.

Do I have to store the public key in the code?

No. The BetterCX documentation recommends using the NEXT_PUBLIC_BCX_PUBLIC_KEY environment variable, which is more convenient and secure from an organizational standpoint.

What most often hinders implementation?

Most often, there are three issues: missing allowed origins, missing HTTPS, or the server not restarting after adding an environment variable.

Does BetterCX only work on Next.js?

No. The same implementation guide also covers implementations for WordPress, standard HTML/JS, and React. For WordPress, BetterCX even has an official plugin available in the WordPress.org directory.

Related guides

The same widget on other tech stacks: React (npm), HTML embed, WordPress (wtyczka).