Skip to main content
Capture personalization lets you make parts of a demo dynamic — replacing text, images, colors, or styles with values specific to each viewer. You configure personalization in the capture editor, and the values are supplied when you share the demo through a share link or presentation.
Personalization requires custom properties to be configured in your workspace first. Go to Settings > Custom properties to set them up. The property type you need depends on what you are personalizing.

​
Types of personalization

You can personalize four types of elements in a capture:
TypeWhat it changesCustom property type
TextAny text element in the captureString
ImageAny image element in the captureImage
ColorColor CSS properties (background color, text color, border color)Color
StyleNon-color CSS properties (font size, padding, border radius)String

​
Personalizing text

1

Open the capture editor

From your demo, open the capture you want to personalize.
2

Select a text element

Click the text element you want to personalize. In the Magic Editors panel, open Personalization.
3

Add a variable

Click Add personalization and select a custom property from the list. You can optionally set a fallback value — text that appears when no variable is supplied for a visitor.
4

Apply to the collection (optional)

To apply the same personalization to matching elements across all captures in the collection, check Replace all instances before saving.

​
Personalizing images

Image personalization replaces any image element with a custom image you supply per account or audience. It uses custom properties of the Image type.
Images for personalization are uploaded manually — Navattic does not automatically fetch logos or images from a company name or domain. If you want to personalize a company logo automatically from a domain or visitor email, use the built-in Company Logo property instead. See Personalized demos for details.
1

Open the capture editor

Open the capture that contains the image you want to personalize.
2

Select the image element

Click the image you want to replace. In the Magic Editors panel, open Personalization.
3

Choose an image-type custom property

Click Add personalization. Only custom properties of the Image type appear here. Select the property you want to use.
4

Set a fallback image

Upload a fallback image. This is shown to visitors when no custom image variable is provided for their session.
5

Apply to the collection (optional)

Check Replace all instances to apply the same personalization setup to matching image elements across the capture collection.

​
Personalizing colors

Color personalization lets you swap the colors of elements in a capture — such as background colors, text colors, or border colors — using a Color-type custom property. This is the recommended way to apply a customer’s brand colors to a demo.
Color personalization requires at least one custom property of the Color type. Go to Settings > Custom properties and create a new property with the type set to Color. You can set a fallback hex color that is shown when no value is supplied.
1

Select an element in the capture editor

Click the element whose color you want to personalize.
2

Open Style personalization

In the Magic Editors panel, open Personalization, then select Style.
3

Choose a color CSS property

Select the CSS property you want to change — for example, background-color, color, or border-color.
4

Select a Color custom property

Choose a Color-type custom property from the list. Only Color-type properties are available for color CSS properties. If none appear, create one in Settings > Custom properties.
When you share the demo, recipients with a matching color value see their brand color applied across all personalized elements.

​
Personalizing styles

Style personalization lets you change non-color CSS properties — such as font size, padding, or border radius — using String custom property values.
1

Select an element in the capture editor

Click the element whose style you want to personalize.
2

Open Style personalization

In the Magic Editors panel, open Personalization, then select Style.
3

Configure the style rule

Choose the CSS property to change (for example, font-size or border-radius), then select a String-type custom property that will supply the value. Set a fallback value for when no variable is provided.

​
Fallback behavior

Every personalization field should have a fallback. If a visitor accesses a demo without a personalization variable being supplied — for example, via an unparameterized link — the fallback value is shown instead.
  • Text fallback — Plain text displayed in place of the variable
  • Image fallback — A default image uploaded to Navattic
  • Style fallback — A default CSS value (e.g., a hex color)
Without a fallback, the element may appear blank or unstyled for visitors who don’t receive a personalized value.

​
Sharing personalized demos

Once captures are personalized, you supply values when creating a share link or presentation in Launchpad.
1

Open Share link settings

From your demo, go to Share link settings (or create a new share link in Launchpad).
2

Enter personalization values

Fill in the custom property values for the recipient — for example, their company name, logo, or brand color.
3

Share the link

The link is now personalized for that recipient. You can create separate links for different accounts, each with their own values.

​
Troubleshooting

The personalized value isn’t appearing Check that:
  • A custom property value was supplied when creating the share link.
  • The correct custom property is assigned to the element in the capture editor.
  • A fallback is set — if no value is supplied and no fallback exists, the element may appear empty.
I can’t find an image-type custom property in the list Image personalization only shows custom properties of the Image type. If none appear, go to Settings > Custom properties and create a new property with the type set to Image. My style personalization isn’t applying Confirm that the fallback value is a valid CSS value for the property you selected (for example, a valid hex code for a color property). Invalid fallback values may cause the style to appear unstyled. I can’t find a Color custom property when personalizing a color CSS property Color CSS properties (background-color, color, border-color) only accept Color-type custom properties. If none appear in the list, go to Settings > Custom properties and create a new property with the type set to Color.