# Custom HTML Redirects

Between the tap and the App Store, users see a Detour page. You can replace it with
your own HTML, with your logo, your loading state and your wording, instead of a
generic interstitial.

Each app has three such pages, each on its own tab:

- **Redirect page** — shown during the immediate redirect and fingerprinting.
- **Copy link page** — the background of the iOS clipboard flow.
- **App preview** — an optional interstitial shown before the store redirect,
  which the visitor continues from with a tap.

---

## Where to configure

To customize your app's redirect pages:

1. Log in to the **Detour Dashboard**.
2. Select your mobile **App** from the sidebar.
3. Open the **Redirect page** settings, and pick the **Redirect Page**, **Copy
   Link Page** or **App Preview** tab.

---

## Custom redirect page

The redirect page renders in the user's browser while the platform detects the device OS, records the click, and gathers fingerprint data.

- **Best for** — loading spinners, your app logo, or a short line like _"Opening the app..."_
- **How it is served** — inside a sandboxed iframe. **JavaScript is disabled**, so only HTML markup and inline CSS are allowed.

---

## Custom copy link page

The copy link page appears only for iOS users, and only when the **Copy Link** flow is enabled for the app.

Recent iOS versions block pasteboard access from a direct page redirect. Detour works around that by asking the user to copy the link before installing, which gives probabilistic matching a strong extra signal.

### Injected dialog

When you customize the HTML for the Copy Link page:

- Your HTML serves as the **background layout** for the page.
- Detour automatically injects and displays the interactive **Copy Link Dialog Box** on top of your HTML.
- The dialog box contains buttons to copy the link, install the app, and open the app store.

### Dialog settings

Because the dialog is injected dynamically, you configure its appearance in the dashboard rather than in your markup:

- **Banner Theme** — Switch between **Light** and **Dark** themes to match your background.
- **Banner Language** — Choose from 11 supported languages (English, Polski, Español, Français, Deutsch, Italiano, Português, Nederlands, 日本語, 한국어, 中文) to automatically localize the copy-link prompt.

---

## App preview page

The app preview is an optional interstitial: instead of sending a mobile visitor
straight to the store, Detour shows a page you control, and the visitor continues
with a tap on a **Continue** button. Use it to say what the app is before asking
someone to install it.

It is off by default. Turn on **Show App Preview** on the **App Preview** tab.

- **Who sees it** — mobile visitors only. Desktop and web visitors always go
  straight to your fallback URL, preview or not.
- **Configured but off** — nothing is shown and visitors are redirected
  immediately. The dashboard flags this rather than failing silently.

:::caution[Copy Link takes precedence on iOS]
The copy link screen and the app preview are alternatives, and the copy link one
is shown first. With **Copy Link** enabled, only Android visitors see the app
preview. Turn Copy Link off to show it on iOS too.
:::

### Built from a template

The default source is a form, so no markup is needed:

| Field          | Limit           |
| -------------- | --------------- |
| Headline       | 80 characters   |
| Body           | 280 characters  |
| App icon URL   | 2048 characters |
| Button text    | 64 characters   |
| Background, text and button colors | hex |

### Built from custom HTML

On **Scale and Enterprise** the page can be raw HTML instead, with the same
[limits](#limits-and-security) as the other two pages. The Continue button is
always injected by Detour, and you only choose where it goes:

| Marker                 | Result                                                 |
| ---------------------- | ------------------------------------------------------ |
| `{{CTA}}`              | The button is rendered in its place and flows with your layout. |
| `id="detour-cta"`      | The element is replaced whole by the button.           |
| neither                | The button is appended as a fixed overlay pinned to the bottom of the page. |

Its color and label come from the same **Button text** and **Button** color
fields as the template, so they stay configurable without editing markup.

:::note[Plan downgrades]
A plan that no longer includes custom HTML keeps the saved markup untouched but
stops serving it. Visitors are served the template instead, and the HTML starts
rendering again after an upgrade. With no template filled in, no app preview is
shown at all.
:::

---

## Limits and security

All three pages are subject to the same rules, which limit their size and the resources they may load:

- **Size** — the HTML must not exceed **50 KB** (51,200 characters).
- **Scripts** — `<script>` tags and inline JavaScript (`onload`, `onclick`, and the rest) are blocked.
- **Media** — images, fonts, and external stylesheets must be hosted on an HTTPS server of your own (a CDN, for example) and referenced by absolute URL.

## Support

:::tip[Need help?]
Support is available on the [Detour Discord server](https://discord.gg/tj7uFuymne) and through the [contact form](https://detour.swmansion.com/#contact).
:::