c15t1.0.4

GitHubc15t/c15t

101

React Quickstart

Learn how to integrate c15t into your React application with this step-by-step guide. We'll cover installation, configuration, and basic usage.

Generate Schema + Code

npx @c15t/cli generate

Run Database Migrations (Optional)

This is only required if you are self hosting c15t.

npx @c15t/cli migrate

Manual Setup

Install @c15t/react Package

npm install @c15t/react

Add to Your React Application

src/App.jsx
import { 
  ConsentManagerDialog,
  ConsentManagerProvider,
  CookieBanner,
  type ConsentManagerOptions
} from '@c15t/react';
 
function App() {
  const options = {
    mode: 'c15t', 
    backendURL: process.env.REACT_APP_C15T_URL,
  };
 
  return (
    <ConsentManagerProvider options={options}>
      <div className="App">
        {/* Your application content */}
      </div>
      <CookieBanner />
      <ConsentManagerDialog />
    </ConsentManagerProvider>
  );
}
 
export default App;

You can create an instance at consent.io (recommended) or use c15t offline by setting mode: 'offline'.

Hosting Options

Using consent.io is the recommended method as it is the easiest way to get started and requires little maintenance.

consent.io provides a fully managed consent management service. This is the recommended method as it is the easiest way to get started and requires little maintenance.

Sign up for a consent.io account.

After signing up, create a new instance, located in the top-right corner.

When creating an instance it is important to list all the trusted origins for your application such as "localhost", your production domain, etc.

After the instance is created, you will be given a backendURL, which you can add to your ConsentManagerOptions.

A backend URL might look like this: https://<my-instance>.c15t.dev/.

Alternative Storage Options

For more advanced setup options, choose the approach that best suits your requirements.

For more advanced setup options, please refer to:

  • Overview - Compare different approaches to storing consent decisions in your application
  • Hosted c15t - Complete guide to using consent.io
  • Offline Mode - Complete guide to using c15t without a backend
  • Custom Client - Advanced implementation with custom handlers for full control

Decision Guide

Use this flowchart to determine which c15t configuration is best for your needs.

Next Steps

Choose your next step based on your specific implementation needs.

Learn more about Hosted c15t (consent.io)

Learn more about Self-Hosting

Learn more about Offline Mode

Learn more about Custom Client

On this page

c15t.com