61 lines
1.5 KiB
Plaintext
61 lines
1.5 KiB
Plaintext
---
|
|
sidebarTitle: Overview
|
|
title: Theme
|
|
icon: brush
|
|
---
|
|
|
|
The theme tab allows you to customize the look of your typebot.
|
|
|
|
## Global
|
|
|
|
This section allows you to enable or disable the typebot branding, change the font and the background of your bot.
|
|
|
|
## Chat
|
|
|
|
This section allows you to customize all the chats components (avatars, bubbles, inputs etc...).
|
|
|
|
Click on the bot avatar to change the image:
|
|
|
|
<Frame>
|
|
<img src="/images/theme/avatar.png" alt="Avatar" />
|
|
</Frame>
|
|
|
|
## Custom CSS
|
|
|
|
You can also decide to customize even further by adding any custom CSS you want. For this you right-click on the bot in the Theme page and inspect the element you want to customize:
|
|
|
|
<Frame>
|
|
<img src="/images/theme/custom-css.png" alt="Custom css inspection" />
|
|
</Frame>
|
|
|
|
For example, if I want my buttons to be more rounded, and have a fancy gradient color, I can add this to the custom CSS:
|
|
|
|
```css
|
|
.typebot-button {
|
|
border-radius: 40px;
|
|
background-image: linear-gradient(to right, #e052a0, #f15c41);
|
|
border: none;
|
|
}
|
|
```
|
|
|
|
<Frame>
|
|
<img src="/images/theme/fancy-button.png" alt="Fancy button" />
|
|
</Frame>
|
|
|
|
### Customize a single button color
|
|
|
|
Thanks to custom CSS, you can customize the color of a single button for example by using the `data-itemid` attribute:
|
|
|
|
```css
|
|
[data-itemid='cl3iunm4p000f2e6gfr8cznnn'] {
|
|
background-color: gray;
|
|
border-color: gray;
|
|
}
|
|
```
|
|
|
|
To find the item ID of a button, right-click on the button and inspect the element:
|
|
|
|
<Frame>
|
|
<img src="/images/theme/button-inspect.png" alt="Button inspect" />
|
|
</Frame>
|