FormEmbed SDK Documentation
Embed your JSONPost forms anywhere with a simple JavaScript snippet. Choose from multiple embed types and customize the appearance to match your website.
Quick Start
Get started in seconds by adding the SDK to your HTML
<script src="https://forms.jsonpost.com/embed/v1/embed.js"></script>Embed Types
Modal Popup
Opens a centered modal dialog with your form. Perfect for capturing attention without leaving the page.
<script src="https://forms.jsonpost.com/embed/v1/embed.js"></script>
<script>
const modal = FormEmbed.createModal('your-form-id', {
theme: 'bumblebee',
width: 800,
height: 600
});
// Call modal.open() when you want to show the form
modal.open();
</script>Configuration Options
Modal Options
| Option | Type | Default | Description |
|---|---|---|---|
| theme | string | 'light' | DaisyUI theme name |
| width | number|string | 800 | Modal width (px or %) |
| height | number|string | 600 | Modal height (px or vh) |
Chatbox Options
| Option | Type | Default | Description |
|---|---|---|---|
| theme | string | 'light' | DaisyUI theme name |
| position | string | 'bottom-right' | 'bottom-right' or 'bottom-left' |
| buttonIcon | string | (default) | URL to custom icon image |
| buttonColor | string | '#3a7685' | Button background color |
| width | number|string | 400 | Window width |
| height | number|string | 600 | Window height |
Available Themes
Use any DaisyUI theme name to style your embedded forms
Complete Examples
Example 1: Modal on Button Click
Complete HTML page with a button that opens a modal form
<!DOCTYPE html>
<html>
<head>
<title>Customer Feedback</title>
</head>
<body>
<h1>Welcome to Our Site</h1>
<button id="feedback-btn">Give Feedback</button>
<script src="https://forms.jsonpost.com/embed/v1/embed.js"></script>
<script>
const modal = FormEmbed.createModal('your-form-id', {
theme: 'bumblebee',
width: 700,
height: '80vh'
});
document.getElementById('feedback-btn').onclick = () => modal.open();
</script>
</body>
</html>Example 2: Auto-Open Modal After Delay
Automatically show a form modal after a few seconds
<script src="https://forms.jsonpost.com/embed/v1/embed.js"></script>
<script>
// Open modal after 3 seconds
setTimeout(() => {
FormEmbed.createModal('your-form-id', {
theme: 'corporate',
width: '80%',
height: 600
}).open();
}, 3000);
</script>Mobile Behavior
Important: On mobile devices (width < 768px), all embed modes automatically convert to fullscreen modals. Borders and rounded corners are removed for edge-to-edge display.
API Methods
Control your embedded forms programmatically
Modal Methods
const modal = FormEmbed.createModal(formId, options);
modal.open(); // Open the modal
modal.close(); // Close the modal
modal.toggle(); // Toggle open/closed stateChatbox Methods
const chatbox = FormEmbed.createChatbox(formId, options);
chatbox.open(); // Open the chatbox window
chatbox.close(); // Close the chatbox window
chatbox.toggle(); // Toggle open/closed state
chatbox.destroy(); // Remove chatbox and button from pageBest Practices
- •Load SDK once: Include the script tag only once per page
- •Wait for DOM: Initialize embeds after DOM is ready or use
defer - •Mobile-first: Test on mobile - embeds auto-adapt to fullscreen
- •Theme consistency: Match form theme to your site design
- •Performance: Lazy load embeds (don't auto-open immediately)
- •User experience: Don't show modal immediately on page load
Troubleshooting
Form not loading?
- • Verify your form ID is correct
- • Check browser console for errors
- • Ensure the SDK script loads before your code
- • Check if your page blocks iframes (CSP headers)
Modal not centered?
- • Try percentage-based dimensions:
width: '80%' - • Check for CSS conflicts (z-index, position)
- • Verify no parent elements have
overflow: hidden
Ready to Embed Your Forms?
Start building beautiful forms with JSONPost and embed them anywhere on the web with our powerful SDK.