> For the complete documentation index, see [llms.txt](https://docs.1kosmos.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.1kosmos.com/workflow-builder/customize-preview-and-save.md).

# Customize Preview & Save

***

### Import a workflow using JSON

The Workflow Builder supports importing workflow configurations using JSON.

{% stepper %}
{% step %}

#### Open Import JSON

Click the three-dot menu in the workflow header and select **Import JSON**. The Import Workflow JSON window appears. 
{% endstep %}

{% step %}

#### Paste and import

Paste the workflow JSON configuration and click **Import**. The imported workflow populates the canvas automatically. 

Importing a workflow replaces any existing nodes currently present on the canvas.
{% endstep %}
{% endstepper %}

### Customize workflow branding

Customize the visual appearance of verification workflows. Click the three-dot menu in the workflow header and select **Edit Branding**. The Branding window provides two tabs: **Theme Colors** and **HTML & CSS**.

#### Theme Colors tab

Configures the color scheme used in the workflow:

* **Primary Button Color** — The main action button (for example, Continue).
* **Secondary Button Color** — Secondary navigation buttons (such as Back).
* **Body / Main Text Color** — The primary text color across workflow screens.

{% hint style="info" %}
Changes here automatically update the corresponding CSS variables used in the workflow interface. 
{% endhint %}

#### HTML & CSS tab

Customizes layout and styling using HTML and CSS.

**Header** — Custom HTML at the top of workflow pages, typically for branding elements such as logos.

```html
<header class="header">
  <img class="header-logo" src="logo_url" alt="logo">
</header>
```

**Footer** — Custom HTML at the bottom of workflow pages, such as branding text, copyright, or links.

```html
<div class="card-footer">
  <div class="powered-by">
    <p>Powered by</p>
  </div>
</div>
```

**Global CSS** — Custom CSS to modify the appearance of workflow elements.

{% hint style="info" %}
&#x20;Changes made here are automatically minified and applied globally across the workflow interface.
{% endhint %}

### Preview and test

The Preview feature lets administrators simulate and test a configured workflow before publishing.

Before previewing, ensure that all nodes are properly connected and there are no disconnected handlers or incomplete transitions. If the workflow contains unconnected nodes or configuration issues, a warning is displayed and preview will not proceed until the issues are resolved.

{% stepper %}
{% step %}

#### Start preview

Click **Preview** in the Workflow Builder.&#x20;
{% endstep %}

{% step %}

#### Skip

Click **Skip**.
{% endstep %}

{% step %}

#### Choose how to continue

On the QR code screen, choose an option — for example, **Continue on this device**. A new browser tab opens with the workflow in preview mode so you can simulate verification.
{% endstep %}
{% endstepper %}

The following options are available to continue the verification process:

| If you select               | The UI allows you to                                                                        |
| --------------------------- | ------------------------------------------------------------------------------------------- |
| Scan the QR code            | Use the 1Kosmos mobile application to scan the QR code and continue on another device.      |
| Send a link to phone number | Enter a phone number and send a verification link via SMS to continue on the mobile device. |
| Send a link to email        | Send a verification link to the registered email address to continue.                       |
| Copy link                   | Copy the verification link and open it on another device to continue.                       |
| Continue on this device     | Proceed on the current device without switching.                                            |

### Save a workflow

Provide a name in the workflow header to save the workflow.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.1kosmos.com/workflow-builder/customize-preview-and-save.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.