HTML Builder: Buttons, Close Icon, and Click Tracking

In the HTML Builder you design buttons and close icons like any other HTML element. Notifal recognizes a few special CSS classes and turns them into working controls: dismiss the notification, open links, copy text, add to cart, and record clicks in analytics.

The Block Editor and Elementor have dedicated blocks/widgets for the same features. If you use those editors instead, see Notifal Gutenberg Blocks Reference or Notifal Elementor Widgets Reference.

The three class names to know

You do not need to add notifal-track-click yourself on action buttons. Notifal adds it automatically when it processes notifal-action-button.

Close icon (notifal-close-button)

Add any element (often a <div> or <span>) with the class notifal-close-button. Style it however you like (X icon, text, image background).

What Notifal does automatically:

• Makes it keyboard accessible
• Adds a "Close Notification" label for screen readers
• Records close events in analytics when visitors dismiss the notification

Example

<div class="notifal-close-button" style="position:absolute;top:8px;right:8px;">✕</div>

Action button (notifal-action-button)

Add a <a> or <button> element with the class notifal-action-button. Notifal wires it up for tracking and behavior.

What Notifal adds automatically:

• Click tracking class (notifal-track-click)
• A unique tracking ID for analytics
• Default accessibility label

Choose what the button does

Set the action with data-notifal-action or data-link-type:

Examples

Link to the product in context:

<a class="notifal-action-button" data-notifal-action="post-link">Shop now</a>

Copy a coupon code:

<a class="notifal-action-button" data-notifal-action="copy" data-copy-text="SAVE20">Copy code</a>

Custom URL:

<a class="notifal-action-button" data-notifal-action="custom" href="https://example.com/sale">View sale</a>

Click tracking (notifal-track-click)

Notifal counts button clicks in OnPage Analytics. Any element with the class notifal-track-click is included.

• Action buttons: Notifal adds this class for you when you use notifal-action-button.
• Custom links: Add notifal-track-click manually to any clickable element you want tracked.

Example: track a custom link

<a href="https://example.com" class="notifal-track-click">Learn more</a>

View results under Notifal → OnPage Analytics.

Featured image placeholder (notifal-post-feature-image)

While editing buttons, you may also use an image placeholder class:

Leave the element empty. Notifal fills in the image on the front end.

Optional attributes:

Block Editor and Elementor equivalents

If you prefer visual controls instead of CSS classes:

Checklist

• [ ] Close control uses notifal-close-button
• [ ] Main CTA uses notifal-action-button with the correct data-notifal-action
• [ ] Copy buttons include data-copy-text
• [ ] Custom links use href or data-custom-url
• [ ] Extra trackable links include notifal-track-click if needed

What to read next

HTML Builder series

1. Creating a Template with the HTML Builder
2. HTML Builder: Buttons, Close Icon, and Click Tracking (you are here)
3. HTML Builder: AI Prompt Workflow
4. HTML Builder: Layouts and Use Cases
5. HTML Sanitization and Allowed HTML

Other template editors

• Notifal Gutenberg Blocks Reference
• Notifal Elementor Widgets Reference