React Integration

AI Chatbot for React Apps

Add an AI support agent to any React application via a useEffect hook or index.html script tag. Works with create-react-app, Vite, and any React setup.

Why FrontFace for React

Two install options — script tag or useEffect

Add the script tag to your public/index.html before </body> for the simplest approach. Or use a useEffect hook in your App component to load the widget programmatically.

Works with any React setup

Create React App, Vite, Parcel — FrontFace is framework-agnostic JavaScript. It attaches to the DOM once and persists across React's virtual DOM re-renders.

Answers from your product documentation

Upload your API docs, guides, and FAQs. Users get accurate, cited answers from your actual content instead of generic LLM responses about your product.

Doesn't interfere with React state

FrontFace runs in an isolated shadow DOM widget and doesn't interact with your React component tree or cause unexpected re-renders.

Live in 5 minutes

Three simple steps. No technical skills required.

01

Feed it your knowledge

Point FrontFace at your website or upload docs, PDFs and FAQs. It reads everything and builds a grounded knowledge base in minutes.

02

Make it yours

Add your logo, pick your colors, write a welcome message. Test it against real questions before it goes live.

03

Go live in 5 minutes

Drop one line of code on any site — Shopify, WordPress, Wix or custom — or share a hosted public agent page.

Frequently asked questions

How do I add FrontFace to a React app?
Option 1: Add the script tag to public/index.html before </body>. Option 2: In your App.tsx, use a useEffect with document.createElement('script') to load the widget on mount. Both approaches work across all React setups.
Will it cause React re-render issues?
No. FrontFace runs in an isolated widget outside React's component tree. It doesn't modify your component state, trigger context updates, or interfere with React rendering in any way.
Does it work with React Router?
Yes. The FrontFace widget loads once and persists across React Router navigation without re-initializing. It appears on every route unless you conditionally load it.
Can I conditionally show it only on certain routes?
Yes. Use a useEffect inside a specific page component to inject the script on mount and clean it up on unmount. This scopes the widget to only that route.

Add FrontFace to React free.

Free during beta. No credit card required.