Help Center › Visual Builder - Sections

Every section you can add inside the Visual Profile Builder is listed here with its type, what it displays, configuration options, and practical tips.

Sections come in two types:

  • Dynamic — content is pulled automatically from a data source (user, team, or company). Change the underlying data and the section updates everywhere it's used.
  • Static — content is entered directly in the builder. It stays fixed unless you edit the template.

For an explanation of data sources and how to switch between them, see [Data Sources →](./data-sources.md).

---

Confirmed sections

The sections below are confirmed as present in the current section registry. Sections marked as plan-dependent may not appear in your builder if your account or template type does not include them.

---

Header

| Property | Detail |

|----------|--------|

| Type | Dynamic |

| Data sources | User, Team, Company |

A full-width hero area at the top of the profile. Typically the first section on any template.

What it shows:

  • Background image (banner/hero image from the data source)
  • Profile photo overlaid on the background
  • Optionally: the profile owner's name below the photo

Configuration options:

  • Toggle profile photo on or off
  • Toggle name display on or off
  • Choose display mode: image only, name only, or image with name
  • Upload or link the background image directly in the template (overrides the data source image)
  • Adjust photo size and border radius (circular vs. square crop)

Tips:

  • Keep background images at least 1200 × 400 px for a crisp display on high-resolution screens.
  • If you are using a company-wide template, set the data source to Company so the background image comes from the company branding rather than each individual's personal photo.

---

Profile Info

| Property | Detail |

|----------|--------|

| Type | Dynamic |

| Data sources | User, Team, Company |

Displays the primary text identity of the profile — the information a visitor sees immediately below the header.

What it shows:

  • Full name
  • Job title
  • Department
  • Company name
  • Headline / tagline

Configuration options:

  • Toggle each field on or off individually
  • Override any field with static text (e.g. fix the company name regardless of the data source)
  • Adjust font size, weight, alignment, and colour per field
  • Set the data source to control whose name and title appear

Tips:

  • For team templates, set the data source to User so each person's own name and title appears — not the team name.
  • Use the headline field for a short personal strapline or value proposition (e.g. "Helping businesses grow through digital networking").

---

Contact Details

| Property | Detail |

|----------|--------|

| Type | Dynamic |

| Data sources | User, Team, Company |

A structured list of contact fields. Each field can be shown or hidden independently.

Available fields:

  • Work email
  • Personal email
  • Mobile phone
  • Work phone
  • Website
  • Address

Configuration options:

  • Toggle each field on or off
  • Choose display style: plain text, button, or link
  • Choose icon style: show icon, hide icon, or icon only
  • Set the data source per field (all fields inherit from the section's data source unless overridden)

Tips:

  • For a clean look, show only the fields that are most useful to a visitor — typically mobile, work email, and website.
  • If your company has a shared support number, set the Work Phone field's data source to Company or Team so it appears consistently across all staff profiles.

---

Social Media Links

| Property | Detail |

|----------|--------|

| Type | Dynamic |

| Data sources | User, Team, Company |

Displays the profile's social and external website links.

What it shows:

  • All active social media links (LinkedIn, Instagram, X/Twitter, Facebook, etc.)
  • Custom website links added to the profile

Configuration options:

  • Display style: plain list, buttons, or icon-only row
  • Icon size: small, medium, or large
  • Icon spacing and colour
  • Data source: User (personal links), Team (shared team links), or Company (corporate links)

Tips:

  • Icon-only style works well beneath the header for a compact, professional look.
  • For company or team templates, set the data source to Company so corporate social profiles appear — this ensures consistency rather than showing each individual's personal accounts.

---

Call to Action (CTA)

| Property | Detail |

|----------|--------|

| Type | Dynamic |

| Data sources | User, Team, Company |

A prominent button that invites the visitor to take a specific action. The most common use is the Add to Contacts (vCard download) button.

What it shows:

  • A button with customisable label
  • On click: triggers a vCard download pre-filled with the contact's details from the chosen data source

Configuration options:

  • Button label text (default: "Add to Contacts")
  • Button colour, border radius, and width
  • Data source: controls whose contact information is embedded in the downloaded vCard

Tips:

  • Place this section near the top of the template — visitors who tap an NFC card often want to save the contact immediately.
  • Use the Company data source only if you want the vCard to contain the company's main number and address rather than the individual's own details.

---

Text

| Property | Detail |

|----------|--------|

| Type | Static |

A free-form text block for custom content.

Configuration options:

  • Full rich-text editing: bold, italic, headings, bullet lists, links
  • Text alignment: left, centre, right
  • Font size and colour
  • Background colour and padding

Tips:

  • Use for bios, mission statements, or any copy that does not come from a data field.
  • Keep paragraphs short — profile visitors are usually on mobile and skim rather than read.

---

Button

| Property | Detail |

|----------|--------|

| Type | Static |

A standalone call-to-action button. Unlike the CTA section, this links to a fixed URL or a document upload rather than triggering a vCard download.

Configuration options:

  • Button label
  • Link URL or uploaded document (PDF, image, etc.)
  • Button colour, width, alignment, and border radius
  • Open in same tab or new tab

Tips:

  • Use for links to a booking page, a portfolio PDF, or a campaign landing page.
  • For document uploads, the file is hosted by NFC Tagify — no external hosting needed.

---

Divider

| Property | Detail |

|----------|--------|

| Type | Static |

A horizontal line used to separate sections visually.

Configuration options:

  • Line colour
  • Line thickness (1 px – 4 px)
  • Width (full width or inset with padding)
  • Margin above and below

---

Single Image

| Property | Detail |

|----------|--------|

| Type | Static |

A single image block, useful for logos, product photos, or visual branding.

Configuration options:

  • Upload image or paste URL
  • Crop style: fill, contain, or original size
  • Border radius (square or rounded)
  • Link on click: optional URL the image links to
  • Max width and alignment

---

Image Row

| Property | Detail |

|----------|--------|

| Type | Static |

Two images displayed side by side.

Configuration options:

  • Upload or link each image separately
  • Equal or unequal column widths
  • Gap between images
  • Each image can have its own link

Tips:

  • Works well for before/after comparisons, product shots, or dual logos.
  • On narrow mobile screens the images may stack — check the mobile preview to verify.

---

Video

| Property | Detail |

|----------|--------|

| Type | Static |

Embed a video from a supported source.

Supported sources:

  • YouTube
  • Vimeo
  • Loom
  • Direct video URL (MP4)

Configuration options:

  • Paste the video URL — the embed is generated automatically
  • Autoplay on/off (off by default — autoplay is blocked by most mobile browsers)
  • Loop on/off
  • Aspect ratio: 16:9 (default), 4:3, or square

---

Custom HTML

| Property | Detail |

|----------|--------|

| Type | Static (with optional data binding) |

A raw HTML and CSS block for advanced customisation. Intended for users comfortable with web code.

What you can do:

  • Write arbitrary HTML and inline CSS
  • Reference basic profile data tokens [NEEDS VERIFICATION: full list of available tokens]
  • Embed third-party widgets (e.g. a booking widget, a map embed)

Configuration options:

  • Code editor with syntax highlighting
  • Toggle safe-mode sanitisation on or off [NEEDS VERIFICATION: available in all plans]

Tips:

  • Test thoroughly in the Preview before saving — invalid HTML can break the section's layout.
  • Avoid embedding external scripts that load large third-party libraries, as they will slow down profile load time.

---

Additional sections (plan-dependent)

The following sections have been documented in the system and may appear in your builder depending on your plan or template configuration. Availability may vary:

  • QR Code — embeds the profile's QR code directly in the page
  • User Bio / About — dynamic or custom bio text
  • Experience — work history entries
  • Education — education history entries
  • Skills — skills list with optional proficiency indicators
  • Services — service offerings with title, description, and icon
  • Team List — grid or list of team members
  • Brand Banner — full-width company banner image
  • Brand Statement — company mission or vision text
  • Legal Notice / Brand Footer — copyright or legal footer text
  • Spacer — empty spacing block

If a section you expect to see is not visible in your builder, check that your account plan supports it or contact support.

---

Related: [Visual Profile Builder](../template-visual-builder.md) · [Data Sources](./data-sources.md) · [QR Code Designer](/help/qr-templates)