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

# Custom code

> Add your own CSS and JavaScript to your Referly affiliate portal. Restyle the portal, add analytics or a chat widget, and learn which code is blocked for security.

Referly's portal settings cover most of what people want to change, but sometimes you need something specific — a font that matches your brand exactly, your analytics tool, or a support chat bubble. The **Custom Code** page lets you add your own CSS and JavaScript to your affiliate portal to do that.

To find it, open **Settings** from the left sidebar, go to **Affiliate Portal**, then select **Custom Code**.

There are two boxes: **Custom CSS** for how things look, and **Custom JavaScript** for behavior. You can use one or both.

<Info>
  Saving custom code needs the **Business plan** or higher. See [plans and features](/docs/help-center/billing/plans-and-features).
</Info>

<Note>
  Anything you add here runs on your **affiliate portal only** — every page of it, including login and sign-up. It doesn't touch your own website, and it doesn't affect your Referly dashboard.
</Note>

## Add custom CSS

The **Custom CSS** box changes how your portal looks. Use it for adjustments the [branding](/docs/help-center/getting-started/set-up-program/branding) and [login page](/docs/help-center/settings/portal/login-and-sign-up) settings don't cover.

Write plain CSS, the same as you would for a website:

```css theme={null}
/* Round the corners on buttons */
button {
  border-radius: 12px;
}

/* Hide an element you don't want affiliates to see */
.some-element {
  display: none;
}
```

To target the right thing, open your portal in a browser, right-click the element you want to change, and choose **Inspect** to find its name. If you're not comfortable doing that, this is a good task to hand to whoever built your website.

## Add custom JavaScript

The **Custom JavaScript** box is for adding behavior — most often a tracking or analytics snippet, or a support chat widget.

<Warning>
  Paste the code **only**, without the surrounding `script` tags. Most snippets you're given start with `<script>` and end with `</script>` — delete those two lines and keep what's between them. Referly adds the wrapper for you.
</Warning>

For example, if a tool gives you this:

```html theme={null}
<script>
  myTool.init('abc123');
</script>
```

you paste only this:

```javascript theme={null}
myTool.init('abc123');
```

If you need your code to wait until the page has loaded, do it like this:

```javascript theme={null}
document.addEventListener('DOMContentLoaded', function () {
  // your code here
});
```

## What isn't allowed

To protect your affiliates' accounts, some risky JavaScript is stripped out before it runs. Code that runs text as code or rewrites the page wholesale won't work, including `eval`, `document.write`, `execScript`, and setting `innerHTML` or `outerHTML` directly. Timers written with quoted text instead of a function are also rewritten.

If a snippet you paste relies on any of those, it stays silent instead of running. Ask the tool's support team for a version that doesn't use them, or load their official script through a tag manager on your own site instead.

CSS is checked too, so anything that tries to pull in outside files or scripts through your stylesheet is removed.

## Save and check your work

As soon as you edit either box, a **Save Changes** button appears at the bottom right. Your code isn't live until you select it.

<Check>
  When the "Custom code saved successfully" message appears, your code is live.
</Check>

There's no preview on this page, so open your affiliate portal in a new tab and look at it there. Check the login page and a page or two inside the portal, on a phone as well as a computer, since a styling change that looks right on a wide screen can break a narrow one.

## If something breaks

Custom code runs on every page of your portal, so a mistake can hide a button your affiliates need or stop a page from working.

If that happens, come back to this page, clear the box you changed, and select **Save Changes**. Your portal returns to normal right away. Nothing here can damage your program's data — the worst case is a portal that looks or behaves wrong until you undo it.

A few habits that save trouble:

* Add one change at a time and check the portal after each, so you know what caused a problem.
* Keep a copy of your code somewhere outside Referly before you make a big edit.
* Avoid hiding anything affiliates need, like the payout or referral link sections.

## Related

<Columns cols={2}>
  <Card title="Set up your branding" icon="palette" href="/docs/help-center/getting-started/set-up-program/branding" arrow>
    Change logos and colors without writing any code.
  </Card>

  <Card title="Login and sign up" icon="window-maximize" href="/docs/help-center/settings/portal/login-and-sign-up" arrow>
    Pick a layout and customize your portal's first screens.
  </Card>

  <Card title="Contact widget" icon="comment" href="/docs/help-center/settings/portal/contact-widget" arrow>
    Add a built-in way for affiliates to reach you, no code needed.
  </Card>

  <Card title="Custom domain" icon="globe" href="/docs/help-center/settings/portal/custom-domain" arrow>
    Serve the portal from your own web address.
  </Card>
</Columns>