---
title: JavaScript Quickstart
description: Learn how to integrate c15t into your Javacript application with this step-by-step guide. We'll cover installation, configuration, and basic usage.
lastModified: 2025-04-17
tocStyle: steps
availableIn:
  - framework: 'react'
    url: '/docs/frameworks/react/quickstart'
    title: 'React'
  - framework: 'next'
    url: '/docs/frameworks/next/quickstart'
    title: 'Next.js'
---
## CLI Setup (Recommended)

1. **Generate Schema + Code**

   | Package manager | Command                       |
   | :-------------- | :---------------------------- |
   | npm             | `npx @c15t/cli generate`      |
   | pnpm            | `pnpm dlx @c15t/cli generate` |
   | yarn            | `yarn dlx @c15t/cli generate` |
   | bun             | `bunx @c15t/cli generate`     |

2. **Run Database Migrations (Optional)**

   > ℹ️ Info:
   >
   > This is only required if you are self-hosting c15t.

   | Package manager | Command                      |
   | :-------------- | :--------------------------- |
   | npm             | `npx @c15t/cli migrate`      |
   | pnpm            | `pnpm dlx @c15t/cli migrate` |
   | yarn            | `yarn dlx @c15t/cli migrate` |
   | bun             | `bunx @c15t/cli migrate`     |

## Manual Setup

1. **Install c15t Package**

   | Package manager | Command            |
   | :-------------- | :----------------- |
   | npm             | `npm install c15t` |
   | pnpm            | `pnpm add c15t`    |
   | yarn            | `yarn add c15t`    |
   | bun             | `bun add c15t`     |

2. **Add to Your JavaScript Application**

   ```tsx
   import { configureConsentManager, createConsentManagerStore } from 'c15t';

   export const consentManager = configureConsentManager({ mode: "c15t", backendURL: "https://your-instance.c15t.dev" });
   export const store = createConsentManagerStore(consentManager, {
     initialGdprTypes: ["necessary", "marketing"], // Optional: Specify which consent categories to show in the banner.
     ignoreGeoLocation: true // Useful for development to always view the banner.
   });
   ```

   The consent manager is now ready to use. For example:

   ```tsx
   store.getState().setConsent('marketing', true); // set consent to marketing
   store.getState().showPopup; // should show popup?
   ```

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

***

## Hosting Options

### Creating a consent.io Instance (Recommended)

> ℹ️ **Info:**
> Using consent.io is the recommended method as it is the easiest way to get started and requires little maintenance.

[consent.io](https://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.

1. **Sign up for a consent.io account.**

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

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

3. **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

> ℹ️ **Info:**
> For more advanced setup options, choose the approach that best suits your requirements.

For more advanced setup options, please refer to:

* [Overview](/docs/storing-consent/overview) - Compare different approaches to storing consent decisions in your application
* [Hosted c15t](/docs/storing-consent/hosted-c15t) - Complete guide to using consent.io
* [Offline Mode](/docs/storing-consent/offline-mode) - Complete guide to using c15t without a backend
* [Custom Client](/docs/storing-consent/custom-client) - Advanced implementation with custom handlers for full control

## Decision Guide

> ℹ️ **Info:**
> Use this flowchart to determine which c15t configuration is best for your needs.

```mermaid
flowchart TD
Start([Start here]) --> StoreConsent

StoreConsent{Need to store
consent choices?}
StoreConsent -->|Yes| ManagedService
StoreConsent -->|No| OfflineMode

ManagedService{Want a managed
service?}
ManagedService -->|Yes| ConsentIO
ManagedService -->|No| CustomClient

OfflineMode([c15t Offline Mode]):::optionStyle
OfflineMode -.-> OfflineNote[Client-side only
Stores in localStorage]:::noteStyle

ConsentIO([consent.io]):::recommendStyle
ConsentIO -.-> ConsentIONote[Fully managed
Simplest setup]:::noteStyle

CustomClient([Custom Client]):::optionStyle
CustomClient -.-> CustomNote[Full control
Requires implementation]:::noteStyle
```