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: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.
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)
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.