> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zazubot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme

export const LoomVideo = ({id}) => <div style={{
  position: 'relative',
  paddingBottom: '64.63195691202873%',
  height: 0
}}>
    <iframe src={`https://www.loom.com/embed/${id}`} allowFullScreen style={{
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  borderRadius: '8px'
}}></iframe>
  </div>;

The theme tab allows you to customize the look of your zazubot.

## Global

This section allows you to enable or disable the zazubot 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="https://mintcdn.com/zazubot/_eRGnFfHYvpabed3/images/theme/avatar.png?fit=max&auto=format&n=_eRGnFfHYvpabed3&q=85&s=f4a0047dc6f17b0426fa3dac04067112" alt="Avatar" width="2728" height="1526" data-path="images/theme/avatar.png" />
</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="https://mintcdn.com/zazubot/_eRGnFfHYvpabed3/images/theme/custom-css.png?fit=max&auto=format&n=_eRGnFfHYvpabed3&q=85&s=47fe10c2011e2404d5e3fcd9e7d0988d" alt="Custom css inspection" width="1918" height="1526" data-path="images/theme/custom-css.png" />
</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 theme={null}
.typebot-button {
  border-radius: 40px;
  background-image: linear-gradient(to right, #e052a0, #f15c41);
  border: none;
}
```

<Frame>
  <img src="https://mintcdn.com/zazubot/_eRGnFfHYvpabed3/images/theme/fancy-button.png?fit=max&auto=format&n=_eRGnFfHYvpabed3&q=85&s=a676c4979610abdfd54c0385bff06ade" alt="Fancy button" width="924" height="517" data-path="images/theme/fancy-button.png" />
</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 theme={null}
[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="https://mintcdn.com/zazubot/_eRGnFfHYvpabed3/images/theme/button-inspect.png?fit=max&auto=format&n=_eRGnFfHYvpabed3&q=85&s=43f8b3fdec4cc5d83290a1f45c5add2d" alt="Button inspect" width="2946" height="1526" data-path="images/theme/button-inspect.png" />
</Frame>