JavaScript & React SDK

Install

npm install inletbase
# or
yarn add inletbase
# or
pnpm add inletbase

Forms in React

The useInletbaseForm hook wires a form up in a few lines. Pass a form slug string, or an options object when you want to pass the key inline.

import { useInletbaseForm } from 'inletbase/react';

export default function ContactForm() {
  const { submit, isLoading, isSuccess, error } = useInletbaseForm({
    formSlug: 'contact-form',
    apiKey: 'YOUR_PUBLISHABLE_API_KEY', // or set it once via InletbaseProvider
  });

  if (isSuccess) return <div>Thanks for reaching out!</div>;

  return (
    <form onSubmit={submit}>
      <input type="text" name="name" required placeholder="Name" />
      <input type="email" name="email" required placeholder="Email" />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Sending…' : 'Send'}
      </button>
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </form>
  );
}

Set the API key once with a provider

Wrap your app in InletbaseProvider to supply the key in one place. Any useInletbaseForm('slug') inside it picks the key up automatically.

import { InletbaseProvider, useInletbaseForm } from 'inletbase/react';

function App() {
  return (
    <InletbaseProvider apiKey="YOUR_PUBLISHABLE_API_KEY">
      <ContactForm />
    </InletbaseProvider>
  );
}

Block spam with a honeypot

Drop <InletbaseFormHoneypot /> anywhere inside your form. It renders a hidden field that bots fill in and humans never see, with no CAPTCHA.

import { useInletbaseForm, InletbaseFormHoneypot } from 'inletbase/react';

export default function SafeForm() {
  const { submit } = useInletbaseForm('contact-form');
  return (
    <form onSubmit={submit}>
      <input type="text" name="name" placeholder="Name" />
      <InletbaseFormHoneypot />
      <button type="submit">Submit</button>
    </form>
  );
}

Forms in plain JavaScript

Not using React? Import InletbaseFormClient and submit from anywhere. It reads a native FormData object directly.

import { InletbaseFormClient } from 'inletbase';

const client = new InletbaseFormClient({ apiKey: 'YOUR_PUBLISHABLE_API_KEY' });
const form = document.getElementById('my-form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const response = await client.submit('contact-form', new FormData(form));
  if (response.success) {
    alert('Success!');
  }
});

Forms from a Node.js server

Handling submissions on your own backend (Next.js route handlers, Express, Fastify)? Use InletbaseFormServerClient to forward data without exposing your key in the browser. You can pass the visitor's IP and user agent so your dashboard shows their details, not your server's.

import { InletbaseFormServerClient } from 'inletbase/server';

export async function POST(request) {
  const body = await request.json();

  const client = new InletbaseFormServerClient({
    apiKey: process.env.INLETBASE_PRIVATE_API_KEY,
    origin: 'https://my-website.com', // if domain whitelisting is on
  });

  const response = await client.submit('contact-form', body, {
    userIp: request.headers.get('x-forwarded-for'),
    userAgent: request.headers.get('user-agent'),
  });

  return Response.json(response);
}

AI chatbot

Render the InletbaseChatbot component with just your bot ID. It draws the whole chat experience, the launcher button, message history, streaming replies, input, and send button, and picks up the appearance you set in your dashboard. No API key is needed.

import { InletbaseChatbot } from 'inletbase/react';

export default function App() {
  return (
    <>
      {/* your app */}
      <InletbaseChatbot botId="YOUR_BOT_ID" />
    </>
  );
}

See training your chatbot and customizing the chat widget to set its knowledge and look.

Form response contract

Both form clients and the useInletbaseForm hook return the same envelope. Neither throws: success, a non-2xx status, and a network or timeout failure all resolve to this shape.

interface ResponseEnvelope {
  success: boolean; // true only when the HTTP status is 200–299
  status: number;   // the HTTP status code; 0 on a network/timeout failure
  data: any;        // the backend response body (or { error } on failure)
  error?: string;   // present on failure; mirrors the backend message
}

API key and environment variables

The React hooks resolve the key in this order, and the first non-empty value wins:

1. the value you pass to the hook,
2. the InletbaseProvider,
3. NEXT_PUBLIC_INLETBASE_API_KEY (Next.js),
4. VITE_INLETBASE_API_KEY (Vite).

Use a publishable key (starts with ib_live_) in the browser. Keep private keys on the server only. Get and manage keys in API Keys.

What you need

• An active Inletbase account.
• A form or a trained chatbot created in your dashboard.

Prefer to call the API directly? See the API reference. The package is published on npm.