# HH Components Reference Guide

URL: https://help.hubhus.com/kb/hh-components-reference-guide
Category: Web pages & layouts / Components
Updated: 2026-09-28T14:41:02.752+00:00

Summary: 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

1. **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.
2. **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.
3. **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.
4. **Calendar resources**. List resource groups or services: `<hh-calendar.resource-groups>`, `<hh-calendar.services>`. Useful for dynamically populating dropdowns or displays in booking pages.
5. **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).
6. **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.
7. **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.
8. **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](https://leadvalidator.dk/wp/hubhus/hh-component-generator).

**Read more - copy-paste code examples**

### 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.

## Related articles

- https://help.hubhus.com/kb/customizing-the-lead-profile-page
- https://help.hubhus.com/kb/campaign-webpages-and-webpage-forms-displaying-data-to-leads
- https://help.hubhus.com/kb/understanding-placeholders-and-dynamic-content
- https://help.hubhus.com/kb/creating-a-quotation-line-generator-with-visual-presentation