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

# Theme

export const YoutubeVideo = ({id}) => <div style={{
  position: 'relative',
  paddingBottom: '64.63195691202873%',
  height: 0
}}>
    <iframe src={`https://www.youtube.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 bot.

<Frame>
  <img src="https://mintcdn.com/urbiport-eca888d8/jBQWHiudhXbcSyvP/images/builder/theme/bot-theme.png?fit=max&auto=format&n=jBQWHiudhXbcSyvP&q=85&s=cc5f5df4380c999edb46c29f73440098" alt="Bot theme customization" width="3456" height="1918" data-path="images/builder/theme/bot-theme.png" />
</Frame>

## General

This section allows you to enable or disable the bot branding, change the font and the background of
your bot.

### Typography

You can change the font of your bot in the Theme tab under the Global section.

There, you can choose between choosing a font from Google Fonts or defining your own custom font.

## Chat

This section allows you to customize all the conversations components (avatars, bubbles, inputs
etc...).

## 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:

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}
.bot-button {
  border-radius: 40px;
  background-image: linear-gradient(to right, #e052a0, #f15c41);
  border: none;
}
```