Embedding Workflows in Your Application

Bring automation to your users. Embed workflow forms, triggers, and management interfaces directly in your web application. White-label ready.

Get StartedAPI Docs
10 min readIntermediateLast updated: December 2024

Choose Your Embedding Method

Multiple ways to integrate workflows into your application.

Simple

Embed Forms

Embed workflow trigger forms directly in your pages. Users fill out the form, which triggers your workflow automatically.

Best for: Lead capture, support requests, data collection

Moderate

JavaScript SDK

Use our lightweight SDK to trigger workflows programmatically from your frontend code with full type safety.

Best for: Custom UI, complex interactions, SPA integration

Simple

iFrame Embed

Embed full workflow interfaces in an iframe. Perfect for dashboards and admin panels.

Best for: Workflow management, execution monitoring

Advanced

REST API

Trigger and manage workflows from your backend using our REST API. Full programmatic control.

Best for: Server-side triggers, backend automation

Code Examples

Copy these examples to get started quickly.

Form Embed (HTML)

index.html
<!-- Embed a workflow form -->
<script src="https://cdn.workflowbuilder.io/embed.js"></script>
<div
  id="workflow-form"
  data-workflow-id="wf_abc123"
  data-theme="light"
  data-submit-text="Submit Request"
></div>

<script>
  WorkflowBuilder.init({
    container: '#workflow-form',
    onSubmit: (data) => {
      console.log('Form submitted:', data);
    },
    onSuccess: (result) => {
      console.log('Workflow completed:', result);
    },
    onError: (error) => {
      console.error('Workflow failed:', error);
    }
  });
</script>

JavaScript SDK

workflow.ts
// Install: npm install @workflowbuilder/sdk
import { WorkflowClient } from '@workflowbuilder/sdk';

// Initialize client
const client = new WorkflowClient({
  apiKey: process.env.WORKFLOW_API_KEY,
});

// Trigger a workflow
async function handleUserAction(userData) {
  const result = await client.workflows.trigger({
    workflowId: 'wf_abc123',
    data: {
      userId: userData.id,
      action: 'signup',
      timestamp: new Date().toISOString(),
    },
  });

  return result;
}

// Check workflow status
async function checkStatus(executionId) {
  const status = await client.executions.get(executionId);
  return status;
}

Customization Options

Make embedded workflows match your brand perfectly.

Theme Customization

Match your brand with custom colors, fonts, and styling

  • Primary/secondary color override
  • Font family selection
  • Border radius configuration
  • Dark mode support

White Label

Remove all branding for a seamless integration

  • Remove product branding
  • Custom success messages
  • Your own error pages
  • Custom loading states

Responsive Design

Works perfectly on mobile, tablet, and desktop

  • Mobile-optimized forms
  • Touch-friendly controls
  • Adaptive layouts
  • Viewport-aware sizing

Security Features

Built-in security for safe embedding across domains.

  • Domain allowlisting to prevent unauthorized embedding
  • CORS configuration for API calls
  • API key scoping with minimal permissions
  • Rate limiting per embedded instance
  • Content Security Policy (CSP) headers
  • Secure token handling with short expiry

What's Next?

Export to Code

Export workflows as standalone TypeScript for full control

Webhook Patterns

Trigger embedded workflows from external events

Frequently Asked Questions

Common questions about embedding workflows.

Ready to Embed Workflows?

Add powerful automation to your application in minutes. Full customization, white-label ready.

Start FreeView API Docs