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

export const MediaCard = ({title = '', url, type = 'demo'}) => {
  const attributes = type === 'demo' ? {
    'data-navattic-open': url,
    'data-navattic-title': title
  } : {
    'data-video': url
  };
  return <div {...attributes} className="hidden w-auto cursor-pointer overflow-hidden rounded-lg border border-gray-200 shadow-sm md:inline-block dark:border-gray-700">
  <div className="flex items-center gap-3 bg-white px-3 py-2 dark:bg-gray-800">
    <div className={`flex h-7 w-7 items-center justify-center rounded-md ${type === 'video' ? 'bg-blue-100 dark:bg-blue-900' : 'bg-orange-100 dark:bg-orange-900'}`} style={{
    backgroundColor: type === 'video' ? 'var(--video-bg)' : 'var(--demo-bg)'
  }}>
      <Icon icon={type === 'video' ? 'circle-play' : 'square-mouse-pointer'} color={type === 'video' ? 'var(--video-icon)' : 'var(--demo-icon)'} />
    </div>
    <div>
      <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
        {type === 'video' ? 'Watch video' : 'Try a demo'}
      </div>
      <div className="text-sm text-gray-500 dark:text-gray-400">{title}</div>
    </div>
  </div>
  <style jsx>{`
    :root {
      --video-bg: #dbeafe;
      --video-icon: #2563eb;
      --demo-bg: #ffedd5;
      --demo-icon: #ea580c;
    }
    :global(.dark) {
      --video-bg: #1e3a8a;
      --video-icon: #60a5fa;
      --demo-bg: #7c2d12;
      --demo-icon: #fb923c;
    }
  `}</style>
</div>;
};

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 element colors in a capture (such as background, text, or border colors) using a Color-type custom property. This is the recommended way to apply a customer's brand colors to a demo.

<MediaCard url="https://navattic-website.navattic.com/ui1p0o0f" title="Color personalization 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**.