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

# Modals Customisation

> Steps showing how to customize the highlight theme and logo of the Modal created by the SDK

## Visual Customisation Theme

```ts theme={null}
GatewayEmbeddedSignup.init({
  publishableKey: 'pb_…',
  theme: GatewayTheme.Purple,  // GatewayTheme.Blue (default) | Orange | Purple
});
```

The theme sets the colour of modal buttons and the selected-card border.

<Columns cols={2}>
  <Column>
    <img src="https://mintcdn.com/connexease/yXEdx5xKxyPvzhNf/images/Ekran-Resmi-2026-06-08-16.08.40.png?fit=max&auto=format&n=yXEdx5xKxyPvzhNf&q=85&s=d0d500d10de1127ceb968837a93546dd" alt="Ekran Resmi 2026 06 08 16 08 40" className="rounded-lg border" title="Ekran Resmi 2026 06 08 16 08 40" style={{ width:"49%" }} width="1952" height="1164" data-path="images/Ekran-Resmi-2026-06-08-16.08.40.png" />
  </Column>

  <Column>
    <img src="https://mintcdn.com/connexease/yXEdx5xKxyPvzhNf/images/Ekran-Resmi-2026-06-09-11.51.48.png?fit=max&auto=format&n=yXEdx5xKxyPvzhNf&q=85&s=4f8086ffc3449c3ac32f63a581556e44" alt="Ekran Resmi 2026 06 08 16 08 40" className="rounded-lg border" title="Ekran Resmi 2026 06 08 16 08 40" style={{ width:"49%" }} width="0" height="31993" data-path="images/Ekran-Resmi-2026-06-09-11.51.48.png" />
  </Column>
</Columns>

### Logo

```ts theme={null}
GatewayEmbeddedSignup.init({
  publishableKey: 'pb_…',
  logoUrl: 'https://yourapp.com/logo.png',  // top-left of the connection-type modal
});
```

| `logoUrl` value               | Result                        |
| ----------------------------- | ----------------------------- |
| omitted / `undefined`         | Connexease logo               |
| `'https://…'` or `'http://…'` | Your logo                     |
| whitespace-only (`' '`)       | No logo                       |
| any non-`http(s)` value       | Falls back to Connexease logo |

**Custom** `logoUrl`**vs. a Default Connexease logo:**

<Columns cols={2}>
  <Column>
    <Frame>
      <img src="https://mintcdn.com/connexease/yXEdx5xKxyPvzhNf/images/image.png?fit=max&auto=format&n=yXEdx5xKxyPvzhNf&q=85&s=a6028bd37968ec688ef0cdea3ee499f6" alt="Image" width="1910" height="1126" data-path="images/image.png" />
    </Frame>
  </Column>
</Columns>

<Warning>
  **Heads-up:** the logo is loaded by the browser as a normal `<img>`. If your image host has hotlink protection or restrictive CORS/`Referer` rules, the logo may load on one domain but break on another. Host the logo somewhere that allows cross-origin embedding (your own domain or a public CDN).
</Warning>