Reactjs – How can we create our own React.js components as CDN links?

The simplest way would be to use an iframe.

You can host your Next.js app with a page that only contains the chatbot component and set the background color as transparent.

background-color : transparent;

Then, anyone with access to your app can use an iframe to embed the chatbot in their own website. Adding allowtransparency="true" will achieve your desired effect.

<iframe src="https://your-nextjs-app/chatbot-page" allowtransparency="true"></iframe> 

more info on iframe allowtransparency.

To create the iframe with javascript:

// Create the iframe element
var iframe = document.createElement('iframe');

// Set the iframe attributes
iframe.src = 'https://your-nextjs-app/chatbot-page';
iframe.style.position = 'fixed';
iframe.style.bottom = '0';
iframe.style.right = '0';
iframe.style.width = '400px';
iframe.style.height = '600px';
iframe.style.border = 'none';
iframe.style.opacity = '0.5';
iframe.style.zIndex = '9999';
iframe.allowtransparency = true;
iframe.style.backgroundColor = 'transparent';

// Append the iframe to the document body
document.body.appendChild(iframe);

Building a single react component with create-react-app

Step 1: initiate a new react project with create-react-app

run npx create-react-app chatbot-component

Step 2: configure the project to build a single component.

Remove everything except public/index.html and src/index.js

Your folder structure should look like this:

Delete everything in index.html, and replace everything in index.js with this:

import React from 'react';
import ReactDOM from 'react-dom/client';

const Component = () => {
  return (
    <h1>hello world</h1>
  );
};

const div = document.createElement("div");

const root = ReactDOM.createRoot(div);
root.render(
  <React.StrictMode>
    <Component />
  </React.StrictMode>
);

// append element to body or wherever you want.
document.body.appendChild(div);

Step 3: run build

run npm run build to build the project.

You should see this in you build folder:

The main.{hash}.js is what you want, you can rename it and host it on a cdn. Any HTML page with this script should see <h1>Hello world</h1> in their body.

Here’s an example of the build result.