# Adding Custom Code to Your Site

Source: https://support.exposure.co/en/articles/13456537-adding-custom-code-to-your-site/

_Extend your Exposure site with custom JavaScript, CSS, and HTML._

* * *

## Overview

Exposure’s Developer Options allow you to inject custom JavaScript, CSS, and HTML into your site. This gives you the flexibility to add analytics tracking, custom styling, third-party integrations, and more.

* * *

## Accessing Developer Options

1.  Go to **Settings** from your dashboard
    
2.  Click **Developer Options** in the left sidebar
    
3.  Scroll to the **Custom Code** section
    

* * *

## Code Injection Points

There are three locations where you can inject code, each loading at a different point in your page:

### Head (Early)

Code placed here loads immediately after the head tag opens—before any other scripts run.

**Best for:**

-   Cookie consent managers
    
-   Compliance scripts (GDPR, CCPA)
    
-   Anything that must load before other scripts
    

### Head (Late)

Code placed here loads at the end of the head section, after Exposure’s application code.

**Best for:**

-   Analytics tracking (Google Analytics, Plausible, etc.)
    
-   Custom fonts
    
-   Custom CSS styles
    
-   Most third-party integrations
    

### Footer

Code placed here loads at the end of the body, just before the closing tag.

**Best for:**

-   Heavier scripts that might affect page load
    
-   Code that needs the DOM fully loaded
    
-   Chat widgets and support tools
    

* * *

## How to Add Code

1.  Click **Edit** next to the section where you want to add code
    
2.  Enter your code in the editor
    
3.  The editor provides syntax highlighting to help you write error-free code
    
4.  Click **Save Custom Code** when finished
    

Your code will take effect on the next page load.

* * *

## Code Format

Always wrap your code in the appropriate tags:

<table role="presentation" style="border: 1px solid #c6c9c0; border-radius: 6px; border-collapse: separate; border-spacing: 0;"><tbody><tr><td style="padding: 8px;"><p class="no-margin">Code Type</p></td><td style="border-left: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Wrapper Tags</p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><b>JavaScript</b></p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Wrap in script tags</p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><b>CSS</b></p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Wrap in style tags</p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><b>External scripts</b></p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Use script tag with src attribute</p></td></tr></tbody></table>

* * *

## Common Use Cases

### Analytics Tracking

Paste your Google Analytics, Plausible, Fathom, or other analytics tracking code in the **Head (Late)** section. Most analytics providers give you a code snippet to copy and paste directly.

### Custom Fonts

Add Google Fonts or other web fonts using a link tag for the font stylesheet, then add a style block to apply the font to your site.

### Custom CSS Styling

Add a style block with your custom CSS rules. You can hide elements, change colors, adjust spacing, or completely restyle parts of your site.

### Chat Widgets

Tools like Intercom, Drift, or Crisp usually provide a script snippet. Paste it in the **Footer** section so it loads after your page content.

* * *

## Plan Availability

Custom Code injection is available on the **Business** plan. If you’re on a different plan, you’ll see a prompt to upgrade when visiting Developer Options.

* * *

## Tips

-   Test your code on a single page before applying site-wide
    
-   Use browser developer tools (F12) to debug any issues
    
-   Keep your code organized with comments
    
-   External scripts may affect page load speed
    
-   Save frequently while making changes
    

* * *

## Need Help?

If you need assistance with custom code or have questions about what’s possible, reach out to us at [support@exposure.co](<mailto:support@exposure.co>). We’re happy to help!

* * *

## Need help?

Use the [Exposure contact form](<https://exposure.co/contact>).