Showcase Analytics, GA Integration, Custom Fonts and Backgrounds, Big Design Updates

Missed our June 18th product update? Here's a recap 👇🏽

Click an option below to learn more about the feature: Figma Plugin: create interactive prototypes from frames (beta)

1. Video Splitting: convert any video into a Supademo
2. Slack Integration Salesforce Integration
3. Video Improvements Hey - Joe from Supademo here. I'm excited to share some exciting product updates centered around data and design. Here are some noteworthy updates from the past few weeks:  

Interactive Product Update for July ✨

1) Showcase Analytics

With this new feature, you can track the efficacy of multi-demo Showcases directly on your analytics page. This includes helpful data like: Total Views: unique number of times your Showcase has been viewed;

• Unique Viewers: unique viewers of your Showcase;
• Completion %: Conversion rate of viewers who clicked through every Supademo in the Showcase at least once;
• Views for each Supademo: unique views for each Supademo in the collection;

Similar to Supademo analytics, you can easily measure both aggregate data (all Showcases) or metrics for a specific Showcase.

How to access Showcase Analytics

1. For aggregate Showcase metrics, click "

Analytics " and choose "Showcases" from the toggle at the top of the screen.

2. For individual Showcase metrics, click "

Details → " from a specific Showcase row, or "

Analytics " from the Showcase view page.

Try Showcase Analytics Demo

2) Google Analytics Integration

With the Google Analytics integration, you can now track the performance of your Supademos and Showcases within your own GA dashboard.

This enables you to aggregate all of your measurement while receiving advanced data on geographies, persona, devices, and more. As viewers interact with your Showcases and Supademos, you'll see these metrics in real-time: Track Page Views: Tracking of general page views for Supademos and Showcases.

1. Custom Event Tracking: Tracking of custom GA events to monitor specific user interactions within the demos.

You'll automatically see these events on Google Analytics upon integrating:

CTA Click Event (supademo_cta_click)

Tracks when viewers/users interact with a Chapter step button that has an external link (call-to-action or CTA).

Event Parameters: action: "supademo_cta_click" category: "Link" label: "Supademo Link" value: 1 demo_id: ID of the demo demo_url: URL of the demo cta_url: URL of the clicked call-to-action link

Lead Identification Event (supademo_lead_identify)

Tracks when viewers/users submit their email in a Chapter step.

Event Parameters: action: "supademo_lead_identify" category: "Lead" label: "Supademo Lead" value: 1 demo_id: ID of the demo demo_url: URL of the demo lead_email: Email address of the identified lead

How to enable GA Integration

1. Navigate to the "

Integrations" tab on Supademo.

2. Click " Connnect " next to Google Analytics.

3. Add your GTag in the provided input and click "

Save ".

Try the Google Analytics Demo

3) Custom Backgrounds and Device Frames (Launch Next Week)

Custom Backgrounds

This feature is built for customers looking to another layer of personalization and branding to their Supademos and Showcases. With Custom Backgrounds, you can now frame your Supademo with a pre-set collection of beautiful backgrounds and gradients.

Try Backgrounds Demo

Device Frames

Similar to Custom Backgrounds, you'll soon be able to frame your Supademos with realistic device prototypes like iPhone, iPad, Android and MacBook mockups. This is ideal for embedding Supademos of your mobile apps or interactive demos on your landing pages and product change logs.

How to set up Device Frames or Backgrounds

1. Navigate to a specific Supademo.

2. Click " Backgrounds

" or " Frames" on the new bottom toolbar that will appear on your Supademo's edit page.

3. Choose your desired frame or background and preview your changes live.

4) Custom Fonts

Supademo now supports 10 new custom fonts, which are reflected across Supademo hotspots, chapters, and more. Custom fonts can be set as a default across the entire workspace or for specific Supademos.

Here are the 10 supported fonts

• Inter (Default) Roboto
• Open Sans Poppins Montserrat Lato
• Nunito Merriweather IBM Plex Sans Condensed
• Source Sans 3 Custom Fonts: 30 Second Tutorial

5) More Default Workspace Themes

We've added more options to your default workspace themes, which apply to every new Supademo created by users on your workspace.

New options include: Revamped default Call-to-Action Chapter with branching and gating options;

• Default font for Supademos in your workspace;
• SEO Settings to show authors, allow search engine indexing, or showing descriptions and steps below your Supademo;

Explore Your Default Themes

6) Subtle, Yet Delightful Improvements

Slide previews for progress bar and chapters

Viewers can now hover over the progress bar on a Supademo to see a preview of the image/video and the hotspot text for that particular selection.

Supademo creators can also see this same preview when they hover over a destination slide within Chapters or Hotspots. This simplifies the process of setting up branching demos, while helping end viewers better navigate through your Supademo.

Media Fit Mode: Set and Fix Aspect Ratios Per Slide

It's often difficult to ensure consistent slide/video widths, aspect ratios, or dimensions across every slide in your Supademo. Especially when you're creating a Supademo from uploads or updating a stale product demo.

Previously, this led to situations where certain slides would get cut off, or some slides would see a "punched in" effect.

Media Fit Mode solves this problem. With this feature, you can  fix inconsistent widths, aspect ratios, or resolutions between slides in a single Supademo to reduce distortion and inconsistencies across your slides.

Choose from two different fit modes: Cover: Use to expand the current video or image slide to cover the entire Supademo frame;

• Contain: Use to fit the entire video or image slide to fit within the confines of the Supademo frame.

Animations across your Supademos

These series of hover animations and cursor effects are carefully designed to better imply demo interactivity to end viewers of your Supademo. Based on initial testing, these animations has led to noticeable improvements on initial demo engagement and conversion.

These animations include but are not limited to: Hover effect on mouseover: buttons and hotspots on Supademo now display a delightful animation when users hover over the element.

• Hover over slide: Supademo now changes the cursor to a larger, animated style when users mouse over a slide – implying the area can be interacted with.
• Mute trigger: For Supademos with sound – whether this is a video step, manual voiceover, or AI voiceover – the mute switch is shown on first hover to indicate the presence of sound to the viewer;

Try out some of these animations below 👇🏽

Improved compression for images and videos

Supademo images and videos have been optimized for better compression – leading to better SEO scores and faster load times.

Images and video pre-rendering has also been improved to ensure performance gains across the board!

Slack Integration: Daily Digest

You can now enable a daily digest notification of your top 25 Supademos, directly on Slack. Simply head to your Integrations page and click the Settings icon after setting up the extension!

Figma Plugin Improvements

We've improved the performance your our Figma Plugin to help you convert your existing Figma screens into clickable interactive prototypes. Try it out - it's free!

Coming (Very) Soon: Mac Desktop App

After months in development, we're in the final stages of testing our Mac Desktop App (Windows coming soon). With this new desktop app, you'll be able to record your entire desktop window and capture both desktop apps and mobile emulators in higher quality.

Have a feature request?

Whether you're looking for a new feature or an improvement to an existing experience, we want to hear from you.

Request a feature