Skip to main content

Iframe Configuration

Configure Buildocs UI Engine when embedding forms via iframe.

Overview​

Iframe embedding provides a quick integration method that works with any technology stack. Forms are rendered in an isolated iframe and submit data via webhooks.

Embedding a Form​

Add an iframe to your page with the form URL:

<iframe
  src="https://[your-tenant-id].buildocs.com/f/{project-api-key}/{form-code}"
  width="100%"
  height="600"
  frameborder="0">
</iframe>

URL Structure​

ParameterDescription
{project-api-key}Your project's unique identifier
{form-code}The form code you want to render

Example​

<iframe
  src="https://max.buildocs.com/f/6f3fc8f2-ac4b-4321-93f9-945bc0e0b664/FORM001"
  width="100%"
  height="600"
  frameborder="0">
</iframe>

Webhook Configuration​

When using iframe mode, configure a webhook URL in your form settings to receive submission data. On form save, an API call will be sent to your configured webhook endpoint.

Setting Up Webhooks​

  1. Navigate to your form settings in the Buildocs UI Engine dashboard
  2. Configure the webhook URL endpoint
  3. Save your settings

Data Flow​

When a user saves the form:

  1. Form data is validated
  2. An API call is sent to your configured webhook URL
  3. Your server processes the submission data

CORS Configuration​

:::caution Important Your webhook endpoint must have CORS headers configured to accept requests from the form's domain. :::

Required Headers​

Your server must return appropriate CORS headers:

Access-Control-Allow-Origin: https://buildocs.com
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

What Happens Without CORS​

If CORS isn't configured on your webhook endpoint:

  • The browser will block the request
  • The form submission will fail
  • A warning message will be shown to the user

Example CORS Setup (Node.js/Express)​

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://buildocs.com');
  res.header('Access-Control-Allow-Methods', 'POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

Advantages​

  • No dependencies required
  • Works with any technology stack (HTML, PHP, WordPress, etc.)
  • Complete isolation from parent page styles
  • Simple copy-paste integration