# Styling the Aisera Webchat
## Overview
The Aisera Platform offers a customizable [Webchat](/aisera-platform/channels/aisera-webchat.md) channel that allows users to interact with bots. This default webchat includes various components that can be tailored using CSS to match your brand's style seamlessly.
For more information about setting up a web channel, see also: [**Add a Web Channel**](/aiseragpt/how-to-set-up-an-aiseragpt-bot/add-a-channel.md) and [**Customize Your AiseraGPT**](/aiseragpt/how-to-set-up-an-aiseragpt-bot/customize-the-look-and-feel-of-your-aiseragpt.md).
## Webchat Components
The following diagram breaks down the visual components of the Aisera Webchat interface. use thee numbered legend below to identify specific elements of the webchat.
1. Header
2. Channel Logo
3. Chatbot Name
4. More
5. Resize and Collapse Controls
6. Message Banner
7. Bot Icon
8. Initial Greeting Message
9. Initial Action Recommendations
10. Footer Aisera Logo
11. Opener Icon Image
12. Opener Message
13. Opener Message Placement
## Customizing the Webchat
To customize the look of your webchat navigate to **Channels > Your Channel** to edit the appearance of your webchat channel. There are two modes or editing the webchat channel:
**Standard:** This mode simplifies customization by offering a guided experience. You can effortlessly personalize their webchat by filling in standard fields for each component, ensuring a quick setup.
**CSS Mode:** This mode enables you to edit the webchat's CSS directly, offering customization flexibility but possibly resulting in a less cohesive appearance.
## Standard Mode Fields
### Opener Icon
This is the imaged displayed for the opener of the webchat. Ensure this image is at least 50x50 pixels for clear visibility.
### Opener Background Color
This changes the background of the chat opener container.
### Opener Size
This sets the size of the opener in pixels. The opener adjusts content to fit its size. Larger images will shrink, and smaller ones will enlarge, possibly causing blurriness.
### Opener Placement
Determines which corner of the viewport the opener use as the origin.
{% hint style="info" %}
The opener is placed on your webpage relative to the viewport. It is best practice to ensure that the opener does not obscure content or interfere with other actions on your webpage.
{% endhint %}
### Opener Right/Left
This value sets how far the opener is offset from the edge of the viewport horizontally.
### Opener Bottom
This value sets how far the opener is offset from the edge of the viewport vertically.
### Allow Removal
This enables a button in the header of the webchat that allows users to hide both the webchat and the opener from the webpage. If this button is pressed, the webchat and opener will be hidden for 24 hours at which point the opener will automatically begin showing again.
If this configuration is enabled, the host webpage should then provide a way to show the opener or webchat at the user's request. This can be done using either the `aisera.webchat.show` message, or the `aisera.webchat.open message`.
The following is an example of a button which would show the webchat again:
```html
```
### Opener Message Time
Sets the time before the **Opener Message** is displayed if the webchat has not been opened during that time. This must contain a value is there is an Opener Message.
### Opener Message
The message displayed to a user after as set amount of time, nudging the user to interact with your bot. This message only appears if the webchat has not been opened before the set amount of time has passed, and will not display more than once if the page is not reloaded.
### Opener Message Closing Time
This sets the amount of time to hide the **Opener Message** if the **Opener Message** is closed by a user. After the period of time has elapsed the opener message will begin displaying again.
### Hide Webchat Resize
This configuration hides the webchat resize button.
### Minimized Window Size
This sets the size of the Webchat window while the Webchat is minimized. The **Width** is set in pixels. The **Height** is set as a percentage of the total vertical space within the viewport minus the offset in [Opener Bottom](#opener-bottom).
### Maximized Window Size
This sets the size of the Webchat window while the Webchat is minimized. The **Width** is set in pixels. The **Height** is set as a percentage of the total vertical space within the viewport minus the offset in [Opener Bottom](#opener-bottom).
### Chatbot Name
This field changes the name of the bot displayed in the header of the Webchat.
### Logo
This allows you to change the logo displayed next to the **Chatbot Name** in the header. This image will be scaled to to have a maximum height of 26 pixels while maintaining the aspect ratio of the original image.
{% hint style="info" %}
If you provide a logo image but no **Chatbot Name** only the logo will appear. This allows you to supply an image containing both your logo and brand name with your desired typography.
{% endhint %}
### Logo Alt Text
This field defined the alternative text for the brand logo image. This string is read by screen readers and is displayed if the image fails to load.
{% hint style="info" %}
Avoid using "Logo of..." or "Image of..." in the alt text. Screen readers will announce the element as a graphic. Simply use "\" for this text.
{% endhint %}
### Header Background Color
This field sets the hex code for the header background color.
{% hint style="info" %}
Ensure the header background has a contrast ratio of at least 4.5:1 against the [header text color](#header-text-color) for [accessibility compliance](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).
{% endhint %}
### Header Text Color
This fields sets the hex code for the text color in the header. This will also affect the color of the default Icons within the header.
{% hint style="info" %}
Ensure the text color has a contrast ratio of at least 4.5:1 against the [header background color](#header-background-color) for [accessibility compliance](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).
{% endhint %}
### Border Color
Sets the border color between the header, message list, and chat box areas.
### Icon Fields
The icon fields allow you to change the default icons for each operation. This can be done by uploading an image file to be used in place of the default icon. Icons will be scaled to a fixed size so it is recommended that the image input is of a similar size to avoid images becoming blurry or losing find detail.
* Maximize Icon
* Minimize Icon
* Collapse Icon
* More Menu
* Refresh Session Icon
* Sound Off Icon
* Sound On Icon
* Email Transcript Icon
* Logout Icon
### Link Color
This field sets the hex code for all hyperlinks served to a user by the chatbot.
{% hint style="info" %}
Ensure the link color has a contrast ratio of at least 4.5:1 against the chat bubble background for [accessibility compliance](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).
{% endhint %}
### Required Asterisk
Determines the visibility of the asterisk, used as a "required" indicator, on input labels when filling out forms within the chat bot.
### Bot Icon
This field sets the image displayed next to your bot's messages in the chat message list. This image has a fixed width of **36px**. Uploaded images should have a **1:1** aspect ratio to avoid distortion. To prevent detail loss when scaling down small images, it's advisable to use a simplified logo or mascot.
### User Background Color
This field sets the hex code for the background of the user chat messages in the message list.
{% hint style="info" %}
Ensure the user background color has a contrast ratio of at least 4.5:1 against the [user text color](#user-text-color) for [accessibility compliance](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).
{% endhint %}
### User Text Color
This field sets the hex color code for the text contained in the user chat messages in the message list.
{% hint style="info" %}
Ensure the user background color has a contrast ratio of at least 4.5:1 against the [user background color](#user-background-color) for [accessibility compliance](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).
{% endhint %}
### Live Agent Icon
This field sets avatar image displayed when a live agent joins the conversation or takes over for the bot. This image has a fixed width of **36px**. Uploaded images should have a **1:1** aspect ratio to avoid distortion. To prevent detail loss when scaling down small images, it's advisable to use a simplified graphics.
### Show Input Filed
This field determines the *visibility* of the text input allowing users to enter arbitrary requests.
{% hint style="warning" %}
This affects the HTML element's *visibility* only and does not prevent arbitrary requests from being submitted to the webchat.
{% endhint %}
### Show Aisera Logo
This field determines the visibility of the "Powered by Aisera" logo in the footer of the chat window.
### Footer Message
This field allows you to add a supplementary message to the footer. This field allows a maximum of 200 characters and supports bold, italic, and hyperlink formatting.
### Send Icon
This field allows you to replace the default paper airplane send icon used to submit text to the bot. The image dimensions will be set to **20x20px**.
## Best Practices
Here are best practices for styling your webchat. Adhering to these will enhance the appearance and functionality of your webchat.
### Use of Color Hues
To maintain a professional and cohesive interface, limit your color palette to three to four color hues. Over-complicating the color scheme can become distracting an decrease readability within the webchat.
### Text Contrast and Accessibility
To ensure your chat interface is accessible for everyone, including individuals with visual impairments or those in high-glare environments, maintain a contrast ratio of **4.5:1** between text and the background of the text container. Learn more about this from the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).
### Font Size and Legibility
Maintain a minimum body font size of **15px** to ensure the conversation remains readable for all users across mobile and desktop devices.
### Opener Icon Size
For optimal clarity and visibility, ensure that the image designated for the opener icon is no smaller than 50x50 pixels in size. This will enhance the visual quality and ensure that the icon remains distinct and easily recognizable to users.
---
# Agent Instructions: 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:
```
GET https://docs.aisera.com/overview-of-aisera/getting-started-guide/styling-the-aisera-webchat.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.