Customizing Styles

Learn how to customize the appearance of your embedded workflow builder to match your brand.

Embed Workflow provides powerful customization options to seamlessly integrate the workflow builder into your application's design system. You can customize colors, themes, and individual component styles.

Theme Color Templates

The easiest way to customize your workflow builder is through the Account Settings page in your dashboard.

Quick Theme Selection

  1. Navigate to Account Settings and scroll to the Theme color section
  2. Choose from our pre-configured color templates
  3. Click any color to generate the CSS for that theme
  4. The Stylesheet section will update with the generated CSS
  5. Copy the CSS from the Stylesheet section and paste it into your application
Important

Selecting a color template generates the CSS, but you still need to copy it from the Stylesheet section and add it to your application for the changes to take effect.

Manual Color Customization

For complete control over your color scheme, you can manually edit the CSS in the Stylesheet section or define custom CSS properties in your application's stylesheet.

CSS Custom Properties

Embed Workflow uses CSS custom properties (CSS variables) for theming. You can override these in your application's stylesheet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
:root {
  /* Primary color shades (50-950) */
  --ewf-color-main-50: 239, 246, 255;
  --ewf-color-main-100: 219, 234, 254;
  --ewf-color-main-200: 191, 219, 254;
  --ewf-color-main-300: 147, 197, 253;
  --ewf-color-main-400: 96, 165, 250;
  --ewf-color-main-500: 59, 130, 246;
  --ewf-color-main-600: 37, 99, 235;
  --ewf-color-main-700: 29, 78, 216;
  --ewf-color-main-800: 30, 64, 175;
  --ewf-color-main-900: 30, 58, 138;
  --ewf-color-main-950: 23, 37, 84;

  /* Primary color reference (points to main-600 by default) */
  --ewf-color-primary: var(--ewf-color-main-600);
}
RGB Format

Color values are specified as RGB triplets without the rgb() wrapper. This format allows for easy opacity manipulation using rgba() when needed.

Color Shade System

The color system follows the Tailwind CSS convention:

  • 50-100: Lightest shades (backgrounds, hover states)
  • 200-400: Light shades (borders, disabled states)
  • 500-600: Primary shades (main brand color, buttons)
  • 700-800: Dark shades (text, active states)
  • 900-950: Darkest shades (headings, emphasis)

Component-Specific Styling

You can target individual workflow components using CSS class identifiers. This allows for granular customization of specific elements.

Node Core Components

Target the main node elements:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/* Main node wrapper element */
.ework__node {
  /* Your styles */
}

/* Node flex container that holds the node */
.ework__node-container {
  /* Your styles */
}

/* The styled node box/card wrapper */
.ework__node-wrapper {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Inner content area of the node */
.ework__node-content {
  padding: 16px;
}

/* The node's name/title text element */
.ework__node-name {
  font-weight: 600;
  font-size: 14px;
}

/* Error message display within a node */
.ework__node-error {
  color: rgb(220, 38, 38);
  font-size: 12px;
}

/* Icon wrapper within a node */
.ework__node-icon {
  width: 24px;
  height: 24px;
}

Node Type Specific

Style different node types independently:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* Action-type nodes */
.ework__action-node {
  /* Custom styling for action nodes */
}

/* Trigger nodes */
.ework__trigger-node {
  /* Custom styling for trigger nodes */
}

/* Condition/decision nodes */
.ework__condition-node {
  /* Custom styling for condition nodes */
}

/* Inner wrapper specific to condition nodes */
.ework__condition-node-wrapper {
  /* Your styles */
}

Node Interactive Elements

Customize buttons and connectors:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Button wrapper for adding child nodes */
.ework__add-child-button {
  background-color: rgb(var(--ewf-color-main-500));
  border-radius: 50%;
  transition: transform 0.2s;
}

.ework__add-child-button:hover {
  transform: scale(1.1);
}

/* Visual connector lines between nodes */
.ework__node-connector {
  stroke: rgb(var(--ewf-color-main-300));
  stroke-width: 2px;
}

Canvas/Editor

Style the main workflow canvas:

1
2
3
4
5
6
7
8
9
10
/* Main workflow canvas/editor container */
.ework__nodes-editor {
  background-color: #f9fafb;
  min-height: 600px;
}

/* Absolutely positioned node wrapper (handles x,y positioning) */
.ework__node-positioned {
  transition: transform 0.3s ease;
}

Complete Component Reference

Here's the complete list of available CSS class identifiers:

Class NameDescription
ework__nodeMain node wrapper element
ework__node-containerNode flex container that holds the node
ework__node-wrapperThe styled node box/card wrapper
ework__node-contentInner content area of the node
ework__node-nameThe node's name/title text element
ework__node-errorError message display within a node
ework__node-iconIcon wrapper within a node
ework__action-nodeWrapper for action-type nodes
ework__trigger-nodeWrapper for trigger nodes
ework__condition-nodeWrapper for condition/decision nodes
ework__condition-node-wrapperInner wrapper specific to condition nodes
ework__add-child-buttonButton wrapper for adding child nodes
ework__node-connectorVisual connector lines between nodes
ework__nodes-editorMain workflow canvas/editor container
ework__node-positionedAbsolutely positioned node wrapper

Example Customizations

Branded Color Scheme

1
2
3
4
5
6
:root {
  /* Use your brand's primary color */
  --ewf-color-main-500: 120, 53, 250; /* Your brand purple */
  --ewf-color-main-600: 107, 33, 232;
  --ewf-color-primary: var(--ewf-color-main-600);
}

Custom Node Styles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Make trigger nodes stand out */
.ework__trigger-node .ework__node-wrapper {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* Style action nodes with subtle shadow */
.ework__action-node .ework__node-wrapper {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  border: 2px solid rgb(var(--ewf-color-main-200));
}

/* Highlight condition nodes */
.ework__condition-node .ework__node-wrapper {
  border-left: 4px solid rgb(var(--ewf-color-main-600));
}

Custom Canvas Background

1
2
3
4
5
6
7
.ework__nodes-editor {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  background-color: #ffffff;
}

Best Practices

Styling Tips
  • Use CSS custom properties for colors to maintain consistency and enable easy theme switching
  • Test in different contexts to ensure your styles work across all workflow states
  • Maintain accessibility by ensuring sufficient color contrast for text and interactive elements
  • Use the cascade wisely - more specific selectors override general ones
  • Preview changes in your account settings before deploying to production

Applying Your Styles

After generating or defining your custom styles, you need to include them in your application. There are two main approaches:

Option 1: External or Inline Stylesheet

Copy the CSS from your Account Settings Stylesheet section and add it to your application:

In Your External Stylesheet:

1
2
3
4
5
6
7
8
9
/* your-styles.css */
:root {
  --ewf-color-main-600: 37, 99, 235;
  --ewf-color-primary: var(--ewf-color-main-600);
}

.ework__node-wrapper {
  border-radius: 12px;
}

Then include it before the Embed Workflow CSS:

1
2
<link rel="stylesheet" href="your-styles.css">
<link rel="stylesheet" href="https://cdn.ewf.to/ewf-LATEST_VERSION.css">

Or Inline in Your Page:

1
2
3
4
5
6
7
8
9
10
<style>
  :root {
    --ewf-color-main-600: 37, 99, 235;
    --ewf-color-primary: var(--ewf-color-main-600);
  }

  .ework__node-wrapper {
    border-radius: 12px;
  }
</style>

Option 2: Account Settings Stylesheet (Generates CSS to Copy)

The Stylesheet section in your Account Settings serves two purposes:

  1. View Generated CSS: When you select a color template, the generated CSS appears here
  2. Edit Custom CSS: You can manually edit the CSS to customize further
Copy to Your App

The CSS in the Stylesheet section is not automatically applied. You must copy it and paste it into your application using Option 1 above.

Next Steps

←Quick start
Import Configuration→