Priority Protect - Custom templates

A template is the page your visitors see while they wait. Without one, Priority Protect shows the default DataDome page. With a template, you show your own branding and messages, and live information such as the visitor's position.

A template is a complete HTML page. You can assign the same template to several waiting rooms, and a change to the template applies to all of them.

Create a template

Go to Priority Protect > Templates and click Add Template. The list shows how many waiting rooms use each template.
Enter a Name, then paste your HTML in Code. The counter under the editor shows the size, up to 50,000 characters.

Click Save. The template applies within 1 minute.

Assign a template to a waiting room

Go to Priority Protect > Priorities, then create a waiting room or choose Edit in its actions menu (⋮).
Under Template, choose Custom, then select your template.

Save. The new page appears within 5 minutes. Visitors keep their place.

What to put in your template

Tell visitors they are in the right place, and that they don't need to refresh: the page checks their status and lets them in automatically.
Show their position with the position variable, inside a detailsPanel.
For time-based waiting rooms, show the opening date with openingDate, inside an openingDatePanel.
Show the Request ID with requestId. Your support team uses it to find the visitor's session in Explore.
Host images, fonts and stylesheets on your CDN, and reference them by URL. Priority Protect stores only the HTML.
Keep it light. Visitors may stay on this page for a long time, often on mobile.

Variables

Add a data-priorityprotect-var attribute to an element, and Priority Protect fills it with live data:

<span data-priorityprotect-var="position"></span>

Panels are hidden until their data is available. Define a hidden class in your CSS (.hidden { display: none; }): Priority Protect adds and removes it.

Variable	Element	Content
`detailsPanel`	`div`	Shown once the visitor's position is known. Put `position` and `size` inside
`position`	`span`	The visitor's position in the waiting room
`size`	`span`	The total number of visitors in the waiting room
`openingDatePanel`	`div`	Shown when the waiting room has an opening date. Put `openingDate` inside
`openingDate`	`span`	The opening date and time of a time-based waiting room
`lastUpdateDateTime`	`span`	When the information was last updated
`requestId`	`span`	The Request ID, for support

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>You're in line | Example Shop</title>
  <style>
    body { font-family: sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background: #f5f5f5; }
    .card { background: #fff; border-radius: 8px; padding: 40px; max-width: 480px; text-align: center; box-shadow: 0 2px 12px rgba(0, 0, 0, .1); }
    .hidden { display: none; }
  </style>
</head>
<body>
  <main class="card">
    <img src="https://cdn.example.com/logo.svg" alt="Example Shop" width="120">
    <h1>You're in the waiting room</h1>
    <p>Demand is high right now. Keep this page open: it updates by itself and lets you in when it's your turn.</p>

    <div data-priorityprotect-var="openingDatePanel">
      <p>Opens on <strong><span data-priorityprotect-var="openingDate"></span></strong></p>
    </div>

    <div data-priorityprotect-var="detailsPanel">
      <p>Your position: <strong><span data-priorityprotect-var="position"></span></strong>
        of <span data-priorityprotect-var="size"></span></p>
    </div>

    <p><small>Updated <span data-priorityprotect-var="lastUpdateDateTime"></span> ·
      Request ID <span data-priorityprotect-var="requestId"></span></small></p>
  </main>
</body>
</html>

Test a template

Create a waiting room on a staging domain or a test URL, with Maximum concurrent visitors set to 0, so that every visitor waits.
Assign your template to it and wait up to 1 minute for the replication.
Open the test URL on desktop and mobile. Check the layout, the position, the opening date (with a time-based waiting room) and the Request ID.
When the result is right, assign the template to your production waiting rooms.

Limits

Limit	Value	Details
Template size	50,000 characters	The whole HTML code. The API rejects a larger template with a `422` error
Templates per account	15	Reuse a template across waiting rooms when you can
Time to apply	Up to 5 minutes	After you save a template or assign it to a waiting room
Deleting a template	Only when unused	A template assigned to a waiting room cannot be deleted. Unassign it first

API

You can create, update, list and delete templates with the Priority Protect API.