Adding embedded workflows to Node.js applications

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 configure your account and embed a the workflow builder.

Source code can be found here.

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.

1. Add the dependencies

You need to add the external script and stylesheet to your HTML page.

<link rel="stylesheet" media="screen" href="https://cdn.ewf.to/ewf-####.css" />
<script src="https://cdn.ewf.to/ewf-####.js"></script>

Replace “####” with the latest version number you see here.

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-${ewfVersion}.js`;
  script.onload = loadWorkflows;

  document.body.appendChild(script);

  // Cleanup
  return () => {
    document.body.removeChild(script);
  };
}, []);

2. Mount the App

Add the one liner to your page with EWF__app class name and set the base path.

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

Check out documentation for the latest details.

What Next?

The source code lives here.

Check out our UI docs for details.

And review official docs.

Need more hands on help? Register for a demo.