Skip to content

Themes

Create and manage visual themes for consistent branding across all demos.

9 min
Themes

About this lesson

Create and manage visual themes for consistent branding across all your demos. This lesson covers theme creation, global style settings, and theme application workflows.

Key takeaways

  • Create custom themes
  • Apply themes to multiple demos
  • Manage global brand styles
  • Update themes across demos
Prefer to read? Expand to read the lesson

Setting a Consistent Standard

Global workspace themes are how you set a consistent standard for every Supademo created in a workspace.

Instead of making branding and layout decisions demo by demo, themes let you define those choices once and apply them automatically. That way, every new demo starts on brand and behaves the same way by default.

Themes live at the workspace level. This is especially important for Enterprise teams, because each workspace has its own theme. If you use multiple workspaces, themes are configured separately for each one.

The goal here is simple: consistency without extra effort. Individual creators shouldn't have to think about branding, layout, or default behavior every time they record a demo.

Branding

One of the first things themes control is branding.

This includes the watermark call-to-action, which is most relevant for HTML and sandbox demos shown in full-screen mode. In those demos, there's no share page button and no other persistent CTA visible, so the watermark fills that gap.

For guided screenshot demos, or for teams on Scale plans, the watermark is often unnecessary because the share page button already serves that purpose. As a general best practice, it's better to use one CTA or the other — not both.

Themes also control the share page logo and favicon. These ensure that when a demo is opened or shared, it clearly reflects your brand. Favicons should be sized correctly so they display cleanly in browser tabs.

It's worth noting that the share page button only appears on guided screenshot demos. If your team primarily records HTML demos, this setting only applies when screenshot demos are used.

Visual Behavior

Beyond branding, themes define how demos behave visually.

Hotspot defaults are set here, including background color, whether step counts are shown, and whether hotspot text is always visible or only appears on hover.

If you already have the progress bar enabled, step counts often add unnecessary clutter. Many teams choose to disable them to keep demos cleaner.

The default text visibility setting controls whether annotations are always visible or only appear on hover. Keeping text visible by default usually improves clarity, especially in guided demos.

Navigation buttons like back and next are also defined at the theme level. These defaults can still be overridden inside individual demos when needed.

End-of-Demo CTAs

Themes also control the default end-of-demo call to action.

When enabled, this automatically adds a branded CTA step to the end of every demo, such as booking a meeting, contacting support, upgrading, or starting a trial. While this can always be customized per demo, enabling it globally helps ensure demos don't end without a clear next step.

Typography and Music

Fonts are managed through themes as well, which keeps typography consistent across all demos. Custom fonts can be uploaded if needed, or teams can choose from the available defaults.

Background music is also controlled at the workspace level. Teams can enable or disable music entirely or upload custom tracks that creators can then use in individual demos.

UI Elements

Themes also control structural UI elements like the browser bar and progress indicator.

The browser bar appears at the top of guided screenshot demos and helps separate Supademo controls from the recorded product UI. This is especially helpful when the product itself has dense navigation near the top of the screen. Best practice is to keep the browser bar enabled.

The progress bar appears at the bottom of a demo. For most use cases, it's best left off. It can interfere with hotspot placement and is usually only helpful for unusually long demos, which are generally discouraged.

Additional Settings

Another workspace-level setting controls whether embedded demos can be opened in a new browser tab. This is enabled by default and recommended, since it gives viewers an easy way to expand demos to full size.

Workspaces can also configure a custom domain so demos are shared from a branded URL instead of a Supademo subdomain. This requires DNS setup and sometimes IT involvement, but it significantly improves trust and polish for customer-facing demos.

SEO Settings

Finally, themes include default SEO settings.

When enabled, step descriptions appear on the share page. This supports viewers who prefer reading, improves accessibility, helps with search and AI indexing, and generally improves discoverability. This setting is usually recommended.

Showing the author on the demo page is often unnecessary and best left off, except in internal training scenarios where it's helpful to know who created a demo.

Allowing search engines to index demos is recommended for public-facing content, as it helps demos contribute to organic discovery.

Summary

At a high level, workspace themes define the foundation for how Supademos look and behave across a team.

With that foundation in place, the next step is connecting Supademo to the rest of your stack.

Supademo offers a wide range of integrations across various categories, making it easier to streamline your workflows, enhance demo performance, and gather deeper insights. In the next lesson, we'll walk through the different types of integrations available and how they fit into sales, marketing, support, and internal workflows.

Try interactive demos of features in this lesson

Experience step-by-step examples of features you just learned