Help Center › Pure HTML Editor

Overview

The Pure Profile Template Builder (Code Editor) lets you create fully custom templates by editing HTML and CSS directly. Use placeholders for dynamic content (name, links, contact details) and style everything with your own code. Ideal for users who want complete control and are comfortable with HTML and CSS.

How to Access

  • Open your profile, team, or company.
  • Go to the Design tab.
  • Click Profile Templates or Template.
  • Choose Pure HTML or Code Editor.

    • You can create templates for your profile, your team, or your company. The context determines where the template is saved.

    Interface

    The editor has three main areas:

    • Code editor — Left side. Monaco-based editor with syntax highlighting for HTML and CSS.
    • Variables panel — Right sidebar (toggle with the Variables button). Lists all placeholders. Click to insert at the cursor.
    • Preview panel — Right side. Live preview of your template with real or sample data.

    At the top:

    • Close — Exit the editor. You’ll be prompted if there are unsaved changes.
    • Variables — Toggle the placeholder panel.
    • Preview / Edit — Switch between full preview and edit mode.
    • Mobile / Desktop — Toggle preview size (375px mobile or full width).
    • Preview as — Profile selector (when you have multiple profiles): choose which profile’s data to use in the preview.
    • Save — Save the template. You’ll be prompted for a name if it’s new.

    Placeholders and Data Sources

    Placeholders are variables replaced with real data when the profile is viewed. Use {{placeholder_name}}.

    Data sources: Placeholders pull from User (profile), Team (department), or Company. For example, {{team_logo_url}} shows the team logo, {{company_hero_url}} shows the company banner. Images can come from profile, team, or company. See Pure HTML Editor - Data Sources and Placeholders for the full list and examples.

    Important: Only simple replacement is supported. No conditionals.

    HTML Structure

    Use standard HTML:

    • ,

      ,

      for text
    • for layout and grouping
    • for images (use {{image_profile_url}} for the profile photo)
    • for links
      • ,
          ,
        1. for lists

          2. Keep the structure simple and semantic for best results on mobile and desktop.

          CSS Styling

          • Add a block in the HTML, or use inline styles.
          • Use classes and IDs to target elements.
          • Mobile-first: test on a small screen. Use media queries for larger screens if needed.
          • Avoid fixed pixel widths for main content — use percentages or max-width for responsiveness.

          FontAwesome Icons

          FontAwesome 6 is included automatically. Use icons like fas fa-phone, fas fa-envelope, fab fa-linkedin. The to the FontAwesome CDN is in the default template.

          Live Preview

          The preview shows your template with real profile data. Use the profile selector to switch between profiles and see how different data looks. The preview updates as you type. Toggle between mobile (375px) and desktop (full width) to check responsiveness.

          Default Template

          When you create a new template, you start with a default that includes:

          • Basic HTML structure with meta viewport
          • FontAwesome link
          • Sample profile layout with placeholders
          • Styled social links and Save Contact button

          You can edit or replace this as needed.

          Save and Assign

        2. Click Save — Enter a template name if it’s new.
        3. The template is saved to the current context (profile, team, or company).
        4. Assign it via the Design tab: select this template for the profile, team, or company.

          5. Tips and FAQ

          Do I need to know HTML?

          Yes. The Pure HTML Editor is for users comfortable with HTML and CSS. If you prefer a visual approach, use the Visual Profile Builder instead.

          Can I use JavaScript?

          The template is rendered as static HTML. JavaScript in the template may not run in all contexts (e.g. when shared or embedded). Stick to HTML and CSS for reliability.

          What if I break something?

          Use the preview to check your changes. If the template doesn’t render correctly, fix the HTML/CSS or switch back to a previous template.

          How do I add a Save Contact button?

          Use {{vcard_url}} in an anchor: Save Contact.

          How do I show social links?

          Use {{social_links_html}}, {{team_links_html}}, {{company_links_html}}, or {{all_social_links_html}}. These output pre-rendered HTML with icons and links.

          Related: Pure HTML Editor - Data Sources and Placeholders, Pure HTML - Placeholder Reference, Visual Profile Builder, Designing Your Card