Docs are being personalised for new programs
SaaSquatch Help Center

Custom Program Themes

Use a custom theme for your SaaSquatch program widgets or microsite using our visual editors.

Custom theme example

🔗 Getting Started with Custom Themes

Our widget and microsite editors allow you to personalize the themes and branding of your programs. See our guides on customizing program widgets and customizing microsite layouts and pages for help.

🔗 Widget Design Information

There is a wide range of customization that can be made to your program content and experience.

Below are some of the elements you can customize:

Element Options Example
Images
  • 4:1 - 3:1 ratio image.
  • Separate images for mobile and desktop should be optimized for their size
 header-example
Icons
  • SVG file format
  • Icon dimentions with 1:1 ratio
Email Facebook Twitter
Fonts
  • Font file required if not free on Google Fonts
  • .ttf and .otf format files required
Messaging
  • Widget: Heading, Body, CTA
  • Share: Default email, Facebook, and Twitter messaging
  • Email: Subject, Header, Body, CTA, Footer
Colour
  • HTML Hex Color Code e.g. #008000
  • Please make sure to include any custom highlight, and hover option colours
  • Note: Social Media icons must comply with design standard from the social media platform
Buttons
  • 3 or 4 Share buttons
  • Share buttons with or without text
Dimensions
  • Standard pop-up and embedded widgets are 500px wide
  • Width can be configured for custom size
  • Fully responsive and scale seamlessly onto mobile devices
  • Mobile layout configured to display at 499px and below by default
Widget Mockups
  • Include mobile and desktop views if required for widget
  • Include details about hover view customization requirements
  • Assets in mockup should be 1:1 scale, production-ready, assets
  • Copy of brand style guide
  • .sketch Sketch format files
  • .ai Adobe Illustrator format files

    • A reference .ai template for our default theme is available from our Success Team upon request.
Email Templates
  • Can match to existing email designs using source HTML/CSS template for existing email

🔗 Advanced Customization Options

SaaSquatch widgets are based on standard HTML and web components. This makes extending the SaaSquatch widget experience possible for web developers familiar with these web technologies.

If you're familiar with web components, then see our article about how to write your own web components for use in SaaSquatch.