AI Chatbot in React: A Step-by-Step Guide to Implementing BetterCX

Embed BetterCX AI Chat in React - bettercx-widget and Your pk_ Key

If your website or app is built with pure React, you don’t need to build your own chat system from scratch. BetterCX provides a ready-to-use, production-ready chat widget as an npm package that you can use in your component tree just like any other React component.

In practice, this boils down to a few steps: installing the bettercx-widget, downloading the pk_... public key from the BetterCX dashboard, adding the domain to the allowed origins, and embedding the BetterCXWidgetReact component in your application. This makes React a convenient presentation layer, while all the “intelligence”—AI, knowledge base, leads—happens on the BetterCX platform side.

Why You Should Add an AI Chatbot to Your React App

From a business perspective, React is just a technology—what matters is whether the website or app actually generates conversations, leads, and sales. An AI chatbot built with React can:

• answer customer questions in real time,
• capture leads without requiring form submissions,
• relieve the team of repetitive inquiries before the matter is escalated to a human,
• gather conversation context that is later visible to sales or support.

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

How does React differ from Next.js or WordPress in terms of implementation?

• In WordPress, the simplest approach is to use the official BetterCX plugin - you install the plugin, paste in your public key, and you’re all set, without having to modify the theme.

• In Next.js with App Router, the boundaries between Server and Client Components are important, as well as dynamic import with ssr: false, as described in the dedicated guide for Next.js.

• In pure React, the integration is easier to understand: you install the npm package and inject BetterCXWidgetReact into the component tree, passing it the public key.

For a business owner, this means that React offers the most control over where the chat appears in the layout: you can embed it only on a specific part of the page, only after logging in, or globally, depending on your product strategy.

What to prepare on the BetterCX side before you start coding

Before adding anything to your React code, set up the basic configuration in the BetterCX dashboard:

• BetterCX account and a project for a specific website or application.
• The widget’s public key pk_... from Widget section.
• The frontend domain in the allowed origins list - this isn’t just a formality, but a real security mechanism that restricts where the widget can connect from.
• HTTPS enabled on the frontend (required by modern widget providers and browsers).
• At least basic content in the knowledge base – the more specifically you describe your offering, the less “guessing” the AI will have to do.

This is the minimum requirement: key + domain + HTTPS + a meaningful knowledge base. If you omit allowed origins or HTTPS, the widget may not connect correctly, even if the React code looks fine.

Step 1: Install the npm package bettercx-widget

The first step on the code side is to install the package. The official BetterCX Widget package is available on npm, and according to the documentation, you install it using the standard command:

npm install bettercx-widget

Offical package listing: bettercx-widget na npm.

The package provides a production-ready, lightweight chat widget built as a web component, which can be easily used in React via the bettercx-widget/react wrapper.

In practice, this means you don’t have to manually paste <script> into index.html—you use a React component that is a natural part of the JSX tree, which is consistent with the recommendations of other React widget providers.

Step 2: Store the public key in an environment variable

It’s not a good idea to hardcode the pk_... key directly into the code. It’s better to store it in a bundler’s environment variable (e.g., Vite, CRA, Next, Remix)—this is also how other widget and API tokens are handled.

Example for Vite:

VITE_BCX_PUBLIC_KEY=pk_YOUR_KEY

In Create React App, you can use something like REACT_APP_BCX_PUBLIC_KEY=..., and in other bundlers, the appropriate prefix for public variables. After changing the environment variable, remember to restart the dev server so the bundler can load the new value.

Step 3: Add the BetterCXWidgetReact component to the application tree

Once you've installed the package and set the environment variable, you can add the widget to your app. The minimal example from the React documentation cuts out the unnecessary clutter and shows you exactly what you need for a real-world app:

import { BetterCXWidgetReact } from 'bettercx-widget/react';

export function App() {
  return (
    <BetterCXWidgetReact
      publicKey={process.env.VITE_BCX_PUBLIC_KEY!}
    />
  );
}

This is the “hello world” version - one component, one public key. In a real-world project, you will often:

• use a different environment variable name (e.g., REACT_APP_BCX_PUBLIC_KEY),

• embed the widget in a layout component that wraps all views,

• add a condition so that the widget only renders in production or only in specific sections of the app.

The most important thing is that the widget is a normal React component - you can manage it just like the rest of the UI, without manually injecting <script> into the HTML.

Where is the best place to position a widget in a React app?

From a UX and business perspective, it’s best to treat the widget as a global point of contact. In practice, this is how you usually do it:

• in single-view applications (landing pages) - you embed BetterCXWidgetReact directly in the main component (App),

• In larger applications (SaaS, customer dashboard), you embed the widget in a layout component (e.g., MainLayout) that wraps the router and all views.

With this approach:

• the user always has the chat “at their fingertips” - regardless of the current path,
• the widget doesn't unmount with every routing change (which could disrupt the chat session),
• the team has a single, consistent point of contact with the customer, rather than several separate integrations.

If, for any reason, you want to display the chat only in specific areas (e.g., only in the marketing section and not in the dashboard), you can wrap the BetterCXWidgetReact in a conditional statement based on, for example, the location.pathname or the user's status (logged in/not logged in).

BetterCX Dashboard - What You Need Before Showing the Widget to Your Customers

From a business perspective, the React code itself is just a “framework” - what really matters is how you configure your project in BetterCX.

Before deploying the widget to production, make sure you have:

• The public key from the Widget section – it starts with pk_.
• The front-end domain in the allowed origins list – this is a real security mechanism that ensures the widget connects only to allowed domains.
• Knowledge base content – the more specifically you describe your offer, the collaboration process, and the FAQ, the less “guessing” the AI will have to do.
• Basic sales and service scenarios – what questions to ask, when to transfer the conversation to a human, and what data to collect before the lead is passed on to the team.

As a result, from day one, the widget isn’t just a pretty AI-powered pop-up - it actually answers customer questions and provides data that sales reps or support staff can use.

Widget appearance and behavior – configuration without a new build

One of the advantages of a SaaS solution is that once a component is integrated into the code, you can make most changes without having to rebuild the front end. That’s exactly how BetterCX works.

You can set the colors, welcome message, and light/dark mode in the widget settings, not in the React code. This means that:

• the marketing team can test different welcome messages without asking the developer for a new implementation,
• you can update your branding in one place if you’re refreshing your visual identity,
• and you can configure widget behavior (e.g., messages triggered on specific subpages) directly from the dashboard.

The BetterCX Widget documentation notes that the widget supports various themes (light, dark, auto) and embedding modes, allowing it to be adapted to the existing design of the application system.

When to choose React over plain HTML

In many cases, a simple HTML/JS script is enough—especially for simple landing pages. However, React has several distinct advantages:

• You have a design system and want to control the exact placement of a component within the app’s layout.

• Budujesz produkt SaaS i chcesz, by chat był widoczny także po zalogowaniu, nie tylko na stronie marketingowej.

• You want to store the key in the bundler’s environment variables and ensure consistent deployment across different environments.

• You’ll need deeper integrations in the future (e.g., conditionally displaying a widget based on the user’s state).

In other words, if the chat is meant to be an integral part of the product—rather than just a floating bubble on the landing page—React + bettercx-widget is a more forward-looking approach than simply using <script> in HTML.

Common Mistakes When Implementing BetterCX in React

The widget is missing after launching the app

Most common causes: a missing public environment variable or a typo in the variable name (e.g., VITE_BCX_PUBLIC_KEY), The dev server does not restart after the change .env or the absence of a matching domain in the allowed origins list on the BetterCX side.

The widget works locally, but not in production

This is usually caused by differences between the local and production domains (a domain other than the one on the allowlist) or by a key that has been overwritten with different values in different environments.

The widget appears on too many screens or disappears between routes

If you place it in a component that frequently unmounts when the route changes, you may experience a “flickering” widget or a call disconnecting. The safest approach is to place it high up - in the app’s main layout - and, if necessary, control its visibility conditionally.

The AI's response is too general

This isn’t a problem with the React code or the widget; it’s a problem with the knowledge base. If you don’t upload specific content (FAQs, offers, price lists), the model will inevitably provide vague responses. Solution: refine the knowledge bases first, and only then evaluate the quality of the responses.

Frequently Asked Questions

Do I need a developer to implement BetterCX in React?

Yes, at least when it comes to adding the component to the application and configuring environment variables. The configuration on the BetterCX side is straightforward, but integrating it with the bundler and the component tree requires someone who knows React.

Can I just paste <script> into index.html?

Technically, yes, but this isn't best practice for React. The bettercx-widget package provides a React wrapper that better fits the component-based architecture and offers more flexibility in controlling where the widget is mounted.

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

No. It’s best to store it in the bundler’s environment variables (e.g., VITE_BCX_PUBLIC_KEY, REACT_APP_BCX_PUBLIC_KEY), which is standard practice when integrating with external widgets and APIs.

What are the most common obstacles to implementation?

Most often, there are three issues: missing allowed origins on the BetterCX side, no HTTPS, or incorrectly set environment variables (different name, failure to restart the dev server, or differing values between the local and production environments).

Does BetterCX only work with React?

No. The same widget can also be embedded in Next.js (App Router), on a regular HTML/JS page, and on WordPress (via the official plugin). React is simply one of the convenient integration options.

Related guides

Next.js, HTML embed, WordPress plugin.