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 script tag to your HTML:

1
2
3
4
5
6
7
8
9
10
<!-- Load CSS / JS -->
<link rel="stylesheet" media="screen" href="https://cdn.ewf.to/ewf-REPLACE_ME_WITH_LATEST_UI_VERSION.css">
<script src="https://cdn.ewf.to/ewf-REPLACE_ME_WITH_LATEST_UI_VERSION.js"></script>

<!-- Mounted App -->
<div class="EWF__app" data-base-path="workflows"></div>

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

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:

config/routes.rb
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.

Need Help?

←What is Embed Workflow?
Overview→