# InteractiveForm Embedder
A library for embedding interactive forms and widgets on your website.
## Installation
**Recommendation:** For better performance, include the script in `` with the `async` attribute and place it before elements with data attributes.
### Via CDN (unpkg)
**UMD (recommended for CDN):**
```html
```
**ESM:**
```html
```
**Dynamic loading via JavaScript:**
```html
```
### Via npm
```bash
npm install interactiveform-embedder
```
### Via pnpm (recommended)
```bash
pnpm install interactiveform-embedder
```
## Usage
### Automatic initialization via data attributes (CDN)
After loading the script, the library automatically initializes widgets from elements with data attributes. **Data attributes are automatically removed after initialization to prevent re-initialization.**
```html
```
### Automatic initialization via ifLayer (CDN)
The library also automatically processes widgets from `window.ifLayer`:
```html
```
### Manual initialization (npm/ESM)
```ts
import { Embedder } from 'interactiveform-embedder';
// Create instance with configuration
const embedder = new Embedder({
id: 'my-form',
type: 'page-body',
container: '#form-container',
});
// Or create empty instance
const embedder = new Embedder();
// Add widgets
embedder.addWidget({
id: 'my-form',
type: 'page-body',
container: '#form-container',
});
embedder.addWidget({
id: 'my-form',
type: 'float-button',
});
embedder.addWidget({
id: 'my-form',
type: 'pop-up',
timeout: 10,
});
embedder.addWidget({
id: 'my-form',
type: 'page-body',
container: '#form-container',
iframeSrc: 'https://custom-domain.com',
});
// Remove widget
embedder.removeWidget('my-form', 'float-button');
// Reinitialize all widgets
embedder.reinitialize();
// Use singleton
const embedder = Embedder.getInstance();
```
### Inline widget without container
```html
```
## Widget Types
- **`page-body`** — embeds in specified container (can have multiple instances with the same ID)
- **`float-button`** — floating button with dropdown iframe (unique per ID)
- **`pop-up`** — modal window with delay (unique per ID, optional `timeout` in seconds, shown only once per day)
## Data Attributes
- **`data-if-id`** — unique widget identifier (required)
- **`data-if-type`** — widget type: `page-body`, `float-button`, `pop-up`
- **`data-if-timeout`** — delay for pop-up in seconds (optional)
- **`data-if-iframe-src`** — custom iframe source URL (optional, defaults to `https://if-form-staging.up.railway.app`)
**Note:** All data attributes are automatically removed after widget initialization to prevent re-initialization. This works with any HTML elements including custom tags like `` (Wix compatibility).
**Multiple instances:** You can have multiple `page-body` widgets with the same ID on the same page. Other widget types (`float-button`, `pop-up`) remain unique per ID.
**Popup behavior:** Pop-up widgets are shown only once per day per unique ID. After showing, a cookie `if-popup-{id}` is set for 1 day to prevent repeated displays.
## Widget Configuration
```ts
interface WidgetConfig {
id: string; // Unique identifier
type: 'page-body' | 'float-button' | 'pop-up';
timeout?: number; // Delay for pop-up (in seconds)
container?: string; // CSS selector for page-body
iframeSrc?: string; // Custom iframe source URL (defaults to https://if-form-staging.up.railway.app)
}
```
## Build Formats
- **UMD** — universal module for CDN and direct inclusion via `
```
````
### GTM-like approach with ifLayer
```html
````
### Programmatic creation
```ts
import { Embedder } from 'interactiveform-embedder';
const embedder = new Embedder();
embedder.addWidget({
id: 'xxxxxxxxxxxxxxxxxxxxxxxx',
type: 'page-body',
container: '#form-container',
});
```
### Inline insertion
```html
```