Custom CSS Examples🎨

You can personalize the look and feel of your Videobot by applying your own CSS styles. These changes apply globally across the entire Videobot interface — not just individual videos.

Elements you can customize include:

📝 Fonts, text sizes, and text color

🎯 Button colors, including the main action button

🧩 Button size and roundness

🌈 Background colors for different UI elements

👇 Explore the examples below to start styling your Videobot with custom CSS.

🔤 Background colors

🎨 Example: Customizing Videobot Background

.videobot-main {
    background: red; /* Choose your color */
}

🔤 Fonts

You can apply custom fonts to your Videobot by defining them using @font-face in your CSS.

All videobot text with a custom font:

@font-face {
  font-family: 'Custom Font';
  src: url('https://...');
}

.videobot {
  font-family: 'Custom Font', sans-serif;
}

Action buttons with a custom font:

@font-face {
  font-family: 'Custom Font';
  src: url('https://...');
}

.button {
  font-family: 'Custom Font', sans-serif;
}

.button.is-primary:before {
  font-family: 'Custom Font', sans-serif;
}

.button:before {
  font-family: 'Custom Font', sans-serif;
}

Note: If you're using a licensed or custom font, you'll need to host it yourself unless it's freely available.
If you need help with font hosting, feel free to contact our Customer Success Team — we're happy to assist.

🖍️ Font Size and Color

You can also customize text size and color across your Videobot using standard CSS.

✏️ Example: Changing Font Size

You can target elements like .button or apply global styles via .videobot.

.videobot {
  font-size: 16px;
}

.button {
  font-size: 14px;
}

🎨 Example: Changing Text Color

You can apply text color globally or to specific components:

.videobot {
  color: #222222; /* Main text color */
}

.button {
  color: #ffffff;
}

.button.is-primary {
  color: #ffffff;
  background-color: #007BFF; /* Optional background change */
}

💡 Tip: When applying global font styles, always use the .videobot class to ensure consistent styling across all embedded videos.

🔘 Button Styling

You can easily adjust the look and feel of buttons in your Videobot using CSS. This includes customizing their height, width, border radius, and background color.

📏 Example: Adjusting Button Height and Width

.button {
  height: 2rem;
  width: 8rem;
}

🟣 Example: Changing Button Border Radius

.button {
  border-radius: 0.5rem;
}

🎨 Example: Setting Button Background Color

.button {
  background-color: #4CAF50;
}

💡 Tip: Use !important sparingly and only when necessary to override existing styles.

🧾 Form Styling

You can customize the appearance of UI elements in the Videobot, such as the contact form. Below is an example of how to style the form background and submission button.

🎨 Example: Customizing Form Background

.form-wrapper {
  background-image: none;
  background-color: #00798F;
}

🔘 Example: Styling the Submit Button

.button.form-submit {
  background-color: white;
}

.button.form-submit:before {
  background-color: white;
}

button.form-submit > span {
  color: #00798F;
}

This example sets a solid background color for the form and inverts the submit button to a white background with colored text for a clean, branded look.

🛠️ Advanced Customization

Videobot is built with flexibility in mind — nearly every visual element can be customized with CSS, as long as you know the class name used in the component.

🔍 How to Find Class Names

To customize a specific element:

1. Open your Videobot in a browser.
2. Right-click the area you want to modify and select Inspect.
3. Use the browser’s Developer Tools to view the HTML structure and find the relevant class names.

Once you have the class name, you can write CSS rules to target and style it however you like.

🤝 Need Help?

If you’re looking to apply advanced customizations or can’t locate the right class, don’t worry — our Customer Success Team is here to help. Just reach out, and we’ll assist you in finding the correct selectors or even help with writing the CSS.

💡 With the right CSS, you can tailor the Videobot experience to perfectly match your brand’s look and feel.