Help Center › Pure HTML - Placeholder Reference

Placeholders are tokens in the format {{placeholder_name}} that are replaced with live data when a profile page is rendered. This page lists every available placeholder, what it outputs, and notes on any special behaviour.

---

How Placeholders Work

When someone views a digital business card, the platform takes your HTML template and substitutes each {{placeholder_name}} token with the corresponding value from the profile, team, or company record. The result is plain HTML delivered to the viewer's browser.

Rules to remember:

  • Placeholder names are case-sensitive. {{Full_Name}} will not work; use {{full_name}}.
  • A placeholder that has no data renders as an empty string — not an error message, just nothing.
  • Some placeholders (marked below) output rendered HTML rather than plain text. Do not wrap them in

    tags expecting a single line — they produce lists or block elements.
  • Conditional blocks are not supported. {{#if work_email}}...{{/if}} will render literally as text. Use CSS to handle optional fields gracefully (see the FAQ in the [Pure HTML Editor Guide](../pure-html-editor.md)).

---

Full Placeholder Table

Profile Placeholders

These draw from the individual profile's own data.

| Placeholder | What it outputs |

|---|---|

| {{first_name}} | The profile owner's first name |

| {{last_name}} | The profile owner's last name |

| {{full_name}} | First and last name combined (e.g. Jane Smith) |

| {{job_title}} | Job title or role (e.g. Senior Product Designer) |

| {{headline}} | Short bio or headline text set on the profile |

| {{work_email}} | Primary work email address |

| {{work_phone}} | Work / office phone number |

| {{mobile}} | Mobile phone number |

| {{work_website}} | Personal or work website URL |

| {{image_profile_url}} | URL of the profile photo; use as the src of an tag |

| {{image_hero_url}} | URL of the profile's hero / banner image; use as an src or CSS background-image |

| {{social_links_html}} | Rendered HTML list of the profile's own social and contact links (see note below) |

Team / Department Placeholders

These draw from the team or department the profile belongs to.

| Placeholder | What it outputs |

|---|---|

| {{department}} | Name of the team or department |

| {{team_email}} | Team contact email address |

| {{team_phone}} | Team phone number |

| {{team_website}} | Team website URL |

| {{team_logo_url}} | URL of the team logo image |

| {{team_hero_url}} | URL of the team's hero / banner image |

| {{team_links_html}} | Rendered HTML list of the team's social and contact links |

Company Placeholders

These draw from the company the profile belongs to.

| Placeholder | What it outputs |

|---|---|

| {{company}} | Company name (e.g. Acme Ltd) |

| {{company_email}} | Company contact email address |

| {{company_phone}} | Company main phone number |

| {{company_website}} | Company website URL |

| {{company_logo_url}} | URL of the company logo image |

| {{company_hero_url}} | URL of the company's hero / banner image |

| {{company_links_html}} | Rendered HTML list of the company's social and contact links |

Combined Placeholders

These merge data from multiple scopes.

| Placeholder | What it outputs |

|---|---|

| {{all_social_links_html}} | Rendered HTML list combining the profile's links and team links and company links in one block |

| {{image_logo_url}} | The most relevant logo URL — falls back through profile → team → company until it finds one |

Action Placeholders

| Placeholder | What it outputs |

|---|---|

| {{vcard_url}} | A URL (not a button) that triggers a vCard / contact file download when visited. Wrap in an tag to make it clickable. |

---

Notes on Specific Placeholders

{{social_links_html}}, {{team_links_html}}, {{company_links_html}}, {{all_social_links_html}}

These output a block of pre-rendered HTML — typically an unordered list of anchor tags, one per social profile or contact link. You do not need to wrap them in

    tags — the rendered HTML already includes list markup.

    Because they output block-level HTML, do not place them inline inside a

    or . Use them as a standalone block:

    `html

    {{social_links_html}}

    `

    You can style the rendered links via CSS by targeting the elements the platform outputs. [NEEDS VERIFICATION: exact class names on the rendered list items — inspect the preview HTML to confirm.]

    {{all_social_links_html}}

    This is the union of the profile's own links, the team's links, and the company's links. Use it when you want a single complete list without having to include three separate placeholders. It is equivalent to placing {{social_links_html}}, {{team_links_html}}, and {{company_links_html}} one after another, but rendered as a single merged list.

    {{vcard_url}}

    This outputs a URL string only — for example https://id.nfctagify.com/vcard/abc123. To make it a clickable link or button you must wrap it yourself:

    `html

    Save contact

    Save to contacts

    `

    {{image_profile_url}} and {{image_hero_url}}

    Both output a URL string. Use them as the src of an tag or as a CSS background-image value:

    `html

    {{full_name}}

    `

    If the image has not been uploaded, the placeholder renders as an empty string. An with an empty src may show a broken image icon. Add img[src=""] { display: none; } to your CSS to suppress it.

    ---

    Conditionals — Not Supported

    {{#if placeholder_name}}...{{/if}} blocks do not work in the Pure HTML Editor. If you type them, they will appear as literal text on the rendered card.

    Workarounds for optional content:

  • CSS hiding — hide empty image tags or empty links via attribute selectors:

    • `css

    img[src=""] { display: none; }

    a[href=""] { display: none; }

    `

  • Accept the gap — if a field is routinely empty, remove the placeholder from the template rather than trying to conditionally hide it
  • Ensure data is populated — for required fields, make sure all profiles in the scope have that field filled in before assigning the template

    • ---

    Minimal Working Example

    The following is a complete, working template that uses several common placeholders:

    `html

    , ::before, *::after { box-sizing: border-box; }

    body { margin: 0; font-family: system-ui, sans-serif; background: #f5f5f5; }

    .card {

    max-width: 480px;

    width: 100%;

    margin: 24px auto;

    background: #fff;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 2px 12px rgba(0,0,0,0.1);

    }

    .card-header {

    background: #1e293b;

    color: #fff;

    padding: 32px 24px;

    text-align: center;

    }

    .avatar {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid #fff;

    }

    img[src=""] { display: none; }

    h1 { margin: 12px 0 4px; font-size: 1.3rem; }

    .role { margin: 0; opacity: 0.8; font-size: 0.9rem; }

    .card-body { padding: 20px 24px; }

    .email-link { display: block; margin-bottom: 12px; color: #1e293b; }

    .save-btn {

    display: inline-block;

    padding: 10px 20px;

    background: #3b82f6;

    color: #fff;

    text-decoration: none;

    border-radius: 8px;

    font-size: 0.9rem;

    }

    {{full_name}}

    {{full_name}}

    {{job_title}}, {{company}}

    {{social_links_html}}

    Save contact

    `

    ---

    Related

    • [Pure HTML Editor — Complete Guide](../pure-html-editor.md)
    • [Data Sources and Binding](./pure-html-editor/data-sources.md)
    • [Template Visual Builder](../template-visual-builder.md)