> For the complete documentation index, see [llms.txt](https://docs.diaflow.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.diaflow.io/workflow-builder/appearance.md).

# Appearance

## What Appearance helps you do

Appearance lets you customize how a published workflow looks to end users.

This setting is available only for:

* **App**
* **Chatbot**

You can edit **Appearance** only after the App or Chatbot has been **published**.

Automation workflows do not use this setting.

<figure><img src="/files/7GkQ6qz15zIXjMvqcDiq" alt=""><figcaption></figcaption></figure>

### Before you start

Make sure your workflow is:

* An **App** or **Chatbot**
* Already **published**

If the workflow is still in draft, you cannot edit its appearance.

### Appearance for App

For an **App**, you can customize these sections.

<figure><img src="/files/YXRO10HDbaqmtyBVPaX2" alt=""><figcaption></figcaption></figure>

#### General

Use **General** to define the basic look and identity of the App.

You can edit:

* **Title**
* **Subtitle**
* **Logo/icon**
* **Cover**
* **Color and style**

This is where you make the App feel branded and easy to recognize.

#### Inputs

Use **Inputs** to control how input fields appear to the user.

This helps you make the App easier to complete and easier to understand.

#### Outputs

Use **Outputs** to control how results are shown after the App runs.

This is useful when you want the final answer to feel clearer and more polished.

#### Security

Use **Security** to control who can open the App.

You can configure:

* **public access**
* **Lock with a password**

### Appearance for Chatbot

For a **Chatbot**, you can customize these sections.

<figure><img src="/files/x5TYdbO3Qs6GwiNe4WJC" alt=""><figcaption></figcaption></figure>

#### General

Use **General** to shape the chatbot's identity and first impression.

You can edit:

* **Title**
* **Tagline**
* **Logo/icon**
* **Cover**
* **Color and style**
* **Call to action button**
* **Contact us button**

#### Contact

Use **Contact** to control lead capture and contact collection.

You can configure:

* **Contact generation:** ask for customer information
* **Allow chat as a guest**
* **Data to collect:** define your own fields, such as `name`, `phone number`, and more

This section is useful when the chatbot supports sales, support, or consultation flows.

#### Widget

Use **Widget** to control how the chatbot appears when embedded.

You can edit:

* **Widget icon**
* **Look & feel**
* **Prominence**
* **Position**

#### Messages

Use **Messages** to define how the conversation starts.

You can configure:

* **Welcome message**
* **Opening questions**
* **Initial questions**

This helps you guide users into the right conversation faster.

#### Security

Use **Security** to control access to the chatbot.

You can configure:

* **Public access**
* **Lock with a password**

## Best practices

Keep the experience simple for end users.

Use these rules:

* Keep titles short and clear
* Use covers and colors that match your brand
* Ask only for the contact data you really need
* Protect private flows with a password

### Next steps

* Publish your workflow in [Publish a workflow](/workflow-builder/publish-a-workflow.md).
* Review reusable sharing options in [Create template](/workflow-builder/create-template.md).
* Track usage and results in [History](/workflow-builder/history.md).