> ## 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.

# Personalizing captures

> Customize text, images, colors, and styles in captures using custom properties.

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.

<Note>
  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.
</Note>

## Types of personalization

You can personalize four types of elements in a capture:

| Type      | What it changes                                                   | Custom property type |
| --------- | ----------------------------------------------------------------- | -------------------- |
| **Text**  | Any text element in the capture                                   | String               |
| **Image** | Any image element in the capture                                  | Image                |
| **Color** | Color CSS properties (background color, text color, border color) | Color                |
| **Style** | Non-color CSS properties (font size, padding, border radius)      | String               |

## Personalizing text

<Steps>
  <Step title="Open the capture editor">
    From your demo, open the capture you want to personalize.
  </Step>

  <Step title="Select a text element">
    Click the text element you want to personalize. In the **Magic Editors** panel, open **Personalization**.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

## 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.

<Note>
  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](/demos/personalized) for details.
</Note>

<Steps>
  <Step title="Open the capture editor">
    Open the capture that contains the image you want to personalize.
  </Step>

  <Step title="Select the image element">
    Click the image you want to replace. In the **Magic Editors** panel, open **Personalization**.
  </Step>

  <Step title="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.
  </Step>

  <Step title="Set a fallback image">
    Upload a fallback image. This is shown to visitors when no custom image variable is provided for their session.
  </Step>

  <Step title="Apply to the collection (optional)">
    Check **Replace all instances** to apply the same personalization setup to matching image elements across the capture collection.
  </Step>
</Steps>

## 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.

<Note>
  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.
</Note>

<Steps>
  <Step title="Select an element in the capture editor">
    Click the element whose color you want to personalize.
  </Step>

  <Step title="Open Style personalization">
    In the **Magic Editors** panel, open **Personalization**, then select **Style**.
  </Step>

  <Step title="Choose a color CSS property">
    Select the CSS property you want to change — for example, **background-color**, **color**, or **border-color**.
  </Step>

  <Step title="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**.
  </Step>
</Steps>

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.

<Steps>
  <Step title="Select an element in the capture editor">
    Click the element whose style you want to personalize.
  </Step>

  <Step title="Open Style personalization">
    In the **Magic Editors** panel, open **Personalization**, then select **Style**.
  </Step>

  <Step title="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.
  </Step>
</Steps>

## 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.

<Steps>
  <Step title="Open Share link settings">
    From your demo, go to **Share link settings** (or create a new share link in Launchpad).
  </Step>

  <Step title="Enter personalization values">
    Fill in the custom property values for the recipient — for example, their company name, logo, or brand color.
  </Step>

  <Step title="Share the link">
    The link is now personalized for that recipient. You can create separate links for different accounts, each with their own values.
  </Step>
</Steps>

## 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**.