# Embed hosted forms

> Show a Formclick hosted form inline, in a popup, a floating button or a slide-in panel with one HTML attribute.

Source: https://docs.formclick.io/html-forms/embed-forms

Forms built in the Formclick form builder have a public link (`/f/…`, `/c/…` for chat forms, `/v/…` for video forms). The same `formclick.min.js` script can embed them on your site. Add the script once, then mark an element with `data-fc-embed`.

_Preview: the same hosted form shown inline, as a popup, behind a floating button and as a slide-in panel. Pick a mode to preview it. Every embed is responsive, keyboard accessible and closes with Escape._

## Embed modes

**Inline**

```html
<div data-fc-embed="inline" data-fc-src="https://formclick.io/f/your-form"></div>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

**Popup**

```html
<button data-fc-embed="popup" data-fc-src="https://formclick.io/f/your-form" data-fc-size="medium">
  Contact us
</button>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

**Floating button**

```html
<div data-fc-embed="floating"
     data-fc-src="https://formclick.io/f/your-form"
     data-fc-label="Talk to us"
     data-fc-position="bottom-right"
     data-fc-color="#645cec"></div>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

**Slide-in**

```html
<div data-fc-embed="slider"
     data-fc-src="https://formclick.io/f/your-form"
     data-fc-side="right"
     data-fc-color="#645cec"></div>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

**Full page**

```html
<div data-fc-embed="fullpage" data-fc-src="https://formclick.io/f/your-form" style="height:100vh"></div>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

**Load / exit popup**

```html
<!-- Opens 5 seconds after the page loads, once per visitor -->
<div data-fc-embed="popup" data-fc-src="https://formclick.io/f/your-form"
     data-fc-open="load" data-fc-delay="5" data-fc-once="true"></div>

<!-- Opens when the visitor moves to leave the page -->
<div data-fc-embed="popup" data-fc-src="https://formclick.io/f/your-form"
     data-fc-open="exit" data-fc-once="true"></div>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

## Attributes

| Attribute | Values | Used by |
| --- | --- | --- |
| `data-fc-embed` | `inline` · `popup` · `button` · `floating` · `slider` · `fullpage` | All |
| `data-fc-src` | Public form URL (`/f/…`, `/c/…`, `/v/…`) | All |
| `data-fc-height` | Height in px (default `600`) | Inline |
| `data-fc-auto-resize` | `false` to keep a fixed height (default: grows with the form) | Inline |
| `data-fc-size` | `small` · `medium` · `large` | Popup, button |
| `data-fc-open` | `click` (default) · `load` · `exit` | Popup |
| `data-fc-delay` | Seconds before a `load` popup opens | Popup |
| `data-fc-once` | `true` to show a load/exit popup only once per visitor | Popup |
| `data-fc-label` | Button text (default “Talk to us”) | Floating |
| `data-fc-position` | `bottom-right` · `bottom-left` | Floating |
| `data-fc-side` | `right` · `left` · `bottom` | Slide-in |
| `data-fc-color` | Hex colour for the button or launcher, e.g. `#645cec` | Floating, slide-in |