Help Center › Profile Templates - Visual Builder

Overview

The Visual Profile Builder lets you design your digital business card using drag-and-drop sections. Add blocks for your photo, contact details, social links, bio, and more. No code required. Each section has configurable content and styling. The builder shows a live preview as you edit.

How to Access

  • Open your profile, team, or company (from the hub or sidebar).
  • Go to the Design tab.
  • Click Profile Templates or Template.
  • Choose Visual Builder (or the section-based editor).

    • You can create templates for your profile, your team, or your company. The context (profile/team/company) determines where the template is saved and who can use it.

    Interface

    The builder has four main areas:

    • Canvas — The middle area where sections appear in order. Click a section to select it.
    • Section list — Left side. Shows all sections. Drag to reorder. Click to select.
    • Properties panel — Right side. Two tabs: Properties (content and data) and Style (colours, fonts, spacing).
    • Preview — Live preview of how the template looks. You can switch between mobile and desktop view.

    At the top you’ll find: Save, Assign, Export, and other actions.

    Adding Sections

  • Click Add Section or drag a section type from the components list onto the canvas.
  • Choose from: Header, Profile Info, Contact Details, Social Media Links, Text, Button, Call to Action, Divider, Single Image, Image Row, Video, Custom HTML.
  • The new section appears at the bottom of the canvas. Drag it to change the order.

    • Sections in Detail

    Header

    Hero area with background image and profile photo. Options:

    • Display mode — Both (hero + avatar), hero only, or avatar only.
    • Avatar — Size, shape (circle or square), position (left, center, right), border radius.
    • Hero — Height, background colour.

    Data comes from your profile images (profile photo, cover/banner).

    Profile Info

    Shows name, job title, department, company, and headline. Each field can be turned on or off. Styling: font size, weight, alignment, padding. Data comes from your profile automatically.

    Contact Details

    Individual contact fields: work email, personal email, mobile, work phone, work website, personal website, address. For each field you can:

    • Enable or disable it.
    • Set data source — User, Team, or Company (whose data to show).
    • Add a custom label.
    • Use static text instead of profile data.

    Display style — Plain text, buttons, or icon-only. Style options: font size, alignment, icon size, spacing, colours.

    Social Media Links

    Your social and website links. Options:

    • Data source — User, Team, or Company.
    • Display style — Plain list, buttons, or icon-only.
    • Icon — Shape (circle, square), size, spacing, background style.

    Text

    Custom text block. Full styling: font size, weight, alignment, line height, padding, margin, border, shadow. Use for bios, announcements, or custom copy.

    Button

    A button that links to a URL or triggers a document download. Options:

    • Button text, URL, open in new tab.
    • Action type — URL link or document download.
    • Style — Filled (solid), outline (outlined).
    • Size — Small, medium, large.
    • Alignment — Left, center, right.
    • Icon — Optional icon (e.g. ArrowRight) and position.

    Call to Action (CTA)

    "Add to Contacts" button that downloads the profile vCard. Customise title, subtitle, and button text. The action is always vCard download. No data source options — it always uses the profile being viewed.

    Divider

    Horizontal line between sections. Adjust thickness and colour.

    Single Image

    One image with optional caption. Upload or paste a URL. Options:

    • Width (full, half, custom), alignment.
    • Aspect ratio, object fit.
    • Border, radius, shadow.
    • Caption styling.

    Image Row

    Two images side by side. Good for before/after or portfolio samples. Options:

    • Image widths (e.g. 50/50), gap.
    • Alignment, aspect ratio.
    • Border, radius, shadow.
    • Caption styling.

    Video

    Embed a video from YouTube, Vimeo, Loom, or a direct URL. Options:

    • Aspect ratio (e.g. 16:9).
    • Autoplay, controls, loop, muted.
    • Caption styling.

    Custom HTML

    Advanced: add your own HTML and CSS. Can use dynamic data binding with placeholders. Option for full-width layout. For users who want full control.

    Data Sources

    Many sections support a data source (User, Team, or Company). The Header has separate sources for hero image and avatar — you can show the team logo or company banner. Contact Details and Social Media Links let you choose per field or for the whole section. See Visual Builder - Data Sources for the full guide.

    For Contact Details and Social Media Links you can choose where data comes from:

    • User — The profile owner’s data.
    • Team — The team or department’s shared data.
    • Company — The company’s data.

    This controls whose name, links, or contact info appears. Individual users only see User. Company and team users may see Team and Company options.

    Theme Colors

    The template can use theme colours for consistency:

    • Background — Page background.
    • Font — Main text colour.
    • Button — Button background.
    • Icon — Icon colour.

    Each can be enabled or disabled. When enabled, the section uses the theme colour.

    Save and Assign

  • Click Save — Enter a name and description.
  • Click Assign — Choose which profile, team, or company uses this template.
  • A template can be assigned to one or more entities.

    • Export and Import

    • Export — Downloads a JSON file with the full template configuration (sections, styles, theme).
    • Import — Upload a previously exported JSON file to restore or duplicate a template.

    Tips and FAQ

    Can I reorder sections?

    Yes. Drag sections up or down in the section list.

    What’s the difference between User Bio and About Section?

    The current builder uses a Text section for custom text. Profile Info shows the headline from your profile.

    How do I make a section full-width?

    Use the style panel. Some sections have a "Full width" option.

    Can I use my own colours?

    Yes. Use the style panel for each section, or set theme colours for the whole template.

    Related: Visual Builder - Data Sources, Visual Builder - Sections, Template Sections Reference, Pure HTML Editor, Designing Your Card