HH Components Reference Guide

Use <hh-*> components in HTML editors (emails, webpages, booking pages) to pull live data. Main categories: Calendar events ( <hh-calendar.events> ), Leads ( <hh-leads> ), Booking availability ( <hh-booking.available> ), Maps ( <hh-gmap.*> ), Date formatting ( <hh-date.format> ), Data fields ( <hh-data-fields.value> ). Also see the community Interactive Component Generator (not an official Hubhus feature).

Hubhus <hh-*> components are server-side tags that dynamically fetch and display campaign data - calendar events, leads, booking availability, maps, date calculations, and more - in emails, forms, and pages.

8 component categories

Calendar events. Fetch and display a lead's calendar events inline. Use <hh-calendar.events> with attributes: from/to (date range), include-resource, include-service, count-only (return total count instead of rendering events). Supports custom HTML template inside the tag using placeholders for event fields.
Leads. Fetch and render a list of leads from a campaign. Use <hh-leads> with: campaign, filter-status, filter-field/filter-value, count (max results), count-only. Use to display related leads, count leads in status, or create summary dashboards.
Booking availability. Check or display available booking slots. Use <hh-booking.available> to check if slots exist for a booking form, get optimal time slots, or use as a condition in automations to trigger only when availability exists.
Calendar resources. List resource groups or services: <hh-calendar.resource-groups>, <hh-calendar.services>. Useful for dynamically populating dropdowns or displays in booking pages.
Date formatting and calculation. Format dates and perform date arithmetic: <hh-date.format value="..." format="dd/MM/yyyy" /> and <hh-date.calculate value="..." add-days="7" />. Use in hidden form inputs to pre-fill computed dates (e.g. "appointment date + 30 days" for a follow-up field).
Data fields. Read and render JSON data field values: <hh-data-fields.value slug="df_myfield" />. Use to display structured data stored in a lead's data field - e.g. render a JSON quotation array as a formatted table on a webpage.
Maps. Embed Google Maps in lead profiles or pages: <hh-gmap.street-view location="%lead_full_address%" /> for Street View, <hh-gmap.map> for regular map. Use in custom content boxes on the lead profile page to visualize lead address.
Other components. Additional components include: <hh-files> (list lead files), <hh-relations> (display related leads), <hh-nps> (NPS score display), and others. See the full list in the community component generator.

Calendar events - fetching and looping

All upcoming events

<hh-for each="event" in='<hh-data.calendar-events
  where="start>@now"
  sort="start"
  limit="50" />'>
  <div>
    <strong>{event.title}</strong><br>
    Date: {event.start}<br>
    Location: {event.location}
  </div>
</hh-for>

With resource (consultant name)

<hh-for each="event" in='<hh-data.calendar-events
  include="calendar_resources.user"
  where="start>@now"
  sort="start"
  limit="50" />'>
  {event.title} - <hh-for each='res' in='event.calendar_resources' glue=", ">{res.user.name}</hh-for>
</hh-for>

Date range - use filter + @str2datetime (NOT where) for ranges

<hh-for each="event" in='<hh-data.calendar-events
  filter="start > @str2datetime[2025-12-01 00:00]"
  filter="start < @str2datetime[2025-12-31 23:59]"
  sort="start" limit="500" />'>
  {event.title} on {event.start}
</hh-for>

Count only

You have <hh-data.count><hh-data.calendar-events where="start>@now" /></hh-data.count> upcoming events.

Leads - fetch, filter, count

Recent leads (newest first)

<hh-for each="lead" in='<hh-data.leads
  sort="created_at"
  limit="10" />'>
  <div>
    <strong>{lead.name}</strong> - {lead.email} - {lead.phone}
  </div>
</hh-for>

Filter by status slug - note: spaces around = required

<hh-for each="lead" in='<hh-data.leads
  filter-status="slug = moede-booket"
  sort="created_at"
  limit="50" />'>
  {lead.name} - {lead.email}
</hh-for>

Filter by custom field value

<hh-for each="lead" in='<hh-data.leads
  filter-field_value="zipcode LIKE 20*"
  sort="created_at"
  limit="50" />'>
  {lead.name} - {lead.email}
</hh-for>

Count leads by status

Total: <hh-data.count><hh-data.leads /></hh-data.count>
Active: <hh-data.count><hh-data.leads filter-status="slug = active" /></hh-data.count>

Date formatting and calculation

<!-- Format a date placeholder -->
<hh-date.format value="%lead_created_at%" format="dd/MM/yyyy" />

<!-- Add 7 days to today -->
<hh-date.calculate value="@now" add-days="7" />

<!-- Use in a hidden input (pre-fill follow-up date = booking + 30 days) -->
<input type="hidden" name="followup_date"
  value="<hh-date.calculate value="%event_start_date%" add-days="30" />" />

Data fields - reading stored JSON values

<!-- Display a data field value on a web page or email -->
<hh-data-fields.value slug="df_my-field" />

<!-- Read a specific key from a JSON data field -->
<hh-data-fields.value slug="df_quote-data" key="totalPrice" />

Booking availability check

<!-- Check if a booking form has available slots (use in automation condition) -->
<hh-booking.available form="booking-form-slug" />

<!-- Show content only when slots are available -->
@if(<hh-booking.available form="konsultation" />){
  <a href="%page[book-nu,url]%">Book a time now</a>
}@else{
  No available times right now.
}@endif

Troubleshooting

Component not rendering: Check for typos in tag name (must start with hh-). Confirm the component is used in a context that supports server-side rendering (emails, webpages, booking confirmation pages).
Date range shows wrong results: Use filter + @str2datetime for ranges. where with two conditions is unreliable for date ranges.
Status filter returns nothing: Verify the status slug (copy from Campaign settings → Lead statuses - use the slug column, not the display name). Remember spaces around =: slug = my-status.
Loop shows empty: Check that the campaign has leads/events matching your filter. Test without filters first, then add one filter at a time.
Resource/service names blank in loop: Add include="calendar_resources.user" or include="calendar_services" to the data component.