Getting Started

Include our scripts on your site with script/link tags or download the files and save them locally.


<!-- Load CSS -->
<link rel="stylesheet" media="screen" href="https://cdn.ewf.to/ewf-0054.css">

<!-- Load JS -->
<script src="https://cdn.ewf.to/ewf-0054.js"></script>

<!-- Embed Workflow Mountable App -->
<div class="EWF__app" data-base-path="workflows"></div>

<script type="text/javascript">
  EWF.load("pk_live_12345", { userToken: "CLIENT_AUTHORIZATION_TOKEN" });
  // or
  EWF.load("pk_live_12345", { jwt: "JWT" });
</script>

ewf-XXXX.js adds the global EWF object so you can load your Embed Workflow Containers.

You will need to .load with your a publishable key along with either a jwt or a client authorization token.

JWT

A JSON Web Token can be used to gain access to Embed Workflow UI Components. Generate the JWT on your server and use it when you load your UI.

sub, iat, and exp are all required in the JWT payload.

sub: User Key
iat: Current Time
exp: Future Time

Optional fields are discover, email and user_data.

discover: Auto discover users (creating users on the fly) (true/false)
email: Required only if discoverable. No email communication will go out. If N/A - use the following format: "example+some_user_key@email.com",
user_data: key/value pairs of any user specific data that you want accessible in the user's workflows.

Your secret (sk_live_****) is found in your account settings.

const secret = "sk_live_12345"
const jwt = require("jsonwebtoken");
const currentTime = Math.floor(Date.now() / 1000);
const payload = {
  sub: "user-1234", // <---- Your unique user id
  iat: currentTime,
  exp: currentTime + 3600,
  discover: true, // <--- this tells EW to auto discover users (creating users on the fly).
  email: "example+user-1234@email.com",  // <---- Replace this
  user_data: {
    list_options_example: "123:New York, 456:Florida, 789:Texas",
    slack_user_id: "U543212345",
    foo: "bar",
  },
};

const token = jwt.sign(payload, secret, { algorithm: "HS256" });

current_time = Time.now.to_i
exp = current_time + 3600
payload = {
  sub: 'user-1234', # <---- Your unique user id
  exp: exp,
  iat: current_time,
  discover: true, # <--- this tells EW to auto discover users (creating users on the fly).
  email: "example+user-1234@email.com", # <---- Replace this
  user_data: {
    list_options_example: "123:New York, 456:Florida, 789:Texas",
    slack_user_id: "U543212345",
    foo: "bar",
  },
}

token = JWT.encode payload, "sk_live_12345", "HS256"
puts token

Client Authorization Token

The client authorization token will grant you access to the Embed Workflow UI Components. First, you will need to generate a client token on your server. These tokens are short lived and expire every 48 hours (default & configurable).

Generating the Token

Generating the client token is easy. You can use one of our server side SDK's or hit the API directly. To reduce latency, cache the token but for no longer than the token's life span (default: 48 hours).

const raw = JSON.stringify({ "key": "main" });

const options = {
  method: "POST",
  headers: { Authorization: "Bearer sk_live_12345" },
  body: raw,
};

fetch("https://embedworkflow.com/api/v1/user_token", options)
  .then((response) => response.json())
  .then((response) => {
    console.log("client auth token = ", response.user_token)
  });

require "uri"
require "net/http"

uri = URI("http://embedworkflow.com/api/v1/user_token")
req = Net::HTTP::Post.new(uri)
req["Authorization"] = "Bearer sk_live_12345"
req.body = "{\"key\":\"main\"}"

res = Net::HTTP.start(uri.hostname, uri.port) { |http| http.request(req) }

token = JSON.parse(res.body)["user_token"]
puts token

Customize CSS

You can configure the primary color by setting the global CSS --ewf-color-primary. It must be RGB.

body {
  --ewf-color-primary: 99, 102, 241;
}

You can also target each element by it's class name .EWF__app.

Embed It

Our mountable app will make the workflow builder, execution viewer, and logs available to your end-users.

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

data-base-path: required

Make sure that your app's routing will handle your configured base-path.

Troubleshooting

If you are running into issues - we want to hear about it. Please reach out to us by email (devsupport@embedworkflow.com). Additionally, we can invite you and your team to our Slack for fastest support.

Get Your Account - It's free

No risk and easy to implement.