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

# Embedding on your website

> Embed your Filla form in your website as an inline iframe, popup, fullscreen overlay, or slider.

## Embed types

Filla supports four embed styles. Choose the one that fits your page layout and user experience.

| Embed type     | Description                                                          |
| -------------- | -------------------------------------------------------------------- |
| **Standard**   | Inline iframe embedded directly in the page at a configurable size   |
| **Popup**      | Opens in a centered or bottom modal when a trigger button is clicked |
| **Fullscreen** | Takes over the entire viewport when triggered                        |
| **Slider**     | Slides in from the left or right edge of the screen                  |

## Getting the embed code

<Steps>
  <Step title="Open the Share tab">
    In the form editor, go to the **Share** tab (or find it through the share popover).
  </Step>

  <Step title="Select an embed type">
    Choose Standard, Popup, Fullscreen, or Slider.
  </Step>

  <Step title="Configure the embed options">
    Set the size, button text, colors, and other options for your chosen embed type.
  </Step>

  <Step title="Copy the code">
    Click **Copy code** and paste the snippet into your website's HTML.
  </Step>
</Steps>

## Standard embed settings

| Setting    | Description                   |
| ---------- | ----------------------------- |
| **Width**  | Width of the iframe (px or %) |
| **Height** | Height of the iframe (px)     |

Paste the `<iframe>` tag into your page where you want the form to appear.

## Popup embed settings

| Setting          | Description                              |
| ---------------- | ---------------------------------------- |
| **Button text**  | Label on the button that opens the popup |
| **Button color** | Background color of the trigger button   |
| **Button size**  | Small, medium, or large                  |
| **Position**     | Center or bottom of the viewport         |

The popup embed includes a trigger button and a script. Paste both into your page.

## Fullscreen embed settings

| Setting               | Description                                                        |
| --------------------- | ------------------------------------------------------------------ |
| **Show close button** | Show a close button so respondents can dismiss the fullscreen form |

## Slider embed settings

| Setting          | Description                            |
| ---------------- | -------------------------------------- |
| **Direction**    | Left or right side of the screen       |
| **Width**        | Width of the slider panel              |
| **Button text**  | Label on the trigger button            |
| **Button color** | Background color of the trigger button |

## Responsive behavior

The standard embed works best with a percentage width (`100%`) and a fixed height. The popup, fullscreen, and slider types are inherently responsive and adapt to the screen size automatically.

## Common questions

<AccordionGroup>
  <Accordion title="Does embedding affect how the form works?">
    No. All form features work the same in an embedded iframe. File uploads, linked record pickers, conditional logic, and automations all function normally.
  </Accordion>

  <Accordion title="Will the form look the same when embedded?">
    Yes. The embedded version shows the same styled form. Your logo, accent color, and header image all appear in the embed.
  </Accordion>

  <Accordion title="Can I embed on any website platform?">
    Yes. The embed code is standard HTML. It works on WordPress, Webflow, Squarespace, Shopify, custom HTML sites, and any platform that allows embedding HTML.
  </Accordion>

  <Accordion title="What if my page uses a Content Security Policy that blocks iframes?">
    You'll need to add `app.filla.io` to your CSP's `frame-src` directive to allow the iframe. Contact your web developer if you're unsure how to do this.
  </Accordion>
</AccordionGroup>