Custom Templates

Build fully custom consent banners with your own HTML and CSS. Templates use Mustache syntax for dynamic content: text wrapped in {{double braces}} gets replaced with real values (titles, button labels, descriptions) when the banner is shown to a visitor.

Custom templates are available on Pro (up to 5 templates) and Business (up to 20 templates) plans. Manage templates in the My Templates section of your dashboard.

Getting started

The easiest way to create a custom template is to start from an existing one. Go to Templates in your dashboard, click Duplicate on any system template, then edit the HTML and CSS in the built-in editor. Save your changes and use the preview to check how it looks.

Template structure

Each template has four parts, edited in separate tabs:

• Banner HTML: the main consent banner markup
• Banner CSS: styles for the banner
• Prefs HTML: the preferences/settings panel where visitors can toggle individual cookie categories
• Prefs CSS: styles for the preferences panel

Banner and preferences are rendered independently. The banner is shown first; the preferences panel opens when the visitor clicks the customize button.

Mustache variables

These variables are replaced with localized text from your site configuration. Most use double braces {{variable}}, which safely converts special characters. Description fields and the watermark use triple braces {{{variable}}} because they may contain HTML formatting from Markdown.

If you accidentally use double braces for a description field, LiteConsent will auto-correct them to triple braces when saving. Still, it is best to use triple braces from the start to keep your template clear.

Sections and conditionals

Sections control which parts of the template render based on the visitor's jurisdiction or your configuration. Use {{#section}}...{{/section}} to show content when a condition is true. Use {{^section}}...{{/section}} (with ^ instead of #) to show content when a condition is NOT true.

Jurisdiction sections

Conditional sections

Loops

Category and cookie fields

Inside the {{#categories}} loop, these fields are available:

Inside the {{#cookies}} loop (nested within a category):

data-lc-* attributes

These HTML attributes wire up banner behavior. Add them to buttons, links, or other interactive elements.

Actions

Toggles

CSS variables

LiteConsent injects CSS custom properties based on your site's design settings. Use these in your template CSS to stay consistent with the dashboard color/font configuration.

Example: minimal banner

A basic GDPR banner with accept, reject, and customize buttons:

<div class="my-banner">
  <p class="title">{{opt_in_title}}</p>
  <p class="desc">{{{opt_in_description}}}</p>
  <div class="buttons">
    <button data-lc-action="accept_all">{{accept_text}}</button>
    <button data-lc-action="reject_all">{{reject_text}}</button>
    <button data-lc-action="preferences">{{customize_text}}</button>
  </div>
  {{{watermark_html}}}
</div>

Example: preferences panel

A preferences panel with category toggles and a save button:

<div class="my-prefs">
  <div class="header">
    <p>{{prefs_title}}</p>
    <button data-lc-action="close">&times;</button>
  </div>
  {{#categories}}
  <div class="category">
    <label>
      <span>{{name}}</span>
      {{^is_required}}
        <input type="checkbox" data-lc-toggle="{{slug}}">
      {{/is_required}}
      {{#is_required}}
        <input type="checkbox" checked disabled>
      {{/is_required}}
    </label>
    <p>{{description}}</p>
  </div>
  {{/categories}}
  <button data-lc-action="save">{{save_text}}</button>
</div>

Tips

• Use CSS variables (var(--lc-accept), var(--lc-bg), etc.) so your template automatically picks up color changes from the dashboard.
• Use {{#opt_in}} / {{#opt_out}} / {{#notice}} to show different content per jurisdiction. Do not remove these sections.
• Use triple braces {{{...}}} for description fields and watermark_html because they may contain HTML.
• Duplicate a system template to start with a working structure, then customize from there.
• The data-lc-show-on-dirty / data-lc-hide-on-dirty attributes let you show a save button only after the visitor changes a toggle.