# Styled JavaScript mount (/docs/embeds/styled-mount)



The styled mount renders a complete step-by-step form in a Shadow DOM. Pollaris owns the interaction and validation, while you control a documented set of theme values.

## Browser/CDN setup [#browsercdn-setup]

```html
<div id="pollaris-form"></div>

<script type="module">
  import { mountPollarisForm } from 'https://cdn.example.com/embed/v1/index.js';

  const mounted = mountPollarisForm('#pollaris-form', {
    form: 'FORM_SLUG',
    apiBase: 'https://api.example.com',
    theme: {
      brand: '#6d28d9',
      text: '#18181b',
      background: '#ffffff',
      border: '#d4d4d8',
      radius: '12px',
      fontFamily: 'Inter, system-ui, sans-serif'
    }
  });

  document.querySelector('#pollaris-form').addEventListener(
    'pollaris:complete',
    (event) => console.log('Completed', event.detail.responseId)
  );

  // For a single-page app, call mounted.destroy() before removing the host.
</script>
```

When the SDK and API share an origin, `apiBase` can be omitted. Include it for the usual cross-origin CDN/site setup.

## npm setup [#npm-setup]

If `@pollaris/embed` is available from your deployment's package registry:

```bash
npm install @pollaris/embed
```

```js
import { mountPollarisForm } from '@pollaris/embed/mount';

const mounted = mountPollarisForm('#pollaris-form', {
  form: 'FORM_SLUG',
  apiBase: 'https://api.example.com',
  redirect: 'manual'
});
```

## Options [#options]

| Option      | Default                        | Meaning                                                  |
| ----------- | ------------------------------ | -------------------------------------------------------- |
| `form`      | Required                       | Published form slug                                      |
| `apiBase`   | Current origin                 | Public Pollaris API origin                               |
| `timeoutMs` | `10000`                        | Request timeout in milliseconds                          |
| `storage`   | Browser storage when available | Custom storage adapter, or `null` to disable persistence |
| `redirect`  | `manual`                       | Use `auto` to follow a configured completion redirect    |
| `theme`     | Pollaris defaults              | Theme-token overrides shown above                        |

The mount emits `pollaris:complete` and `pollaris:error` DOM events. Event payloads contain lifecycle metadata, not answers.

## Lifecycle cleanup [#lifecycle-cleanup]

In React, Vue, or another SPA, keep the object returned by `mountPollarisForm` and call `destroy()` when the component unmounts. It removes listeners, aborts active requests, destroys the client, and clears rendered content.