Generic React
Add EnterestOS tracking to any React or Next.js app.
Problem: You have a custom React or Next.js app with a working form but no tracking — you want visibility into who submitted, what the status is, and what needs follow-up.
Solution: Install the SDK, create a client, and add trackResponse() after your submit handler — three additions to your existing code.
Steps
- 01.Run: npm install @enterestos/sdk
- 02.Add NEXT_PUBLIC_ENTERESTOS_PROJECT_KEY to your .env.local
- 03.Import createEnterestOS and create a client at module level
- 04.Call trackResponse() after your existing submit logic succeeds
- 05.Wrap in try-catch so tracking never blocks submission
- 06.Submit a test form
- 07.Confirm submission appears in Inbox under Reply
Complete Integration
'use client';
import { createEnterestOS } from '@enterestos/sdk';
const enterestos = createEnterestOS({
projectKey: process.env.NEXT_PUBLIC_ENTERESTOS_PROJECT_KEY!
});
export function ContactForm() {
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = {
name: (e.target as any).name.value,
email: (e.target as any).email.value,
message: (e.target as any).message.value
};
// 1. Your existing submit logic runs first
await submitToYourBackend(formData);
// 2. Track with EnterestOS after
try {
await enterestos.trackResponse({
type: 'contact_request',
payload: formData
});
} catch (error) {
console.error('Tracking failed:', error);
}
};
return (
<form onSubmit={handleSubmit}>
<input name="name" required />
<input name="email" type="email" required />
<textarea name="message" required />
<button type="submit">Send</button>
</form>
);
}Pre-Launch Checklist
- —SDK installed
- —Environment variable set in .env.local
- —Client created at module level
- —trackResponse() called after successful submit — not before
- —Error handling wraps trackResponse() call
- —Test submission appears in Inbox
- —Response payload matches form fields exactly
Result: You now have a fully working integration — every React form submission tracked in EnterestOS with lifecycle visibility until resolved.
Common Questions
How do I integrate EnterestOS into a Next.js App Router project?
Add 'use client' at the top of your form component, install @enterestos/sdk, create a client with createEnterestOS(), and call trackResponse() inside your submit handler after your existing logic runs. Set the project key in .env.local.
Where should I put the EnterestOS client initialization?
At module level — outside the component function, at the top of the file. This creates one client instance that is reused for every form submission in that file.
Related pages