Add an AI-Powered Blog to Your React App

Whether you're using Create React App, Vite, or another bundler, BlogBott can be dropped into your project with a tiny component. Follow the steps below and start publishing SEO-ready posts in minutes.

REACT SETUP INSTRUCTIONS:

Create a Blog component

Add a file like src/Blog.jsx (or .tsx) in your project.

Paste the component code

Use the following code to handle script loading and initialization.

import { useEffect } from 'react';

export default function Blog() {
  useEffect(() => {
    // If the script is already present (e.g., a React hot-reload) just re-init

    const script = document.createElement('script');
    script.src = 'https://blogbott.com/aiblog.js'; // remote file
    script.async = true; // don't block paint

    script.onload = () => {
      if (typeof window.blogbott_initializePage === 'function') {
        // ⚡️ call the third-party initializer
        // If the function expects a selector or element, pass it here:
        // window.blogbott_initializePage('#blogbott_container');
        window.blogbott_initializePage();
      } else {
        console.error('BlogBott script loaded, but window.blogbott_initializePage() is undefined');
      }
    };

    script.onerror = () => console.error('Failed to load https://blogbott.com/aiblog.js');

    document.body.appendChild(script);

    // Clean-up on unmount
    return () => {
      script.remove(); // remove the tag
    };
  }, []);

  // Keep the mount point simple—avoid dots in IDs just in case
  return <div id='blogbott.com_app' />;
}
}

Render the component in your router / page

For example, if you're using React Router, add a route like /blog that renders the Blog component.

Need help? If you run into any issues with the React setup, feel free to contact me for assistance!

Frequently Asked Questions (FAQ)

Will this work with React frameworks like Vite or CRA?

Yes! The component only uses the DOM API and React hooks, so it works in any client-side React environment—including Create React App, Vite, Parcel, or even legacy setups.

How can I style my BlogBott posts?

The blog content is injected into the #blogbott.com_app div. You can target elements inside that container with your own CSS to match your brand.

Is the script loaded asynchronously?