On this page

• Working with HTML components
  • What are HTML components?
  • Why use HTML components?
    • Consistency
    • Easy maintenance
    • Reusability
    • Organization
  • Where to access HTML components
  • Creating an HTML component
    • Component configuration
      • Name
      • Component group
      • Trim result
      • Body
      • Parent layout
    • Writing component content
    • CSS section
    • JavaScript section
  • Using HTML components
    • Basic @include() syntax
    • Where you can use components
    • Finding the component placeholder
    • Example: Email with components
  • Working with component groups
    • Creating component groups
    • Organizing components in groups
  • Managing components
    • Component list columns
    • Editing components
    • Deleting components
    • Hiding occurrences
  • Best practices
    • Component naming
    • Organization
    • Content and code
    • Maintenance
  • Advanced usage
    • Nested components
    • Conditional includes
    • Dynamic styling with placeholders
  • Troubleshooting
    • Component not rendering
    • Styling not applying in emails
    • Placeholder showing literal text
  • Summary

What are HTML components?

HTML components are reusable blocks of HTML, CSS, and JavaScript that you create once and include wherever needed. Instead of copying and pasting the same code into multiple templates, you reference the component using a simple include statement.

Common use cases:

• Email signatures
• Booking buttons
• Meeting type selectors
• Custom styling blocks
• Form elements
• Branding elements (headers, footers)
• Call-to-action buttons
• Reusable content blocks

Why use HTML components?

HTML components provide several key advantages:

Consistency

Use the same component across all emails and pages to ensure consistent branding, styling, and functionality.

Easy maintenance

Update the component once, and the changes automatically apply everywhere it's used. No need to update dozens of templates individually.

Reusability

Create a component once and include it in emails, webpages, forms, and automation templates.

Organization

Group related components together for easy discovery and management.

Where to access HTML components

Navigate to Campaign Settings → HTML components. This page displays all components in your campaign, organized by component groups.

Creating an HTML component

To create a new component:

1. Click + New HTML component
2. Configure the component settings (see below)
3. Write your HTML, CSS, and JavaScript
4. Click + Create

Component configuration

Name

Enter a friendly, descriptive name for the component. This name will be used in the @include() syntax.

Examples:

• booking-signatur
• meeting-type
• knap-til-faktura
• e-mail-signatur

Component group

Select a component group to organize your components. Groups help you keep related components together.

Options:

• None – Component is ungrouped
• Existing groups – Select from previously created groups
• Create new group – Click "+ New HTML component group" to create a new organizational group

Trim result

Control whether whitespace is trimmed from the component output:

• Yes – Remove leading and trailing whitespace (recommended for most components)
• No – Preserve all whitespace

Body

Choose how the component content is processed:

• HTML / Raw – Content is rendered as-is without additional processing
• Other options may be available depending on your configuration

Parent layout

Optionally select a parent layout to wrap this component. This allows you to create nested components with consistent wrapper structures.

• No parent layout – Component has no wrapper
• Select existing layout – Choose from available parent layouts

Writing component content

The main content editor is where you write your HTML. You have access to:

• HTML content – Write your component markup
• Placeholders – Use all available campaign placeholders (use Ctrl+K / CMD+K to search)
• Conditional logic – Use @if/@else syntax
• Loops – Use @foreach for repeating content
• Nested includes – Include other components within this component

Example component:

<div style="font-family: Arial, sans-serif; padding: 20px; background: #f3f2f1; border-radius: 8px;">
  <h3>Booking Confirmation</h3>
  <p>Dear %lead_firstname%,</p>
  <p>Your booking is confirmed for %event_datetime%.</p>
  
  @if(%assigned_person_name%){
    <p>Your consultant: %assigned_person_name%</p>
  }@endif
  
  <p>Best regards,<br>The Team</p>
</div>

CSS section

Click CSS to expand the CSS editor. Add custom styles that apply to this component.

Example:

.booking-button {
  background-color: #0078d4;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}

.booking-button:hover {
  background-color: #005a9e;
}

JavaScript section

Click JavaScript to expand the JavaScript editor. Add custom scripts for interactive components.

Using HTML components

Basic @include() syntax

To use a component in an email, page, or form, use the @include() syntax:

@include(component-name)

Example:

@include(booking-signatur)
@include(e-mail-signatur)
@include(knap-til-faktura)

Where you can use components

HTML components can be included in:

• Email templates – Add reusable blocks to email content
• Webpages – Include components in campaign pages
• Forms – Add custom elements to booking forms and campaign forms
• Automation templates – Use in automated email content
• Other components – Nest components within components

Finding the component placeholder

After creating a component, its placeholder syntax is displayed in the component list:

• Placeholder column – Shows the exact @include() syntax
• Click the placeholder to copy it to your clipboard

Example: Email with components

Here's an example email template using multiple components:

<!-- Email header -->
@include(e-mail-header)

<!-- Main content -->
<p>Hi %lead_firstname%,</p>

<p>Thank you for your interest in our services.</p>

<!-- Booking button component -->
@include(booking-knap-faelles)

<!-- Meeting type selector -->
@include(meeting-type)

<!-- Email signature -->
@include(e-mail-signatur)

Working with component groups

Creating component groups

Component groups help you organize related components. To create a group:

1. Click + New HTML component group
2. Enter a group name (e.g., "Booking Components", "Email Signatures", "Buttons")
3. Click Create

Organizing components in groups

When creating or editing a component, select the appropriate group from the Component group dropdown.

Suggested group structure:

• Signatures – Email signatures, booking signatures
• Buttons – Call-to-action buttons, booking buttons, service buttons
• Forms – Form elements, input groups, validation messages
• Layout – Headers, footers, wrappers
• Content blocks – Reusable content sections
• Styling – Color schemes, typography components

Managing components

Component list columns

The component list displays:

• Name – Component name
• Parent layout – The parent layout (if any)
• Placeholder – The @include() syntax
• Parameters – Component parameters (if defined)
• Edit – Modify the component
• Delete – Remove the component
• Updated – Last modification date

Editing components

To edit an existing component:

1. Click the Edit icon (pencil) next to the component
2. Make your changes
3. Click Update

All templates using this component will automatically reflect the changes.

Deleting components

To delete a component:

1. Click the Delete icon (trash) next to the component
2. Confirm the deletion

Hiding occurrences

The Hide occurrences checkbox allows you to filter the component list view. This helps you focus on specific components or see all components at once.

Best practices

Component naming

• Use lowercase with hyphens (e.g., booking-button, email-header)
• Use descriptive names that indicate purpose
• Keep names short but clear
• Avoid special characters and spaces
• Use language-specific prefixes if managing multiple languages (e.g., da-signatur, en-signature)

Organization

• Use component groups to categorize related components
• Keep groups focused (e.g., separate "Buttons" from "Signatures")
• Document complex components with comments in the code
• Regularly review and remove unused components

Content and code

• Keep components focused on a single purpose
• Use inline CSS for email components (email clients don't support external styles)
• Test components in multiple contexts (emails, pages, forms)
• Use placeholders for dynamic content
• Add fallback content with @if/@else for missing data
• Comment your code for future reference

Maintenance

• Update components rather than creating duplicates with small changes
• Test changes before deploying to production templates
• Version component names if you need to maintain old versions (e.g., button-v1, button-v2)
• Document which templates use critical components

Advanced usage

Nested components

You can include components within other components:

<!-- Parent component: email-wrapper -->
<div class="email-container">
  @include(email-header)
  
  <div class="content">
    {CONTENT}
  </div>
  
  @include(email-footer)
</div>

Conditional includes

Include components conditionally based on lead data:

@if(%event_type% == "physical-meeting"){
  @include(physical-meeting-details)
}@else{
  @include(online-meeting-details)
}@endif

Dynamic styling with placeholders

Use placeholders to create dynamic styling:

<div style="background-color: %brand_color%; padding: 20px;">
  <h2 style="color: white;">%brand_name%</h2>
</div>

Troubleshooting

Component not rendering

If a component doesn't appear in your template:

• Verify the component name is spelled correctly in the @include() statement
• Check that the component exists (it may have been deleted or renamed)
• Ensure there are no syntax errors in the @include() statement
• Test the component in isolation to verify it works

Styling not applying in emails

If component styles don't appear in emails:

• Use inline CSS instead of external stylesheets (email clients don't support external CSS)
• Avoid advanced CSS (flexbox, grid, etc.) - use tables for layout
• Test in multiple email clients (Gmail, Outlook, etc.)
• Keep styles simple and widely supported

Placeholder showing literal text

If placeholders show as literal text (e.g., %lead_name% instead of "John Doe"):

• Verify the placeholder syntax is correct
• Ensure the field exists in the campaign
• Check that the lead has data in that field
• Test with a different lead that has complete data

Summary

HTML components are reusable code blocks that maintain consistency and simplify maintenance across emails, pages, and forms. Create components in Campaign Settings → HTML components with descriptive names, organize them in groups, and include them using the @include(component-name) syntax. Components support HTML, CSS, and JavaScript (pages only), plus all campaign placeholders and conditional logic. Update a component once to automatically apply changes everywhere it's used. Use component groups for organization, follow naming conventions (lowercase with hyphens), and keep components focused on single purposes. Components can be nested within each other and used conditionally based on lead data. For email components, always use inline CSS and test across multiple email clients.

? Common searches

html components • reusable content • include syntax • email templates • component groups • @include

? Also known as

content blocks • reusable blocks • email components • template components • includes • snippets

Related articles