Skip to main content
Customize the widget appearance to match your website’s design and branding.

​
Themes

Themes are configured in your Boseat organization settings. The widget inherits the active theme. A theme query key may be added later for per-embed overrides. Available themes (configured in dashboard):
  • light — Light background with dark text (default)
  • dark — Dark background with light text
  • auto — Follows user’s system preference

​
Custom themes

Create a custom theme in your Boseat dashboard:
  1. Go to Settings → Widget
  2. Create a new theme
  3. Configure colors, fonts, and spacing
  4. Save the theme (it applies automatically to the widget)
<iframe
  src="https://embed.boseat.com/YOUR_ORGANIZATION"
  width="100%"
  height="600"
  frameborder="0"
  allow="payment"
  title="Boseat Booking Widget"
></iframe>

​
Customization options

​
Colors

  • Primary color — Used for buttons and highlights
  • Background color — Main widget background
  • Text color — Primary text color
  • Border color — Borders and dividers

​
Typography

  • Font family — Choose from system fonts or web fonts
  • Font sizes — Adjust heading and body text sizes

​
Layout

  • Border radius — Round corners (0px to 16px)
  • Spacing — Padding and margins
  • Button style — Rounded, square, or pill-shaped

​
CSS overrides (advanced)

For advanced styling, you can wrap the iframe and style the container: 
<div class="boseat-widget-container" style="border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: hidden;">
  <iframe
    src="https://embed.boseat.com/YOUR_ORGANIZATION"
    width="100%"
    height="600"
    frameborder="0"
    allow="payment"
    title="Boseat Booking Widget"
  ></iframe>
</div>
Note: You cannot style the widget’s internal content via external CSS due to iframe isolation. Use the dashboard theme editor for internal styling.

​
Localization

Set the locale parameter to change the widget language: 
<iframe
  src="https://embed.boseat.com/YOUR_ORGANIZATION?locale=fr"
  width="100%"
  height="600"
  frameborder="0"
  allow="payment"
  title="Boseat Booking Widget"
></iframe>
Supported locales:
  • en — English (default)
  • fr — French
  • es — Spanish
  • de — German
  • it — Italian

​
Preview and testing

Use the dashboard preview to test themes before deploying:
  1. Go to Settings → Widget
  2. Select a theme
  3. Click Preview to see how it looks
  4. Adjust colors and styles as needed
  5. Save and use the theme name in your embed code

​
Best practices

  • Consistency: Match your website’s color scheme and typography
  • Accessibility: Ensure sufficient contrast between text and background
  • Mobile: Test on mobile devices; the widget is responsive by default
  • Performance: Themes are cached; changes may take a few minutes to propagate

​
WordPress theme integration

When the WordPress plugin is available, you’ll be able to:
  • Select themes from the admin panel
  • Preview themes before publishing
  • Override theme settings per page/post
  • Use shortcode parameters: [boseat-widget organization="ORG"] (theme follows org settings; per-embed overrides may come if a theme key is added)