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.
Choose Your Embedding Method
Multiple ways to integrate workflows into your application.
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
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
iFrame Embed
Embed full workflow interfaces in an iframe. Perfect for dashboards and admin panels.
Best for: Workflow management, execution monitoring
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)
<!-- 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
// 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
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.