> 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

Customize the published experience of your App or Chatbot.

## 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="https://3864624312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdo1pkMnofwxf3lpWftw%2Fuploads%2FkHesaqtcgpm716BcqEmP%2FAppearance.gif?alt=media&amp;token=c7670ce1-d2c0-4829-b193-91fc203a4a66" 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="https://3864624312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdo1pkMnofwxf3lpWftw%2Fuploads%2F1vBLli5wVcEJHGA1IMT6%2FApp_Appearance.png?alt=media&amp;token=d1ce52ee-2462-41d4-9edc-1b4015b51f53" 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="https://3864624312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdo1pkMnofwxf3lpWftw%2Fuploads%2FGpFfuDGSUrkNRm6s8Li8%2FChatbot_Appearance.png?alt=media&amp;token=54dc7cb2-4874-4efa-b595-8102f6ed49cc" 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).