NAV
ruby javascript

Embed UI Components

Our UI components are ready-made UI elements that offer the quickest way to integrate and power your applications with workflows.

Getting Started

Our ready to use components are available directly from our servers. 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-0033.css">

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

<!-- Embed Workflow Containers -->
<div class="EWF__component"></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.

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: "main", iat: currentTime, exp: currentTime + 3600 };

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

current_time = Time.now.to_i
exp = current_time + 3600
payload = { sub: 'main', exp: exp, iat: current_time }

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 options = {
  method: "POST",
  headers: { Authorization: "Bearer sk_live_12345" },
};

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

require "uri"
require "net/http"

uri = URI("https://embedworkflow.com/api/client_token")
req = Net::HTTP::Post.new(uri)
req["Authorization"] = "Bearer sk_live_12345"

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

token = JSON.parse(res.body)["client_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 .EWF__component.

App (Mountable)

Our most popular and useful component is our mountable app.

<div
  class="EWF__app"
  data-base-path="workflows"
  data-hide-fields="true"
  data-hide-forms="true"
/>

Dashboard

<div class="EWF__dashboard" />

Workflow Form

<div class="EWF__workflow_form" />

Workflows Table

<div class="EWF__workflows_table" />

Workflow Editor

<div
  class="EWF__workflow_editor"
  data-hashid="xrvom"
/>

Workflow Settings

<div
  class="EWF__workflow_settings"
  data-hashid="xrvom"
/>

Workflow Config

<div
  class="EWF__workflow_config"
  data-hashid="xrvom"
  data-save-label="Save"
/>

Workflow Timeline

<div
  class="EWF__workflow_timeline"
  data-hashid="xrvom"
/>

Action Timeline

<div
  class="EWF__action_timeline"
  data-hashid="xompy"
/>

Timeline Icon

<div
  class="EWF__timeline_icon"
  data-size="lg"
  data-type="email"
/>

Fields Editor

<div
  class="EWF__fields_editor"
  data-hashid="xrvom"
/>

Form

<div
  class="EWF__form"
  data-id="1aeb2857-1dc3-4b05-a048-eab70041ec34"
/>

Form Editor

<div
  class="EWF__form_editor"
  data-id="1aeb2857-1dc3-4b05-a048-eab70041ec34"
/>

External Forms

You may want to add forms to various websites with including the UI component library. This can be done with or without javascript.

With JavaScript

With javascript will submit the form inline and display a success message.

You will need to include https://cdn.ewf.to/ewform.5.js. The form field names must be nested under submission. For instance: <input name="submission[Email] />.

<script src="https://cdn.ewf.to/ewform.6.js"></script>

<form action="https://embedworkflow.com/api/v1/forms/REPLACE_WITH_FORM_ID/submissions.json" data-remote="true" method="post" data-ewf-uid="REPLACE_WITH_FORM_ID">
  <input required="true" name="submission[Email]" placeholder="Enter your email" type="text" >
  <button type="submit">Subscribe</button>
</form>

HTML Only - Without JavaScript

You do not need to use javascript if you prefer HTML only. Omit the <script> tag and update the <form> attribute's.

<form action="https://embedworkflow.com/api/v1/forms/REPLACE_WITH_FORM_ID/submissions.json" method="post">
  <input required="true" name="submission[Email]" placeholder="Enter your email" type="text" >
  <button type="submit">Subscribe</button>
</form>

Get Your Free Account

Interested in testing an enterprise account?

Sign Up today or send us an email at hello@embedworkflow.com.

ruby javascript