> ## Documentation Index
> Fetch the complete documentation index at: https://codebeans-discount-engine-pro.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS and JavaScript

> Add your own CSS and JavaScript to the app's admin pages.

The **Settings** page lets you add your own CSS and JavaScript to the head of every page of this app, for example a support widget or an analytics snippet your team uses.

![The Custom CSS & JavaScript section on Settings](https://mintcdn.com/codebeans-discount-engine-pro/vADWEe_DBoVbp2Z1/images/settings-page.png?fit=max\&auto=format\&n=vADWEe_DBoVbp2Z1\&q=85\&s=1c1e2d3f798b504fc9d23728c472664b)

> [!WARNING]
>
> This code runs inside the app's admin pages only. It does **not** reach your storefront or checkout. To change how offers look on your store, use the [theme blocks](https://codebeans-discount-engine-pro.mintlify.site/storefront/theme-blocks.md) settings in your theme editor.

## Add custom CSS

**1. Open the editor**

Open **Settings** in the app navigation and click **Add custom CSS** (or **Edit custom CSS** if you've added some before).

**2. Paste your CSS**

Paste `<style>` or `<link rel="stylesheet">` tags, or plain CSS.

**3. Save**

Click **Save**. A message confirms *"Custom CSS saved"* and the styles apply straight away.

## Add custom JavaScript

**1. Open the editor**

Click **Add custom JS** (or **Edit custom JS**).

**2. Paste your script**

Paste `<script>` tags exactly as your provider gives them, including `src`, `async` and `data-*` attributes, or plain JavaScript.

**3. Save**

Click **Save**. The script runs once when the app loads, and again after each save.

![The Custom JavaScript editor](https://mintcdn.com/codebeans-discount-engine-pro/vADWEe_DBoVbp2Z1/images/custom-js-modal.png?fit=max\&auto=format\&n=vADWEe_DBoVbp2Z1\&q=85\&s=527a10408aeda7fe2c9ee03be60d6b2d)

## Limits

* CSS and JavaScript are limited to **50,000 characters** each.
* To remove your code, open the editor, clear the box and save.

> [!NOTE]
>
> If a script breaks a page of the app, clear it from **Settings** and save. Your campaigns and discounts are not affected by custom code.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.