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.
sub
: User Keyiat
: Current Timeexp
: Future Time
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
.
Dashboard
<div class="EWF__dashboard" />
Workflow Form
<div class="EWF__workflow_form" />
- data-callback-url: optional
- data-save-label: optional. Default:
Create
- data-saving-label: optional. Default:
Creating...
- data-after-error: optional
- data-after-success: optional
Workflows Table
<div class="EWF__workflows_table" />
- data-after-ready: optional
Workflow Editor
<div
class="EWF__workflow_editor"
data-hashid="xrvom"
/>
- data-hashid: required
- data-after-error: optional
- data-after-success: optional
Workflow Settings
<div
class="EWF__workflow_settings"
data-hashid="xrvom"
/>
- data-hashid: optional. A workflow and form will be created if not provided.
Workflow Config
<div
class="EWF__workflow_config"
data-hashid="xrvom"
data-save-label="Save"
/>
- data-hashid: required
- data-save-label: optional. Default:
Save
- data-saving-label: optional. Default:
Saving...
- data-after-error: optional
- data-after-success: optional
Workflow Timeline
<div
class="EWF__workflow_timeline"
data-hashid="xrvom"
/>
- data-hashid: required
- data-header: optional. Default: 'Timeline'
- data-after-ready: optional
Action Timeline
<div
class="EWF__action_timeline"
data-hashid="xompy"
/>
- data-hashid: required
- data-header: optional. Default: 'Timeline'
- data-after-ready: optional
Timeline Icon
<div
class="EWF__timeline_icon"
data-size="lg"
data-type="email"
/>
- data-type: required. (
email
,task
,text
,delay
,webhook
,archived
,cloned
,created
,completed
,failed
,started
,stopped
,updated
) - data-size: optional. Default:
sm
. (sm
,lg
)
Fields Editor
<div
class="EWF__fields_editor"
data-hashid="xrvom"
/>
- data-hashid: required
- data-after-success: optional
- data-after-cancel: optional
Form
<div
class="EWF__form"
data-id="1aeb2857-1dc3-4b05-a048-eab70041ec34"
/>
- data-id: required
- data-redirect-url: optional
- data-after-success: optional
- data-after-cancel: optional
Form Editor
<div
class="EWF__form_editor"
data-id="1aeb2857-1dc3-4b05-a048-eab70041ec34"
/>
- data-id: required
- data-after-success: optional
- data-after-delete: optional
- data-after-delete-url: optional
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.