Embedding Workflows

Embedding a Buildorado workflow lets your users fill out forms, make payments, and trigger automations without ever leaving your website. Instead of redirecting visitors to a separate Buildorado-hosted page, the form appears inline on your page as a seamless part of the user experience. This guide covers every embedding method in detail — iframe basics, responsive and auto-resizing embeds, custom domains, pre-filling fields, post-submission redirects, branding removal, platform-specific instructions, and a React component for JavaScript applications.

Before embedding, make sure your workflow is published. Only published workflows can be embedded. Click the Publish button in the visual builder to go live.

Basic iFrame Embed

The simplest way to embed a Buildorado workflow is with an HTML iframe. Copy the following snippet and replace YOUR_WORKFLOW_ID with your actual workflow ID (visible in the dashboard URL bar when editing a workflow):

<iframe
  src="https://buildorado.io/f/YOUR_WORKFLOW_ID"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; border-radius: 8px;"
  title="Contact Form"
  loading="lazy"
></iframe>

This renders the form in a 600px-tall frame that fills the width of its parent container. The title attribute improves accessibility for screen readers, and loading="lazy" defers loading until the iframe is close to the viewport, which improves page performance.

Choosing the Right Height

The ideal height depends on the number of fields in your form. Here are recommended starting points:

If the form content exceeds the iframe height, a scrollbar appears inside the iframe. To avoid inner scrollbars, use the auto-resize method below.

Responsive iFrame Embed

Make the iframe responsive so it looks good on both desktop and mobile devices. Wrap the iframe in a container with a max-width and center it:

<div style="position: relative; width: 100%; max-width: 640px; margin: 0 auto;">
  <iframe
    src="https://buildorado.io/f/YOUR_WORKFLOW_ID"
    width="100%"
    height="700"
    frameborder="0"
    style="border: none; border-radius: 8px;"
    title="Contact Form"
  ></iframe>
</div>

For a fully fluid embed that scales proportionally, use the aspect-ratio CSS approach:

<div style="max-width: 640px; margin: 0 auto;">
  <div style="position: relative; width: 100%; aspect-ratio: 4/5; min-height: 400px;">
    <iframe
      src="https://buildorado.io/f/YOUR_WORKFLOW_ID"
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 8px;"
      title="Contact Form"
    ></iframe>
  </div>
</div>

Auto-Resizing iFrame

Buildorado publishes a postMessage event whenever the form content height changes (e.g., when conditional fields appear or the user advances to the next step). Listen for this message and adjust the iframe height dynamically to eliminate inner scrollbars:

<iframe
  id="buildorado-form"
  src="https://buildorado.io/f/YOUR_WORKFLOW_ID"
  width="100%"
  frameborder="0"
  style="border: none; border-radius: 8px;"
  title="Contact Form"
></iframe>

<script>
  window.addEventListener('message', function(event) {
    if (event.origin !== 'https://buildorado.io') return;

    if (event.data.type === 'buildorado:resize') {
      const iframe = document.getElementById('buildorado-form');
      iframe.style.height = event.data.height + 'px';
    }

    if (event.data.type === 'buildorado:submitted') {
      // Optional: handle form submission (e.g., track conversion)
      console.log('Form submitted:', event.data.submissionId);
    }
  });
</script>

The buildorado:resize message includes a height property (in pixels) representing the current content height. The buildorado:submitted message fires after the user completes the form and includes the submissionId.

Custom Domains

Custom domains let you serve workflows from your own domain (e.g., forms.yourcompany.com) instead of the default buildorado.io URL. This provides a branded, professional experience for your users. Custom domains are available on paid plans.

Step 1: Add the Domain

1. Go to Settings > Custom Domains in the Buildorado dashboard.
2. Enter your desired subdomain (e.g., forms.yourcompany.com).
3. Click Add Domain.

Step 2: Configure DNS (CNAME Record)

Add a CNAME record with your DNS provider:

Common DNS providers and where to add records:

• Cloudflare: DNS > Records > Add Record
• GoDaddy: DNS Management > Add New Record
• Namecheap: Advanced DNS > Add New Record
• Route 53: Hosted Zones > Create Record

Step 3: Wait for DNS Propagation

DNS changes can take up to 48 hours to propagate globally, though most updates take effect within 1-2 hours. You can check propagation status at dnschecker.org.

Step 4: SSL Provisioning

Buildorado automatically provisions and renews an SSL certificate for your custom domain using Let's Encrypt. This happens within a few minutes after DNS propagation completes. No manual configuration is needed.

Step 5: Use Your Custom Domain

Once configured, your workflows are accessible at:

https://forms.yourcompany.com/f/YOUR_WORKFLOW_ID

Update your iframe embed src to use the custom domain URL. All existing links to the buildorado.io URL continue to work.

Styling the Embed

Theme Matching

Customize the form's visual appearance to match your website's design:

1. Open your workflow in the builder.
2. Go to Settings > Theme.
3. Set the brand color, font family, border radius, and background color.
4. Preview changes in real time.

Transparent Background

To make the form blend seamlessly into your page, set the form background to transparent:

1. In Settings > Theme, set Background to transparent.
2. The iframe inherits the visual background of your page.

Dark Mode

Buildorado forms support dark mode. Enable it in Settings > Theme > Color Mode and set it to dark or auto (follows the user's system preference).

Pre-Filling Fields via URL Parameters

Pass data to the form by adding query parameters to the URL. Field keys are visible in the form builder under each field's settings. This is useful for personalizing the form with data you already know about the user:

https://buildorado.io/f/[email protected]&name=Jane+Doe&company=Acme

Iframe Embed with Pre-Filled Fields

<iframe
  src="https://buildorado.io/f/[email protected]&name=Jane+Doe"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
  title="Contact Form"
></iframe>

Dynamic Pre-Filling with JavaScript

const formUrl = new URL('https://buildorado.io/f/YOUR_WORKFLOW_ID');
formUrl.searchParams.set('email', currentUser.email);
formUrl.searchParams.set('name', currentUser.name);

const iframe = document.getElementById('buildorado-form');
iframe.src = formUrl.toString();

Supported Field Types for Pre-Filling

Hidden fields are especially useful for tracking UTM parameters, campaign IDs, referrer URLs, and other metadata that you want to capture without showing a visible field.

Post-Submission Redirects

After a user completes the form, you can redirect them to a custom URL:

1. Open your workflow in the builder.
2. Go to Settings > Completion.
3. Set After Submission to Redirect to URL.
4. Enter the redirect URL (e.g., https://yoursite.com/thank-you).

You can include submission data in the redirect URL using template variables:

https://yoursite.com/thank-you?email={{email}}&name={{name}}

Buildorado replaces {{email}} and {{name}} with the submitted values before redirecting.

Redirect with Parent Window Navigation

When the form is embedded in an iframe, the redirect happens inside the iframe by default. To redirect the parent window (the entire page), enable Redirect parent window in the completion settings. This uses window.parent.location.href to navigate the top-level page.

Removing Branding

On paid plans, you can remove the "Powered by Buildorado" badge from your forms:

1. Open your workflow in the builder.
2. Go to Settings > Branding.
3. Toggle off Show Buildorado branding.

This creates a completely white-labeled experience, especially when combined with a custom domain and matched theme colors.

Platform-Specific Instructions

WordPress

Option 1: HTML Block

1. Open the page editor in WordPress.
2. Add a Custom HTML block.
3. Paste the iframe embed code.
4. Publish or update the page.

Option 2: Shortcode (with a simple plugin)

Add this to your theme's functions.php or a custom plugin:

function buildorado_form_shortcode($atts) {
    $atts = shortcode_atts(array(
        'id' => '',
        'height' => '600',
    ), $atts);

    if (empty($atts['id'])) return '';

    return sprintf(
        '<iframe src="https://buildorado.io/f/%s" width="100%%" height="%s" frameborder="0" style="border: none; border-radius: 8px;" title="Form" loading="lazy"></iframe>',
        esc_attr($atts['id']),
        esc_attr($atts['height'])
    );
}
add_shortcode('buildorado', 'buildorado_form_shortcode');

Then use the shortcode in any post or page:

[buildorado id="YOUR_WORKFLOW_ID" height="700"]

Webflow

1. Open your page in the Webflow Designer.
2. Add an Embed element from the Components panel.
3. Paste the iframe embed code into the code editor.
4. Adjust the wrapper element's width and padding as needed.
5. Publish the site.

Tip: Wrap the embed element in a container with max-width: 640px and margin: 0 auto for centered, responsive forms.

Squarespace

1. Open the page editor in Squarespace.
2. Add a Code block (available on Business plan and above).
3. Paste the iframe embed code.
4. Click Apply and save the page.

Squarespace code blocks do not support JavaScript, so the auto-resize method will not work. Use a fixed height that accommodates your form.

React Component Example

If you are building a React application, use this component to embed Buildorado forms with auto-resizing and event handling:

import { useEffect, useRef, useState } from 'react';

function BuildoradoForm({ workflowId, prefill = {}, onSubmit, height = 600 }) {
  const iframeRef = useRef(null);
  const [dynamicHeight, setDynamicHeight] = useState(height);

  // Build the source URL with optional pre-fill parameters
  const src = (() => {
    const url = new URL(`https://buildorado.io/f/${workflowId}`);
    Object.entries(prefill).forEach(([key, value]) => {
      url.searchParams.set(key, String(value));
    });
    return url.toString();
  })();

  useEffect(() => {
    function handleMessage(event) {
      if (event.origin !== 'https://buildorado.io') return;

      if (event.data.type === 'buildorado:resize') {
        setDynamicHeight(event.data.height);
      }

      if (event.data.type === 'buildorado:submitted' && onSubmit) {
        onSubmit(event.data.submissionId);
      }
    }

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, [onSubmit]);

  return (
    <iframe
      ref={iframeRef}
      src={src}
      width="100%"
      height={dynamicHeight}
      frameBorder="0"
      style={{ border: 'none', borderRadius: '8px' }}
      title="Buildorado Form"
      loading="lazy"
    />
  );
}

// Usage
function App() {
  return (
    <BuildoradoForm
      workflowId="YOUR_WORKFLOW_ID"
      prefill={{ email: '[email protected]', name: 'Jane Doe' }}
      onSubmit={(id) => console.log('Submitted:', id)}
    />
  );
}

Troubleshooting Common Embed Issues

The iframe shows a blank page

• Verify the workflow is published. Draft workflows cannot be rendered in embeds.
• Check that the workflow ID in the URL is correct.
• Open the iframe URL directly in a new browser tab to test if the form loads.

The form does not fit the iframe height

• Increase the iframe height attribute or use the auto-resize method.
• For multi-step forms, set the height to accommodate the tallest step.

Cross-origin errors in the browser console

• This is normal for iframes. The postMessage API is used for safe cross-origin communication. Make sure you check event.origin === 'https://buildorado.io' in your message handler.
• If using a custom domain, check event.origin against your custom domain URL instead.

Custom domain not working

• Verify the CNAME record is correctly configured using dnschecker.org.
• Allow up to 48 hours for DNS propagation.
• Ensure the CNAME points to custom.buildorado.io (not buildorado.io).
• Check that SSL provisioning has completed in Settings > Custom Domains.

Form loads slowly on mobile

• Add loading="lazy" to the iframe to defer loading until the form is near the viewport.
• Reduce the number of fields per step if using a multi-step form.
• Test on a real device rather than browser DevTools, which simulates network throttling differently.

Pre-filled values are not appearing

• Ensure the URL parameter keys match the field keys in the builder exactly (case-sensitive).
• URL-encode special characters: spaces become + or %20, ampersands become %26.
• Check that the field is not hidden by a conditional visibility rule.

Related Documentation

• Form Builder — Configure fields, validation, and themes
• Installation and Embedding — Additional deployment options
• Templates — Start from a pre-built workflow
• Webhooks — Send and receive HTTP callbacks

Frequently Asked Questions

Can I embed multiple Buildorado forms on the same page?

Yes. Add multiple iframes, each with a different workflow ID. The auto-resize script works with multiple iframes as long as each has a unique id attribute. Be mindful of page performance — each iframe loads independently. For pages with many forms, consider lazy loading with loading="lazy".

Does embedding work with single-page applications (React, Vue, Angular)?

Yes. Use the iframe approach with any SPA framework. The React component example above shows how to handle auto-resizing and submission events. For Vue and Angular, the approach is similar — listen for postMessage events and update the iframe height reactively.

Can I customize the submit button text in an embedded form?

Yes. The submit button text is configured in the form builder under Settings > Completion > Submit Button Text. This setting applies to both hosted and embedded forms. You can set different text for each step in a multi-step form.

Is there a JavaScript SDK for embedding instead of iframes?

Currently, iframes are the supported embedding method. They provide the strongest security boundary (sandboxing) and work across all browsers and platforms without additional dependencies. A lightweight JavaScript SDK is planned for a future release and will offer additional features like programmatic control and deeper styling integration.