Buildorado
Sign In

Installation & Embedding

How to embed Buildorado workflows in your website or application.

Buildorado is a fully hosted platform — there is nothing to install on your server. You build workflows in the browser and make them available to users through direct links, iframe embeds, custom domains, or the REST API. This guide covers every method for embedding and integrating Buildorado workflows into your website or application, including code examples for HTML, React, WordPress, and programmatic API access.

If you have not created a workflow yet, start with the Quick Start guide to build and publish your first form in under five minutes.

Every published workflow gets a unique URL that you can share directly. This is the simplest way to collect responses — no embedding or coding required.

https://buildorado.io/f/your-workflow-id

You can find this link by opening your workflow in the builder and clicking Publish, or from the Dashboard by clicking the share icon next to any published workflow. The link works on any device and browser. Users see a clean, full-page form experience with your configured theme and branding.

Direct links are ideal for sharing via email, SMS, social media, QR codes, or messaging apps. If you need to embed the workflow inside an existing page on your website, use one of the embedding methods below.

Embedding Workflows with an iFrame

The most common embedding method is an HTML iframe. This places your workflow inside any web page while keeping it fully interactive. The iframe loads the same responsive form experience users would see at the direct link.

Basic iFrame Embed

Copy and paste this code into your HTML page, replacing YOUR_WORKFLOW_ID with your actual workflow ID:

<iframe
  src="https://buildorado.io/f/YOUR_WORKFLOW_ID"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
  title="Buildorado Form"
></iframe>

The title attribute improves accessibility for screen readers. The frameborder="0" and border: none style ensure the iframe blends seamlessly into your page.

Responsive iFrame Embed

For a centered, responsive embed that looks great on both desktop and mobile, wrap the iframe in a container:

<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; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"
    title="Buildorado Form"
  ></iframe>
</div>

Adjust max-width to control how wide the form appears on larger screens. The border-radius and box-shadow give the embed a card-like appearance that integrates well with most website designs.

Auto-Resizing iFrame

If your form has a variable number of steps or fields that change based on conditional logic, a fixed height may cut off content or leave too much empty space. Use this script to auto-resize the iframe based on its content:

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

<script>
  window.addEventListener('message', function(event) {
    if (event.origin !== 'https://buildorado.io') return;
    if (event.data && event.data.type === 'buildorado:resize') {
      document.getElementById('buildorado-form').style.height = event.data.height + 'px';
    }
  });
</script>

The iframe sends a postMessage event whenever its content height changes, and the script adjusts the iframe height accordingly. This ensures the form always fits its content without scrollbars inside the iframe.

Styling the iFrame Container

You can further customize the embed appearance using CSS on the wrapper element. The form inside the iframe inherits the theme you configured in the form builder, but the container around it is fully under your control:

<div style="
  max-width: 720px;
  margin: 2rem auto;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
">
  <iframe
    src="https://buildorado.io/f/YOUR_WORKFLOW_ID"
    width="100%"
    height="650"
    frameborder="0"
    style="border: none; border-radius: 8px;"
    title="Buildorado Form"
  ></iframe>
</div>

Custom Domain Setup (CNAME)

On paid plans, you can serve workflows from your own domain instead of buildorado.io. This means users see URLs like https://forms.yourcompany.com/f/WORKFLOW_ID, which builds trust and reinforces your brand.

Step-by-Step CNAME Configuration

  1. Choose a subdomain — Pick a subdomain like forms.yourcompany.com or apply.yourcompany.com. You cannot use your root domain (e.g., yourcompany.com) because CNAME records do not work on root domains.

  2. Add the CNAME record — Log in to your DNS provider (Cloudflare, Route 53, GoDaddy, Namecheap, etc.) and create a CNAME record:

    • Host / Name: forms (or your chosen subdomain prefix)
    • Value / Target: custom.buildorado.io
    • TTL: 300 (or your provider's default)

  3. Register in Buildorado — Go to Settings > Custom Domains in your Buildorado dashboard. Enter the full subdomain (e.g., forms.yourcompany.com) and click Add Domain.

  4. Wait for DNS propagation — DNS changes can take anywhere from a few minutes to 48 hours to propagate globally. Buildorado automatically checks for the CNAME record and shows a green checkmark when it detects the correct configuration.

  5. SSL provisioning — Once the CNAME is verified, Buildorado automatically provisions a free SSL certificate for your subdomain. HTTPS is enforced by default, so all traffic is encrypted.

After setup, your workflows are accessible at both the buildorado.io URL and your custom domain URL. Iframe embeds and direct links both work with your custom domain.

DNS Provider Examples

Cloudflare:

  • Go to DNS > Records > Add Record
  • Type: CNAME, Name: forms, Target: custom.buildorado.io
  • Proxy status: DNS only (turn off the orange cloud)

AWS Route 53:

  • Go to Hosted Zones > your domain > Create Record
  • Record name: forms, Record type: CNAME, Value: custom.buildorado.io

GoDaddy:

  • Go to DNS Management > Add > CNAME
  • Host: forms, Points to: custom.buildorado.io

Namecheap:

  • Go to Advanced DNS > Add New Record > CNAME
  • Host: forms, Value: custom.buildorado.io

JavaScript Embed

For more control over loading and interaction, you can embed workflows using JavaScript. This approach lets you listen for form events, dynamically load forms, and control the embed lifecycle programmatically.

<div id="buildorado-container"></div>

<script>
  (function() {
    var iframe = document.createElement('iframe');
    iframe.src = 'https://buildorado.io/f/YOUR_WORKFLOW_ID';
    iframe.width = '100%';
    iframe.height = '650';
    iframe.frameBorder = '0';
    iframe.style.border = 'none';
    iframe.title = 'Buildorado Form';
    document.getElementById('buildorado-container').appendChild(iframe);

    // Listen for submission events
    window.addEventListener('message', function(event) {
      if (event.origin !== 'https://buildorado.io') return;
      if (event.data && event.data.type === 'buildorado:submitted') {
        console.log('Form submitted:', event.data.submissionId);
        // Trigger your own analytics, redirects, or UI updates here
      }
    });
  })();
</script>

This approach lets you conditionally load the form (for example, only after a button click), track submission events in your analytics platform, or swap out the form dynamically without a page reload.

React Embed

If your application is built with React (or Next.js, Remix, or any React-based framework), you can create a reusable component for embedding Buildorado workflows:

import { useEffect, useRef } from 'react';

interface BuildoradoFormProps {
  workflowId: string;
  height?: number;
  onSubmit?: (submissionId: string) => void;
}

export function BuildoradoForm({ workflowId, height = 650, onSubmit }: BuildoradoFormProps) {
  const iframeRef = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    function handleMessage(event: MessageEvent) {
      if (event.origin !== 'https://buildorado.io') return;
      if (event.data?.type === 'buildorado:submitted' && onSubmit) {
        onSubmit(event.data.submissionId);
      }
      if (event.data?.type === 'buildorado:resize' && iframeRef.current) {
        iframeRef.current.style.height = event.data.height + 'px';
      }
    }

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

  return (
    <iframe
      ref={iframeRef}
      src={`https://buildorado.io/f/${workflowId}`}
      width="100%"
      height={height}
      frameBorder="0"
      style={{ border: 'none' }}
      title="Buildorado Form"
    />
  );
}

Use the component in your pages:

<BuildoradoForm
  workflowId="your-workflow-id"
  height={700}
  onSubmit={(id) => {
    console.log('Submission received:', id);
    router.push('/thank-you');
  }}
/>

This component handles auto-resizing and submission callbacks. You can extend it to support pre-filled fields, loading states, or error boundaries as needed.

WordPress Embed

If your site runs on WordPress, you can embed Buildorado workflows in posts, pages, or widget areas.

Using the Block Editor (Gutenberg)

  1. Edit the page or post where you want the form
  2. Click the + button to add a new block
  3. Search for Custom HTML and select it
  4. Paste the iframe embed code:
<iframe
  src="https://buildorado.io/f/YOUR_WORKFLOW_ID"
  width="100%"
  height="650"
  frameborder="0"
  style="border: none;"
  title="Buildorado Form"
></iframe>
  1. Click Preview to see how it looks, then Publish

Using the Classic Editor

Switch to the Text tab (not Visual) and paste the same iframe code at the desired location in your content. The Visual tab may strip iframe attributes, so always use the Text tab for embed code.

Using a Shortcode (Advanced)

If you embed Buildorado forms on many pages, add this shortcode function to your theme's functions.php:

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

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

    return sprintf(
        '<iframe src="https://buildorado.io/f/%s" width="100%%" height="%s" frameborder="0" style="border: none;" title="Buildorado Form"></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"]

Pre-Filling Form Fields via URL Parameters

You can pre-populate form fields by passing values as URL query parameters. This is useful when you already know some information about the user — for example, from a CRM link, email campaign, or logged-in session.

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

Each parameter key corresponds to the field key of a form field (visible in the form builder when you click on a field and open its settings). Values are URL-encoded. Pre-filled fields appear with the value already entered, but users can still edit them before submitting.

Pre-filling in iFrame Embeds

The same URL parameters work in iframe embeds. Just append them to the src URL:

<iframe
  src="https://buildorado.io/f/[email protected]&plan=pro"
  width="100%"
  height="650"
  frameborder="0"
  style="border: none;"
  title="Buildorado Form"
></iframe>

Dynamic Pre-filling with JavaScript

If the pre-fill values come from your application at runtime, build the URL dynamically:

const workflowId = 'YOUR_WORKFLOW_ID';
const params = new URLSearchParams({
  email: currentUser.email,
  name: currentUser.name,
  plan: selectedPlan,
});

const iframe = document.getElementById('buildorado-form');
iframe.src = `https://buildorado.io/f/${workflowId}?${params.toString()}`;

Post-Submission Redirects

By default, users see a "Thank You" screen after completing a workflow. You can customize this behavior to redirect users to a specific URL on your website.

Configuring a Redirect URL

  1. Open your workflow in the builder
  2. Go to Settings > Completion
  3. Set the Redirect URL (e.g., https://yoursite.com/thank-you)
  4. Optionally enable Pass submission ID to append the submission ID as a query parameter

When enabled, the redirect URL receives the submission ID:

https://yoursite.com/thank-you?submissionId=abc123

This lets your thank-you page display personalized content or trigger additional client-side logic based on the submission.

Redirect from iFrame Embeds

When a workflow is embedded in an iframe, the redirect happens inside the iframe by default. If you want the redirect to navigate the parent page instead, listen for the redirect event:

<script>
  window.addEventListener('message', function(event) {
    if (event.origin !== 'https://buildorado.io') return;
    if (event.data && event.data.type === 'buildorado:redirect') {
      window.location.href = event.data.url;
    }
  });
</script>

Removing Buildorado Branding

By default, published workflows display a small "Powered by Buildorado" badge at the bottom. On paid plans, you can remove this branding for a fully white-label experience.

  1. Open your workflow in the builder
  2. Go to Settings > Branding (or Workflow Settings > Branding)
  3. Toggle off Show Buildorado branding
  4. Click Save and republish

Combined with a custom domain and your own theme colors (configured in the form builder), this gives you a fully branded form experience where users never see any reference to Buildorado.

Webhook Integration

Buildorado can send real-time webhook notifications to your server when events occur. This is a push-based alternative to polling, ideal for triggering downstream processes immediately after a submission, payment, or workflow completion. Use the Webhook Trigger node to start workflows from external events, and configure outgoing webhooks with the HTTP Request node.

For more details on webhook events, payload format, retry behavior, and signature verification, see the Webhooks documentation.

Troubleshooting Embed Issues

The iframe is blank or shows a white screen

  • Verify the workflow is published, not in Draft state. Only published workflows are accessible via the public URL.
  • Check the workflow ID in the src URL. You can find the correct ID in the builder's publish dialog or in the dashboard.
  • Check your browser console for Content Security Policy (CSP) errors. If your site has a CSP header, you need to add https://buildorado.io to the frame-src directive.

The iframe content is cut off

  • Increase the height attribute on the iframe. Multi-step forms or forms with many fields may need 700px or more.
  • Use the auto-resizing script to dynamically adjust the height based on content.

The form looks different from the builder preview

  • The iframe inherits the form's configured theme, not your website's CSS. Adjust colors, fonts, and spacing in the form builder's theme settings.
  • If you see a scrollbar inside the iframe, increase the iframe height or enable auto-resizing.

Custom domain shows a certificate error

  • Verify the CNAME record is correctly pointing to custom.buildorado.io. Use dig forms.yourcompany.com CNAME or an online DNS checker to confirm.
  • Make sure the Cloudflare proxy (orange cloud) is turned off if you are using Cloudflare. Buildorado needs to terminate SSL directly.
  • SSL provisioning can take up to 10 minutes after the CNAME is verified. Wait and refresh.

Pre-filled values are not appearing

  • Confirm the URL parameter keys match the field keys in the form builder (not the field labels). Field keys are visible in each field's settings panel.
  • Make sure values are properly URL-encoded. Use encodeURIComponent() in JavaScript or %20 for spaces in manual URLs.

Frequently Asked Questions

Which embedding method should I use?

Use direct links for sharing via email, social media, or messaging. Use iframe embeds for placing forms on web pages — this is the most common approach and works with any website, CMS, or landing page builder. Use custom domains when brand consistency matters and you want users to see your own URL. Use the API for server-to-server integrations where no browser is involved.

Does the iframe embed work on mobile devices?

Yes. The Buildorado form renderer is fully responsive and adapts to the iframe's container width. On mobile devices, fields stack vertically, buttons become full-width, and the form is touch-friendly. Set the iframe to width="100%" and it will fill the available space on any screen size. For the best mobile experience, use the auto-resizing script so the iframe height adjusts to match the content.

Can I embed multiple workflows on the same page?

Yes. Each iframe is independent, so you can embed as many workflows as you need on a single page. Give each iframe a unique id attribute if you plan to use the auto-resize script or listen for submission events, so you can distinguish between them in your JavaScript event handlers.

Can I use Buildorado with a single-page application (SPA)?

Yes. The React component works with any React-based SPA framework including Next.js, Remix, Gatsby, and Create React App. For Vue, Angular, or Svelte applications, use the JavaScript embed approach and create a wrapper component in your framework of choice. The postMessage API for resize and submission events works regardless of the parent framework.

Quick Start

Get up and running with Buildorado in under 5 minutes.

Workflows

Understanding Buildorado workflows — the visual canvas for connecting forms, logic, and actions.

On this page

Sharing Workflows via Direct LinkEmbedding Workflows with an iFrameBasic iFrame EmbedResponsive iFrame EmbedAuto-Resizing iFrameStyling the iFrame ContainerCustom Domain Setup (CNAME)Step-by-Step CNAME ConfigurationDNS Provider ExamplesJavaScript EmbedReact EmbedWordPress EmbedUsing the Block Editor (Gutenberg)Using the Classic EditorUsing a Shortcode (Advanced)Pre-Filling Form Fields via URL ParametersPre-filling in iFrame EmbedsDynamic Pre-filling with JavaScriptPost-Submission RedirectsConfiguring a Redirect URLRedirect from iFrame EmbedsRemoving Buildorado BrandingWebhook IntegrationTroubleshooting Embed IssuesThe iframe is blank or shows a white screenThe iframe content is cut offThe form looks different from the builder previewCustom domain shows a certificate errorPre-filled values are not appearingFrequently Asked QuestionsWhich embedding method should I use?Does the iframe embed work on mobile devices?Can I embed multiple workflows on the same page?Can I use Buildorado with a single-page application (SPA)?
Installation & Embedding | Buildorado