> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getlaunch.it/llms.txt
> Use this file to discover all available pages before exploring further.

# Cookies

> This guide explains how to add new services to the cookie banner in the LaunchIt application. The process involves defining a new cookie group, creating a component for the service, and ensuring that the service respects user consent.

## Steps to Add a New Service

LaunchIt uses a cookie banner to manage user consent for tracking services. Only if a user consents to a service, the corresponding tracking script is loaded.

You can disable the complete behavior in the `appConfig.tsx` file. However, if you want to add a new service, follow these steps:

### 1. Choose the Cookie Group

Choose an existing group or add a new entry to the `COOKIE_GROUPS`:

```typescript web/lib/cookies/types.ts theme={null}
export const COOKIE_GROUPS: CookieGroup[] = [
  // Existing groups
  {
    id: 'socialMedia',
    name: 'cookies.groups.socialMedia.name',
    description: 'cookies.groups.socialMedia.description',
    component: SocialMediaTracking, // Component for the service
  },
];
```

### 2. Create or modify the Component

Modify your chosen component in `web/components/cookies/groups/` or create the new one.

```tsx web/components/cookies/groups/socialMediaTracking.tsx theme={null}
'use client';

import { useEffect } from 'react';
import { appConfig } from '@/appConfig';
import { initSocialMediaService, SocialMediaService } from '@/lib/analytics/social-media';

export function SocialMediaTracking({ children }: { children?: React.ReactNode }) {
  useEffect(() => {
    if (appConfig.services.socialMedia) {
      initSocialMediaService(); // Initialize the service here
    }
  }, []);

  return (
  <>
    // and / or here
    <SocialMediaService />
    {children}
    </>
);
}
```

### 3. Implement the Service Logic

Create the service initialization and shutdown logic in `web/lib/analytics/`:

```tsx web/lib/analytics/social-media.tsx theme={null}
'use client';

import { appConfig } from '@/appConfig';

export function initSocialMediaService() {
  // Initialize social media tracking service
}

export function SocialMediaService({ children }: ProviderProps) {
  if (appConfig.services.socialMedia) {
    return <SocialMediaProvider props={...}>{children}</SocialMediaProvider>;
  }
  return <>{children}</>;
}
```

### 4. Update `appConfig`

Include the new service in the `services`:

```typescript web/appConfig.tsx theme={null}
export const appConfig: AppConfig = {
  // Other configurations
  services: {
    posthog: true,
    plausible: true,
    googleAnalytics: false,
    socialMedia: true,
  },
};
```

### 5. Set Environment Variables

Ensure that any necessary environment variables are set, such as API keys for the new service.