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

# Widget troubleshooting

> Diagnose blank embeds, inactive buttons, sizing issues, and browser security restrictions.

## The widget is blank

* Confirm the form is published and the public Share link opens directly.
* Replace `FORM_ID` and `FORM_URL`; do not leave the documentation placeholders in production.
* For `embed.js`, add `<div id="app"></div>` before the module script.
* Define `window.onlyform` before loading `embed.js`.
* Check the browser console for Content Security Policy or blocked-script errors.

## The popup or slider button does nothing

* Confirm the button has `data-button="onlyform"`.
* Confirm `data-embed-id` exactly matches `window.onlyform.id`.
* Make sure the trigger button exists before `embed.js` runs.
* Install only one `embed.js` widget on the page.

## The iframe is too short

Cross-origin iframe content cannot resize the parent with CSS alone. Set an explicit height:

```html theme={null}
<iframe
  src="https://oy.fm/FORM_ID"
  title="Contact us"
  style="width: 100%; height: 700px; border: 0;"
></iframe>
```

## The page scrolls twice

Increase the iframe height so most form content fits, or intentionally give the iframe a fixed height and let it scroll internally. For a full-viewport experience, use the full-page widget or `height: 100vh`.

## Content Security Policy

If the browser reports that it refused to load a frame or script, update the host site's policy:

```text theme={null}
script-src 'self' https://oy.fm;
frame-src https://oy.fm https://YOUR_SUBDOMAIN.oy.fm https://forms.example.com;
```

Use only the hostnames that apply to the site. A `frame-ancestors` error comes from the embedded form response and cannot be fixed through the parent page's `frame-src` directive.

## Styles changed after adding embed.js

The widget library injects its supporting CSS into the host page. If that conflicts with an existing application stylesheet, use the iframe method, which isolates form and host-page styles.

## Hidden fields are empty

* Declare the hidden-field names on the form.
* Use the exact same names in URL query parameters.
* URL-encode dynamic values.
* Replace the `xxxx` placeholders copied from Share with real values.

See [Variables and hidden fields](/schema/variables-hidden-fields) for naming and creation rules.