---
title: "Customize chat widget's appearance"
canonical: "https://support.appfire.com/space/CHAT/119210432/Customize%20chat%20widget's%20appearance"
format: markdown
---
> Macro (aura-html)

You can customize the chat button and chat widget’s appearance in the** Appearance** section. To access the screen, open **Project Settings**, and from the sidebar, click **Chat for JSM** > **Appearance**.

## Video overview

> Macro (iframe)

## Color and messages

To change the display appearance of the chat widget on your Jira customer portal and website, you have two options:

![Chat for Jira Service Management Cloud widget appearance settings](media://6329baa6-32d0-4e6c-b8cd-d4429813cf2f)

### Widget color

You can select a color for the chat widget using the interactive color picker.

> 📝 This change will apply to both the Jira customer portal and external websites; however, if you want to have different colors on the website, you can [customize it using code](https://appfire.atlassian.net/wiki/spaces/CHAT/pages/212992003).

### Header and Greeting messages

The changes made here apply to both the Jira customer portal and external websites.

## Jira customer portal

To change the display appearance of the chat button, you have three options:

![Chat for Jira Service Management Cloud theme configuration](media://0312c3d6-6c65-4e29-bc00-616acac0307e)

### Button position

The chat button can only be placed into the page content in either a Footer or Header position. Due to Jira customer portal limitations, it’s not possible to have a floating button. 

### Widget display mode

The chat widget can be displayed as a popup or inline. 

### Button style

Here, you can select one of the built-in styles (`Classic` and `Subtle`), or you can define your own style of the button, setting the text and background color. 

> 📝 Note that the `Custom` button style does not display the Chat for JSM icon.

### Button text

By default, the button text is `Chat with support`. You can customize it on the **Translate and Customize** administration page. Refer to the [related documentation](https://appfire.atlassian.net/wiki/spaces/CHAT/pages/87851558) to learn how.

> ✅ Once you’ve made your changes, don’t forget to click **Save**!