Embed UI Components

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

Getting Started

Be sure to include our CSS and JS scripts. Load the CSS script first, then HTML embeded elements, and finally the JS script.


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

<!-- EWF Elements -->
<div class="EWF__component" />

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

Workflow Form

<div
  class="EWF__workflow_form"
  data-token="REPLACE_WITH_YOUR_TOKEN"
/>

data-token: required
data-callback-url: optional
data-save-label: optional. Default: Create
data-saving-label: optional. Default: Creating...
data-after-error: optional
data-after-success: optional

Workflow Table

<div
  class="EWF__workflows_table"
  data-token="REPLACE_WITH_YOUR_TOKEN"
/>

data-token: required
data-after-ready: optional

Workflow Editor

data-hashid: required
data-token: required
data-after-error: optional
data-after-success: optional

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

Workflow Settings

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

data-token: required
data-hashid: optional. A workflow and form will be created if not provided.

Workflow Config

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

data-hashid: required
data-token: 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-token="REPLACE_WITH_YOUR_TOKEN"
/>

data-hashid: required
data-token: required
data-header: optional. Default: 'Timeline'
data-after-ready: optional

Action Timeline

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

data-hashid: required
data-token: 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-token="REPLACE_WITH_YOUR_TOKEN"
/>

data-hashid: required
data-token: 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-token: optional
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-token="REPLACE_WITH_YOUR_TOKEN"
/>

data-id: required
data-token: required
data-redirect-url: optional
data-after-success: optional
data-after-cancel: optional

Developer API

Welcome to the EmbedWorkflow Developer API! This API will allow you to access our backend directly through our number of interfaces.

Response Format

Responses are always JSON. This applies to all of our API's.

Getting Started

Get a key

Getting setup is easy. First, login into your account and find your user's token. This will serve as your API key.

Workflows API

Think of workflows as the template. The template deciding how and when things should execute. Our Workflows API allows you to manage your workflow's.

Workflow Object

The Workflow attributes

Attribute	Description	Type
hashid	Unique identifer	string
name	Human friendly label	string
updated_at	Last updated timestamp	datetime
executions_count	The number of times this workflow has been executed	integer
actions_count	The number of actions this workflow has	integer

Create a Workflow

Create a new workflow.

HTTP Request

POST https://embedworkflow.com/api/workflows

Example Request

curl 'https://embedworkflow.com/api/workflows' \
--request POST \
--header 'Authorization: Bearer 0261be09-906a-45da-813a-28f76aa374d4' \
--form 'workflow[name]="My first workflow"' \
--form 'workflow[auto_start]="true"'

Example Response

{
  "hashid": "xj44x",
  "actions_count": 0,
  "executions_count": 0,
  "name": "My first workflow",
  "updated_at": "2021-10-20T19:06:42Z"
}

Fetch a Workflow

Fetch a specific workflow.

HTTP Request

GET https://embedworkflow.com/api/workflows/:hashid

Example Request

curl 'https://embedworkflow.com/api/workflows/xj44x' \
--request GET \
--header 'Authorization: Bearer 0261be09-906a-45da-813a-28f76aa374d4'

Example Response

{
  "hashid": "xj44x",
  "actions_count": 0,
  "executions_count": 0,
  "name": "My first workflow",
  "stats": {},
  "template": {
    "nodes": [
      {
        "id": "start_of_workflow",
        "element_type": "start_of_workflow",
        "data": {},
        "connectable": false,
        "draggable": false,
        "selectable": true,
        "targetPosition": "top",
        "sourcePosition": "bottom",
        "position": {
          "x": 450,
          "y": 0
        }
      }
    ],
    "edges": [],
    "width": 1500,
    "height": 600
  },
  "updated_at": "2021-10-20T19:15:41Z"
}

List Workflows

List your workflows.

HTTP Request

GET https://embedworkflow.com/api/workflows

Example Request

curl 'https://embedworkflow.com/api/workflows' \
--request GET \
--header 'Authorization: Bearer 0261be09-906a-45da-813a-28f76aa374d4'

Example Response

{
  "collection": [
    {
      "hashid": "xj44x",
      "actions_count": 0,
      "executions_count": 0,
      "name": "My first workflow",
      "updated_at": "2021-10-20T19:15:41Z"
    }
  ]
}

Update a Workflow

Update a workflow.

HTTP Request

PUT https://embedworkflow.com/api/workflows/:hashid

Example Request

curl 'https://embedworkflow.com/api/workflows/xj44x' \
--request PUT \
--header 'Authorization: Bearer 0261be09-906a-45da-813a-28f76aa374d4' \
--form 'workflow[name]="Updated workflow name"'

Example Response

{
  "collection": [
    {
      "hashid": "xj44x",
      "actions_count": 0,
      "executions_count": 0,
      "name": "Updated workflow name",
      "updated_at": "2021-10-21T00:04:03Z"
    }
  ]
}

List Workflow Activities

List a workflow's activity timeline.

TODO: update this example to an execution with multiple actions TODO: update this activity response after https://github.com/hocnest/actumize/issues/72 is completed.

HTTP Request

GET https://embedworkflow.com/api/workflows/:hashid/activities

Example Request

curl 'https://embedworkflow.com/api/workflows/7w6gx/activities' \
--request GET \
--header 'Authorization: Bearer 0261be09-906a-45da-813a-28f76aa374d4'

Example Response

{
  "collection": [
    {
      "hashid": "xjooo",
      "context": {
        "title": "Applied workflow",
        "status": "running",
        "description": "Updated workflow name"
      },
      "time": "2021-10-21T00:36:31Z"
    }
  ]
}

Execute Workflow

Execute a given workflow

TODO: rename endpoint to execute

HTTP Request

POST https://embedworkflow.com/api/workflows/:hashid/execute

Example Request

curl 'https://embedworkflow.com/api/workflows/xj44x/execute' \
--request POST \
--header 'Authorization: Bearer 0261be09-906a-45da-813a-28f76aa374d4' \
--form 'Name="David"' \
--form 'Email="david@embedworkflow.com"'

Example Response

{
  "hashid": "7lw8n",
  "actions_count": 2,
  "executions_count": 0,
  "name": "Updated workflow name",
  "updated_at": "2021-10-21T00:41:54Z"
}

Clone Workflow

Clone a given workflow

HTTP Request

POST https://embedworkflow.com/api/workflows/:hashid/clone

Example Request

curl 'https://embedworkflow.com/api/workflows/xj44x/clone' \
--request POST \
--header 'Authorization: Bearer 0261be09-906a-45da-813a-28f76aa374d4'

Example Response

{
  "hashid": "xakln",
  "actions_count": 2,
  "executions_count": 0,
  "name": "Updated workflow name",
  "updated_at": "2021-10-21T14:08:57Z"
}

Run Workflow

Run a given workflow

HTTP Request

POST https://embedworkflow.com/api/workflows/:hashid/run

Example Request

curl 'https://embedworkflow.com/api/workflows/xakln/run' \
--request POST \
--header 'Authorization: Bearer 0261be09-906a-45da-813a-28f76aa374d4'

Example Response

{
  "hashid": "xakln",
  "actions_count": 2,
  "executions_count": 0,
  "name": "Updated workflow name",
  "updated_at": "2021-10-21T14:13:48Z"
}

Actions API

List Action Activities

List an action's activity timeline.

HTTP Request

GET https://embedworkflow.com/api/actions/:hashid/activities

Example Request

curl 'https://embedworkflow.com/api/actions/xj6ej/activities' \
--request GET \
--header 'Authorization: Bearer 0261be09-906a-45da-813a-28f76aa374d4'

Example Response

{
  "collection": [
    {
      "hashid": "75qqe",
      "context": {
        "title": "Completed action",
        "status": "completed",
        "action_type": "Email",
        "description": "Welcome"
      },
      "time": "2021-10-21T00:57:38Z"
    },
    {
      "hashid": "xbyyw",
      "context": {
        "title": "Ran action",
        "status": "running",
        "action_type": "Email",
        "description": "Welcome"
      },
      "time": "2021-10-21T00:57:31Z"
    },
    {
      "hashid": "xayyj",
      "context": {
        "title": "Created action",
        "status": "idle",
        "action_type": "Email",
        "description": "Welcome"
      },
      "time": "2021-10-21T00:57:31Z"
    }
  ]
}

Forms API

Form Object

The Workflow attributes

Attribute	Description	Type
id	Unique identifer	string
name	Name of the form	string
layout	The forms layout	object
fields	List fields available in workflow (auth required)	array

Fetch a Form

Use this endpoint to load a form.

HTTP Request

GET https://embedworkflow.com/api/forms/:id

Example Request

curl 'https://embedworkflow.com/api/forms/2e9ff742-ef90-4470-b518-774b6579166e' \
--request GET

Example Response

{
  "id": "2e9ff742-ef90-4470-b518-774b6579166e",
  "fields": null,
  "layout": {
    "blocks": [
      {
        "id": "457096",
        "type": "Header",
        "componentId": "Header",
        "description": "Header",
        "componentValues": {
          "value": "Sign Up"
        }
      },
      {
        "id": "10001",
        "name": "Name",
        "type": "Field",
        "required": "true",
        "componentId": "TextField",
        "description": "Text",
        "componentValues": {
          "label": "Name",
          "placeholder": "Enter Name"
        }
      },
      {
        "id": "10002",
        "name": "Email",
        "type": "Field",
        "required": "true",
        "componentId": "TextField",
        "description": "Text",
        "componentValues": {
          "label": "Email",
          "placeholder": "Enter Email"
        }
      },
      {
        "id": "Submit",
        "type": "Button",
        "componentId": "Submit",
        "description": "Submit Button",
        "componentValues": {
          "label": "Submit"
        }
      }
    ]
  },
  "name": "New Account"
}

HTTP Request with Authentication

GET https://embedworkflow.com/api/forms/:id

If authenticated, the response will include the workflow's fields.

Example Request with Authentication

curl 'https://embedworkflow.com/api/forms/2e9ff742-ef90-4470-b518-774b6579166e' \
--request GET \
--header 'Authorization: Bearer 0261be09-906a-45da-813a-28f76aa374d4'

Example Response

{
  "id": "2e9ff742-ef90-4470-b518-774b6579166e",
  "fields": [
    {
      "id": "10001",
      "name": "Name",
      "type": "Field",
      "required": "true",
      "componentId": "TextField",
      "description": "Text",
      "componentValues": {
        "label": "Name",
        "placeholder": "Enter Name"
      }
    },
    {
      "id": "10002",
      "name": "Email",
      "type": "Field",
      "required": "true",
      "componentId": "TextField",
      "description": "Text",
      "componentValues": {
        "label": "Email",
        "placeholder": "Enter Email"
      }
    }
  ],
  "layout": {
    "blocks": [
      {
        "id": "457096",
        "type": "Header",
        "componentId": "Header",
        "description": "Header",
        "componentValues": {
          "value": "Sign Up"
        }
      },
      {
        "id": "10001",
        "name": "Name",
        "type": "Field",
        "required": "true",
        "componentId": "TextField",
        "description": "Text",
        "componentValues": {
          "label": "Name",
          "placeholder": "Enter Name"
        }
      },
      {
        "id": "10002",
        "name": "Email",
        "type": "Field",
        "required": "true",
        "componentId": "TextField",
        "description": "Text",
        "componentValues": {
          "label": "Email",
          "placeholder": "Enter Email"
        }
      },
      {
        "id": "Submit",
        "type": "Button",
        "componentId": "Submit",
        "description": "Submit Button",
        "componentValues": {
          "label": "Submit"
        }
      }
    ]
  },
  "name": "New Account"
}

Update a Form

Updating a form requires the auth token.

HTTP Request

PUT https://embedworkflow.com/api/forms/:id

Example Request

curl 'https://embedworkflow.com/api/forms/2e9ff742-ef90-4470-b518-774b6579166e' \
--request PUT \
--header 'Authorization: Bearer 0261be09-906a-45da-813a-28f76aa374d4' \
--form '[Name]="Updated Form Name"'

Example Response

{
  "id": "2e9ff742-ef90-4470-b518-774b6579166e",
  "fields": null,
  "layout": {
    "blocks": [
      {
        "id": "457096",
        "type": "Header",
        "componentId": "Header",
        "description": "Header",
        "componentValues": {
          "value": "Sign Up"
        }
      },
      {
        "id": "10001",
        "name": "Name",
        "type": "Field",
        "required": "true",
        "componentId": "TextField",
        "description": "Text",
        "componentValues": {
          "label": "Name",
          "placeholder": "Enter Name"
        }
      },
      {
        "id": "10002",
        "name": "Email",
        "type": "Field",
        "required": "true",
        "componentId": "TextField",
        "description": "Text",
        "componentValues": {
          "label": "Email",
          "placeholder": "Enter Email"
        }
      },
      {
        "id": "Submit",
        "type": "Button",
        "componentId": "Submit",
        "description": "Submit Button",
        "componentValues": {
          "label": "Submit"
        }
      }
    ]
  },
  "name": "Updated Form Name"
}

Delete a Form

Deleting a form requires the auth token.

HTTP Request

DELETE https://embedworkflow.com/api/forms/:id

Example Request

curl 'https://embedworkflow.com/api/forms/2e9ff742-ef90-4470-b518-774b6579166e' \
--request DELETE \
--header 'Authorization: Bearer 0261be09-906a-45da-813a-28f76aa374d4'

Example Response

"2e9ff742-ef90-4470-b518-774b6579166e"

Submit a Form

Submit a form.

HTTP Request

POST https://embedworkflow.com/api/forms/:id/submissions

Example Request

curl 'https://embedworkflow.com/api/forms/55a1bb06-9386-4ded-a5b9-a578ec0a542a/submissions' \
--request POST \
--form 'Name="David"' \
--form 'Email="david@embedworkflow.com"'

Example Response

{}