Node JS Demo

Adding Embed Workflow to a Node JS application is easy. We will use a Next JS project to integrate with Embed Workflow in this example.

I’ll demonstrate how to create a workflow, embed a form, update your database, and send notifications using the Embed Workflow UI component library and API.

Source code can be found here.

Prerequisites

If you’d like to follow the steps on your computer, you will need a free Embed Workflow account and a software application running locally. If you don’t have a development environment ready to use, we put together one for you.

The Task at Hand

Add a form to our application so users can manually add a new lead
Send a slack notification to the user’s configured slack channel
Send a text message to the lead
Send an email to the lead for email verification

1- Create the Workflow

The first step is to add our new lead workflow. It can be done with our admin portal embedworkflow.com, using our API, or with our UI components.

I’ll use the admin portal to create our workflow for this example.

Sign in and create a workflow.
Name it something like New Lead.
Create a form.
Build the Workflow

Workflow Actions

Create Lead

Our first action will be to create the lead by adding a webhook POSTing to the application’s host.

New Lead Action

We added five dynamic variables: {{Name}}, {{Email}}, {{Phone}}, {{user_id}}, and {{execution_hashid}}. The first three come from the form, but {{user_id}} is something we must handle differently (we will get to that soon). And execution_hashid is Embed Workflow’s unique identifier for the execution. We will use this to map our execution to the lead.

Welcome Text

If the webhook action succeeds, we will send the user a welcome text message.

Welcome Text Action

Here we only depend on two dynamic fields: {{Name}} and {{Phone}}. Phone is not a required field so if this action will fail if not provided.

Verification Email

I’ll add a verification email to go out to the new lead including a link in the email body to verify their account.

The verification process is 100% up to the host application.

Verification Email Action

Team Notification

A team notification on slack. We can accomplish this with the new dynamic field {{slack_url}}. Similar to {{user_id}}, the {{slack_url}} does not come from the form.

Team Notification

2- Embed It!

Now the fun part. Let’s embed the form in our application.

Open your code editor and find where you want to render your form. Check out documentation for the latest details. UI Form Component.

Full example here.

<link
  rel="stylesheet"
  media="screen"
  href="https://cdn.ewf.to/ewf-0034.css"
/>

<div
  className="EWF__form"
  data-id="REPLACE_ME_WITH_YOUR_FORM_ID"
></div>

We are using react, so we will need to add the external tag like so:

useEffect(() => {
  const script = document.createElement("script");
  script.src = "https://cdn.ewf.to/ewf-0034.js";
  script.onload = () => EWF.load();

  document.body.appendChild(script);
}, []);

Note: User tokens are short-lived. It’s okay for testing but check out our docs for the recommended way.

You should have a form that can render and submit. If not, refer to the documentation to ensure you have the latest version for the ewf-XXXX.(js|css) files.

Okay, we captured most of the data needed but not all of it. We still need to include slack_url and user_id, and we can’t have the user fill this out in the form, and we don’t even want this exposed to the client. How do we handle this? Execution data.

3- Add Execution Data, Privately.

Execution data provides values for the workflow’s dynamic fields not included on the form.

We want to set the user’s slack_url. We are looking for something like this:

{
  form_data: {
    first_name: "...",
    ...
  },
  execution_data: {
    slack_url: "https://..."
  },
}

Note: Curious about how to get a slack webhook URL?

Execution data does not belong in the form. When using the API, you set form_data and execution_data in the request’s body. However, we are using a UI component and need to use the client.

Encode execution_data as a JSON web token (JWT) using your account secret. Then pass it in as the HTML data attribute data-execution-data.

Here is an example encoding using Node JS and React:

// server side
const secret = process.env.EMBED_WORFKLOW_SK;
const payload = {
  slack_url:
    "REPLACE_ME_WITH_YOUR_SLACK_WEBHOOK_URL",
  user_id: 1,
  verification_url: "http://localhost:3000/verify"
};
const executionData = JWT.sign(payload, secret, { algorithm: "HS256" });

// React component
<div
  className="EWF__form"
  data-execution-data={executionData}
  data-id="REPLACE_ME_WITH_YOUR_FORM_ID"
></div>

What Next?

The source code lives here.

Check out our UI docs to explore more components.

Looking for API access? API Docs

Guide Node JS Demo