Customization

Transform your demos from generic walkthroughs into polished, branded experiences with custom logos, colors, fonts, CTAs, and advanced personalization.

Branding: Logos, Colors, and Fonts

Make every demo feel like a natural extension of your brand:

Logo

• Upload your company logo to appear in the demo player header
• Set a favicon for demos hosted on SupaDemo links
• Logos can be positioned in the top-left or top-center of the player

Colors

• Primary color: Applied to buttons, hotspot highlights, and navigation elements
• Background color: The color behind the demo screenshots
• Text color: Annotation text and UI label colors
• Accent color: Used for hover states and interactive elements

Fonts

• Choose from a library of web-safe fonts, or upload your own custom font files
• Set separate fonts for headings and body text
• Control font sizes for different annotation types

Custom Domains

Instead of sharing demos from app.supademo.com/demo/..., host them on your own domain:

• Configure a custom domain like demo.yourcompany.com
• Add a CNAME record in your DNS settings pointing to SupaDemo's servers
• SSL certificates are provisioned automatically
• All shared links and embeds use your custom domain

Annotation Styles

Customize how annotations appear in your demos:

Call-to-Action Buttons

Add CTAs at the end of your demos (or between steps) to drive viewer action:

• Sign up / Free trial: Link to your registration page with a prominent button
• Book a demo: Connect to your Calendly or scheduling tool for live demo bookings
• Learn more: Link to documentation, pricing, or feature pages
• Next demo: Chain multiple demos together by linking to the next relevant demo

Conditional Logic

Show different content based on viewer attributes or choices:

• Role-based: Show different steps for different user roles (admin vs. user)
• Feature-based: Skip or show steps based on which features the viewer's plan includes
• Response-based: Branch based on form responses or quiz answers within the demo

Personalization with Variables

Use dynamic variables to personalize demos for each viewer:

# In your annotation text:
"Welcome, {{first_name}}! Let's set up your
{{company_name}} workspace."

# Pass variables via URL parameters:
https://demo.yourcompany.com/onboarding
  ?first_name=Sarah
  &company_name=Acme+Corp

# Result for the viewer:
"Welcome, Sarah! Let's set up your
Acme Corp workspace."

Custom CSS

For complete control over the demo appearance, inject custom CSS:

/* Custom annotation styling */
.supademo-tooltip {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  font-family: 'Inter', sans-serif;
}

/* Custom hotspot pulse */
.supademo-hotspot {
  border-color: #6366f1;
  animation-duration: 1.5s;
}

/* Custom CTA button */
.supademo-cta-button {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 8px;
  font-weight: 600;
}

White-Labeling

Enterprise plans offer full white-labeling capabilities:

• Remove all SupaDemo branding from the demo player
• Replace with your own brand identity throughout the experience
• Custom domain with no SupaDemo references in URLs
• Custom email notifications when demos are shared or viewed
• Fully branded analytics dashboard for your team