Quick Start Guide

Get up and running with Embed Workflow in minutes.

Before You Begin

1. Go to embedworkflow.com
2. Click "Sign Up"
3. Complete the registration process
4. Access your dashboard at embedworkflow.com/app

Setting Up Your Account

1. Create a Trigger

A trigger is an event from your product that starts a workflow. When your application sends data to our API, it follows your defined schema. This data becomes available in your users' workflows.

In your dashboard:

1. Navigate to Triggers
2. Click "New Trigger"
3. Configure your trigger schema
4. Save your changes

Watch our guide on creating triggers:

2. Create an Action

Actions are pre-configured business processes your users can automate. They abstract away technical complexity while providing powerful functionality.

In your dashboard:

1. Navigate to Actions
2. Click "New Action"
3. Configure your action
4. Save your changes

Watch our guide on creating actions:

3. Embed the Workflow Builder

Add the following to your HTML:

1
2
3
4
5
6
7
8
9
10
11
12
<!-- Load Embed Workflow -->
<script>
!function(){var e=window.EWF=window.EWF||{};if(!e.invoked){e.invoked=!0,e.queue=[],e.load=function(){e.queue.push(arguments)}}}();
</script>
<script src="https://cdn.ewf.to/ewf-loader.js" async></script>

<!-- Container for the workflow builder -->
<div class="EWF__app" data-base-path="workflows"></div>

<script type="text/javascript">
  EWF.load("YOUR_PUBLIC_KEY", { jwt: "YOUR_JWT" });
</script>

The first script sets up a queue so you can call EWF.load() immediately. The loader then fetches the latest version and injects the required CSS and JavaScript. Find your API keys at Account Settings.

Authentication

You can authenticate using either a userToken or jwt.

For JWT authentication, generate a token with these required fields:

• sub: User Key (your user's unique indentifer)
• iat: Current Time
• exp: Future Time

Optional fields:

• discover: Enable auto-discovery of users (true/false)
• email: User's email address
• user_data: Key-value pairs for user-specific data (recommended to use User Upsert API instead)

Configure Your Routes

Configure your application to handle all paths under your workflow base path. For example, if you use /workflows as your base path, direct all /workflows/* requests to your embedded workflow page.

Express.js:

1
2
3
app.get("/workflows*", (req, res) => {
  res.render(__dirname + "/public/workflows.html");
});

Rails:

1
2
get "workflows", to: "home#some_example"
get "workflows/*path", to: "home#some_example"

Vue Router:

1
2
3
4
{
  path: '/workflows/:pathMatch(.*)*',
  component: WorkflowPage
}

Next.js:

Check out our sample Next.js application for a complete implementation example.

Want to customize the look and feel? See our Customizing Styles guide to match your brand.

4. Import Configuration (Optional)

Speed up your setup by importing pre-configured workflows, triggers, and actions. See our Import Configuration Guide for details.

Next Steps

• Customize Styles - Match your brand's look and feel
• Import Configuration - Speed up setup with pre-configured templates
• Read our API Reference - Explore the full API

Need Help?

• Schedule a Demo
• Request a dedicated Slack channel for direct collaboration with our team