Knowledge Base
ResourcesContact Support
  • Getting started
    • Recommended playbooks
    • Common FAQs
  • Record & Upload
    • By Supademo type
      • HTML interactive demos
      • Screenshot/video interactive demos
      • Sandbox demo environment
    • By record/upload type
      • Chrome extension
        • Smart blur
      • Desktop app
      • Figma plugin
      • Upload content
      • Record screen and webcam
  • Editing
    • HTML editing
      • Find and replace
      • AI Personalizer
    • Hotspots
      • HTML-based hotspots
      • Invisible hotspots
    • Chapters
      • Call-to-Action
      • Password protect
      • Email lead capture
      • Native forms
      • Embed forms & apps in Chapters
    • Browser and progress bar
    • Add, remove, duplicate steps
    • SEO and titles
    • Blur, crop and annotate
      • Media fit & aspect ratio
    • Animations
      • Zoom and pan
      • Autoplay and loop
      • Hotspot and chapter animations
    • Background music
    • Video splitting
  • Personalization
    • Custom branding
      • Configure custom domain
      • Workspace theme
      • Supademo theme
      • Backgrounds and frames
      • Custom fonts
      • Watermark
    • Voiceovers
      • AI Voiceover
      • Manual Voiceover
    • Translations
      • Translations Hub
    • Variables and tokens
      • Variables in Showcases
      • Variables in embeds
    • Conditional branching
  • sharing
    • Share as a link
      • Trackable share links
      • Twitter / X interactive links
    • Embed online
      • Instructions for popular apps
    • Exports
      • Copy steps as SOP guide
      • Export to PDF or PNG
      • Export to MP4/GIF
    • Folder sharing
    • In-app product tours
    • Showcase collection
  • Analytics & data
    • General analytics
    • Session metrics
      • Search for leads
    • Trending content
    • Integrations
      • HubSpot integration
      • Salesforce integration
      • Google Analytics integration
      • Slack integration
      • Zapier integration
    • Data & API
      • Developer docs
      • Disable tracking
  • Workspace
    • Folders and subfolders
    • Bulk actions
    • Notifications
    • Account settings
    • Comments & collaboration
    • Team management
      • Add or approve new team members
      • Roles and permissions
  • Enterprise
    • Enterprise administration
    • Create multiple workspaces
    • SSO & SAML
  • Billing & legal
    • Billing & payments
      • Access Invoices
      • Billing FAQ
  • General Security
    • Disable tracking
    • Request account deletion
Powered by GitBook
On this page

Was this helpful?

  1. Personalization
  2. Variables and tokens

Variables in embeds

PreviousVariables in ShowcasesNextConditional branching

Last updated 2 days ago

Was this helpful?

In addition to sharing a personalized Supademo via link, you can embed the personalized Supademo in various platforms.

After adding your dynamic variables throughout your Supademo and creating a personalized link either for a single viewer or many viewers, all you have to do is replace "demo" with "embed" in the URL obtained from the previous step.

Adding a variable to the Showcases' URL parameter will personalize every Supademo within the Showcase that uses the same variable (i.e. {{name}} or {{country}}) Simply add variables by wrapping any text in "{{ }}" and detected variable tokens will be displayed in the Personalized Link section of your share page.

Example 1 (Link for single viewer):

  • https://app.supademo.com/demo/yourdemoID/personalizedLinkId 👇 https://app.supademo.com/embed/yourdemoID/personalizedLinkId

Example 2 (Link for many viewers):

  • https://app.supademo.com/demo/yourdemoID?v_name=NAME&v_company=COMPANY 👇

  • https://app.supademo.com/embed/yourdemoID?v_name=NAME&v_company=COMPANY

Note that no email notifications will be sent in embeds to prevent spamming of user inboxes.

Alternatively, you can also click on Share in any demo and modify the generated code for “Embeds” to represent the variables you want to inject into your Supademo:

<div style="position: relative; padding-bottom: calc(37.947674418604656% + 42px); height: 0;"><iframe src="https://app.supademo.com/embed/yourdemoId" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

Change the above to 👇🏻

<div style="position: relative; padding-bottom: calc(37.947674418604656% + 42px); height: 0;"><iframe src="https://app.supademo.com/embed/yourdemoId?v_name=NAME&v_company=COMPANY" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>