Working with HTML components

Modified on Wed, 6 May at 6:59 AM

Deze map is niet beschikbaar in het Dutch, weergeven in het English

Working with HTML components

HTML components are reusable blocks of HTML, CSS, and JavaScript — created once and included anywhere using @include(component-name). Update once, change everywhere.

TL;DR

Access: Campaign settings → HTML components → + New HTML component. Set: name (lowercase-hyphen), component group (for organization), trim result, parent layout (optional). Write HTML in the editor — supports all placeholders, @if/@else, @foreach, and nested @include. Use via @include(component-name) in emails, pages, forms, and other components. JS only works on webpages (not in emails). Common uses: email signatures, booking buttons, meeting type selectors, reusable headers/footers.

Get started in 3 steps

Create the component

Go to Campaign settings → HTML components → + New HTML component. Set Name using lowercase-hyphen style (e.g. booking-signatur, e-mail-signatur, knap-til-faktura). Select a Component group to organize related components. Write HTML in the editor — use Ctrl+K / Cmd+K for placeholders, @if/@else for conditional content. Add CSS in the CSS section and JS (for webpages only) in the JS section. Save.

Use the component

In any email, webpage, form, or other component, insert @include(component-name). The exact syntax is shown in the Placeholder column of the component list — click to copy. Components can be nested: a component can @include other components. Use @if around @include for conditional inclusion.

Organize and maintain

Create Component groups (e.g. "Signatures", "Buttons", "Forms", "Layout") via + New HTML component group. Edit a component to update it everywhere it is used — no manual updates in templates. Before deleting a component, check what uses it (deletion breaks any template containing the @include). For emails: always use inline CSS (email clients strip external styles).

Read more — code examples⌄

Booking confirmation component example

<div style="font-family: Arial, sans-serif; padding: 20px; background: #f3f2f1; border-radius: 20px;">
  <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>

Multi-component email template

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

<!-- Main content -->
<p>Hi %lead_firstname%,</p>
<p>Thank you for your interest in our services.</p>

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

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

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

CSS in a component (for webpages — NOT for emails)

.booking-button {
  background-color: #0067b8;
  color: white;
  padding: 12px 24px;
  border-radius: 20px;
  text-decoration: none;
  display: inline-block;
}
.booking-button:hover {
  background-color: #005a9e;
}

For emails always use inline CSS. External styles are stripped by email clients.

Troubleshooting

Component renders blank: Check that the component is saved. Verify the @include() uses the exact name from the Placeholder column (copy from the component list).
CSS not applying in email: Email clients strip <style> tags. Convert all CSS to inline styles for email components.
JavaScript not working: JS only runs on webpages, not in emails. Components included in emails should contain no JavaScript.
Can't delete component: Check the Occurrences count — the component may be referenced in email templates, forms, or other components. Remove those references first.
Nested component not rendering: Verify the inner component's name is correct and that it is not creating a circular include (A includes B which includes A).

Common searches

HTML component • @include • reusable content • email component • component groups • booking button component • email signature

Working with the template editor
Understanding placeholders and dynamic content
hh-components reference guide