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

# Funnel-wide custom code

> Add custom CSS, meta tags, and scripts that apply to every screen in your funnel.

Funnel-wide custom code lets you inject styles, meta tags, and
scripts without placing code on
individual screen elements.

<Warning>
  Custom code is not reviewed or controlled by FunnelFox.
  Make sure anything you add is reliable and thoroughly tested
  before using it in production.
</Warning>

## How it works

Click the **Editor menu** at the top left and select **Custom code** to
open a full-screen code editor. Everything you write
here is injected into the `<head>` tag on every screen of your
funnel.

You can use `<style>`, `<meta>`, and `<script>` tags.
Non-script content is rendered as part of the initial HTML for instant
first paint. Script tags are added on the client so they actually execute.

Changes appear in the funnel preview and persist
through publishing.

<Info>
  Funnel-wide code applies to every screen. If you need code
  on a specific screen only, use a
  [Raw HTML element](/elements/raw) with
  [per-screen custom code](/editor/coding) instead.
</Info>

## Add funnel-wide code

Follow these steps to apply your custom code globally:

1. Click the **Editor menu** at the top left and select **Custom code**.

<Frame>
  <img src="https://mintcdn.com/funnelfox/cxG6YKcN6wJiSnp-/assets/custom-code-button.png?fit=max&auto=format&n=cxG6YKcN6wJiSnp-&q=85&s=097a61aa789cab3196ab381f7fb704e6" width="1169" height="718" data-path="assets/custom-code-button.png" />
</Frame>

2. Edit your custom HTML code.

<Warning>
  The Editor generates component-level styles with high
  specificity. To override them with funnel-wide CSS, add
  `!important` to your declarations.
</Warning>

<Frame>
  <img src="https://mintcdn.com/funnelfox/ebaKuj7hDNHnr_Jl/assets/custom-code-example.png?fit=max&auto=format&n=ebaKuj7hDNHnr_Jl&q=85&s=8f703c4f6d48ced750f9cda952617a1d" width="1920" height="879" data-path="assets/custom-code-example.png" />
</Frame>

3. Click **Save**.

4. Save and republish your funnel.

## Use cases

### Override CSS

You can add custom CSS to apply styles across the entire funnel. For example, you can set a different background color for the main funnel content area and the desktop margins. This is especially useful when viewing a funnel on desktop.

```html theme={null}
<style>
  body {
    background-color: #f0f0f0 !important;
  }
</style>
```

## Next steps

* Add [per-screen custom code](/editor/coding) with the
  Fox API and Raw HTML elements
