Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.navattic.com/llms.txt

Use this file to discover all available pages before exploring further.

Capture personalization lets you make parts of a demo dynamic — replacing text, images, or colors 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. For image personalization, you need at least one custom property of the Image type.

Types of personalization

You can personalize three types of elements in a capture:
TypeWhat it changesExample
TextAny text element in the captureA visitor’s name, company, or role
ImageAny image element in the captureA customer’s logo or branded banner
StyleCSS properties like color or backgroundA customer’s brand color

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 styles

Style personalization lets you change CSS-based properties — such as background color or text color — using custom property values. This is useful for applying a customer’s brand colors to a demo.
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, background-color), select the custom property that will supply the value, and 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.