Widget Integration

FormLab Widget allows you to embed your forms into any website. The widget is highly customizable and supports multiple display types and launch triggers.

Installation

To add FormLab Widget to your website, simply copy and paste the provided code snippet where you want the form to appear:

<!-- FormLab Widget -->
<div id="formlab-[your-form-id]"></div>

<script
  async
  src="https://widget.formlab.ai/formlab-widget.min.js"
  data-form-id="[your-form-id]"
  data-config='{ "type": "standard" }'
></script>

Widget Types

FormLab supports four different widget types:

1. Standard - Embeds the form directly into your page

{
  "type": "standard"
}

2. Modal - Shows the form in a modal overlay

{
  "type": "modal",
  "launch": {
    "trigger": "button"
  },
  "button": {
    "text": "Open Form",
    "backgroundColor": "#0284c7",
    "textColor": "#ffffff"
  }
}

3. Popup - Displays a floating button that opens the form

{
  "type": "popup",
  "launch": {
    "trigger": "button"
  },
  "button": {
    "icon": "message-circle",
    "position": "bottom-right",
    "backgroundColor": "#0284c7",
    "textColor": "#ffffff"
  }
}

4. Full Page - Takes over the entire page

{
  "type": "full-page"
}

Launch Triggers

For Modal and Popup types, you can configure how the form is triggered:

1. Button (default) - Shows a button that opens the form when clicked
2. Page Load - Opens the form immediately when the page loads
3. Time Delay - Opens the form after a specified delay

{
  "launch": {
    "trigger": "time",
    "delay": 5000  // milliseconds
  }
}

4. Scroll Position - Opens when user scrolls to a certain percentage

{
  "launch": {
    "trigger": "scroll",
    "scrollPercentage": 50
  }
}

5. Exit Intent - Opens when the user is about to leave the page

{
  "launch": {
    "trigger": "exit",
    "exitSensitivity": 20
  }
}

Programmatic Control

For Modal and Popup types, you can control the widget programmatically:

// Open the form
window.FormLab.widgets['your-form-id'].open();

// Close the form
window.FormLab.widgets['your-form-id'].close();

// Toggle form visibility
window.FormLab.widgets['your-form-id'].toggle();

Performance

The widget script is automatically optimized for performance:

• Loads asynchronously to prevent blocking
• Prefetches form data for faster display
• Lazy loads resources as needed

Browser Support

FormLab Widget supports all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Troubleshooting

If you encounter any issues:

1. Check that your form ID is correct
2. Ensure the script is loaded properly
3. Check browser console for any errors
4. Verify your configuration syntax