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

# Customise the verifyngo challenge page look and feel

> Change the logo, colours, font, and the text shown on the CAPTCHA challenge page so it matches your website brand and feels familiar.

verifyngo serves its own challenge page when it needs to verify a visitor. You can customise every visual aspect of that page — logo, background colour, accent colour, font, and the descriptive text — to match your website's brand. All branding options live under the `branding` key in your config file and take effect immediately on the next restart.

## Configuration

Add a `branding` block to your config file and set whichever fields you want to override. Any field you omit falls back to the default.

```json theme={null}
"branding": {
  "logo_url": "/static/logo.svg",
  "title": "My Website",
  "accent_color": "#6366f1",
  "background_color": "#0f172a",
  "text_color": "#f1f5f9",
  "font_family": "'Inter', sans-serif",
  "font_url": "https://fonts.googleapis.com/css2?family=Inter",
  "details_text": "We run a quick check to confirm you're a real visitor. It only takes a moment.",
  "contact_url": "mailto:support@example.com"
}
```

<ParamField body="logo_url" type="string">
  URL of the logo image shown at the top of the challenge card. This can be an absolute URL (`https://cdn.example.com/logo.svg`) or a path served by verifyngo itself (for example `/static/logo.svg` when you have configured `static_dir`). If omitted, no logo is displayed.
</ParamField>

<ParamField body="css_url" type="string">
  URL of a custom CSS stylesheet to load on the challenge page. Use this to make fine-grained style overrides beyond what the individual colour and font fields support. The stylesheet is loaded after verifyngo's built-in styles, so your rules take precedence.
</ParamField>

<ParamField body="accent_color" type="string" default="#4A90D9">
  Primary highlight colour applied to the challenge button and interactive elements, as a CSS hex value. Changing this is usually enough to make the page feel on-brand without touching anything else.
</ParamField>

<ParamField body="background_color" type="string" default="#000000">
  Page background colour as a CSS hex value. The challenge card sits on top of this colour, so choose something that provides enough contrast for the card to stand out.
</ParamField>

<ParamField body="text_color" type="string" default="#f2f2f2">
  Body text colour as a CSS hex value. Applied to the heading and paragraph text on the challenge card.
</ParamField>

<ParamField body="font_family" type="string" default="sans-serif">
  CSS `font-family` value used throughout the challenge page. If you are loading a web font via `font_url`, reference it here — for example `"'Inter', sans-serif"`. The system sans-serif stack is used when this field is omitted.
</ParamField>

<ParamField body="font_url" type="string">
  URL of a stylesheet that loads your chosen web font, for example a Google Fonts CSS URL. verifyngo injects this as a stylesheet link in the head of the challenge page. If omitted, no external font is loaded.
</ParamField>

<ParamField body="title" type="string">
  The site name displayed in the challenge page heading. Use your product or company name so visitors recognise where the check is coming from. If omitted, no title text is shown.
</ParamField>

<ParamField body="details_text" type="string">
  Explanatory paragraph shown to the visitor beneath the title. Use this to reassure visitors why the check is happening and how quickly it will be over. Defaults to: *"This page runs a quick, one-time check to confirm you're a real visitor and not an automated bot. It only takes a moment, and once you've solved it you won't see this again for a while."*
</ParamField>

<ParamField body="contact_url" type="string">
  URL for a support or contact link shown at the bottom of the challenge page. A `mailto:` link is common, but you can point to any page. If omitted, no contact link is rendered.
</ParamField>

## Serving a custom logo

Set `static_dir` in your core config to a directory containing your static files. verifyngo serves everything in that directory under the `/static/` path, which you can then reference in `logo_url` and `css_url`.

```json theme={null}
{
  "static_dir": "/path/to/static",
  "branding": {
    "logo_url": "/static/logo.svg"
  }
}
```

Place your logo at `/path/to/static/logo.svg` and verifyngo will serve it at `/static/logo.svg` on every request, including the challenge page.

When running in Docker, mount your local static directory into the container as a read-only bind mount so the files are accessible at the path you configured:

```sh theme={null}
docker run \
  -v $(pwd)/static:/static:ro \
  ...
```

Then set `"static_dir": "/static"` in your config and point `logo_url` to `/static/logo.svg`.