> ## 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, and styles in captures using custom properties.

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.

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

## Types of personalization

You can personalize three types of elements in a capture:

| Type      | What it changes                         | Example                             |
| --------- | --------------------------------------- | ----------------------------------- |
| **Text**  | Any text element in the capture         | A visitor's name, company, or role  |
| **Image** | Any image element in the capture        | A customer's logo or branded banner |
| **Style** | CSS properties like color or background | A customer's brand color            |

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

<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, **background-color**), select the custom property that will supply the value, and 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.