Set Display Element
The Display Element configuration determines where gate status messages appear to users. This is the visual feedback that shows countdowns, access status, and completion information.
Overview
Display Element enables you to:
- Show countdown timers before gates open
- Display current access status
- Show completion timestamps
- Provide visual feedback on gate conditions
Configuring Display Element
Selecting an Overlay Element
- In the gate editor, find the Overlay Element field in the Target section
- Click the dropdown to see available elements
- Select an Info type element
- This element will display gate status messages
Note: Only Info-type elements are available for selection as overlay elements.
Status Messages
The display element shows different messages based on gate state:
| Status | Message | When Shown |
|---|---|---|
| Opens in... | "This page opens in 2d 5h 30m 15s" | Before gate opens (countdown) |
| Open for editing | "This page is open for editing" | Gate is currently open |
| Blocked | "This page is blocked – condition is not met" | Variable or precondition not met |
| Closed | "This page closed – missed deadline" | Past end time |
| Completed | "You completed this page on Jan 15, 2024" | User finished interaction |
Countdown Display
When a Time Lock is active and the gate hasn't opened yet:
This page opens in 2d 5h 30m 15sThe countdown updates in real-time, showing:
- Days (d)
- Hours (h)
- Minutes (m)
- Seconds (s)
As time passes, larger units drop off:
2d 5h 30m → 5h 30m 15s → 30m 15s → 15s → Open for editingPlacement Recommendations
Above Gated Content
Place the Info element at the top of the gated section:
┌─────────────────────────┐
│ This page opens in 2d 5h... │ ← Info element (overlay)
├─────────────────────────┤
│ │
│ [Gated Content] │ ← Hidden/locked
│ │
└─────────────────────────┘Within Gated Tile
Place inside the tile that's being gated:
┌─────────────────────────┐
│ Form Title │
├─────────────────────────┤
│ This page opens in 2d 5h... │ ← Info element
├─────────────────────────┤
│ Field 1: [locked] │
│ Field 2: [locked] │
│ Submit: [locked] │
└─────────────────────────┘Creating an Info Element for Gates
If you don't have a suitable Info element:
- Open your application in the Builder
- Add an Info element to the page/tile
- Position it where you want status to display
- Style it appropriately (color, size, etc.)
- Save the page
- Return to Gate Controller and select it
Styling Considerations
The Info element should be styled to stand out:
| Property | Recommendation |
|---|---|
| Position | Top of gated section |
| Background | Subtle highlight color |
| Text | Clear, readable font |
| Visibility | Always visible |
The status text is dynamically inserted, so design the element to accommodate various message lengths.
Multiple Gates, Multiple Displays
Each gate can have its own display element:
Page with Multiple Gated Sections:
Section 1:
├─ Gate: Day 1 Content
└─ Display: Info Element A → "Open for editing"
Section 2:
├─ Gate: Day 2 Content
└─ Display: Info Element B → "This page opens in 1d 3h 20m"
Section 3:
├─ Gate: Day 3 Content
└─ Display: Info Element C → "This page opens in 2d 3h 20m"Display Without Overlay Element
If no overlay element is selected:
- Gate still functions normally
- Users don't see status messages
- Content is simply shown/hidden based on conditions
Recommendation: Always configure an overlay element for better user experience.
Best Practices
Always use an overlay - Users need feedback on why content is locked
Position prominently - Status should be easy to find
Style appropriately - Make it visually distinct from other content
Test display states - Verify all status messages render correctly
Consider mobile - Ensure status is visible on smaller screens
Troubleshooting
No Status Showing
- Verify an overlay element is selected
- Check that the Info element exists on the page
- Ensure the element is visible (not hidden by conditions)
Wrong Status Displaying
- Verify gate conditions are configured correctly
- Check if multiple gates target the same content
- Review the complete gate configuration
Element Not in Dropdown
- Confirm the element is an Info type
- Verify it's on the correct page
- Save the page in the builder and refresh
A Gate Used To Show a Countdown, and Now Shows Nothing
This is different from "No Status Showing" above — this is a gate that worked before and stopped, usually after a page or tile was edited or deleted. The gate's Overlay Element setting still stores the id of the Info element it was pointed at, not a live link — if that specific element is ever deleted (including as a side effect of deleting the page or tile that contained it), the gate silently has nowhere to render its countdown. The gate itself keeps working correctly (locking/unlocking on schedule); only the status display goes missing.
How to check: If you have access to the AI Builder (ACE), ask it to look up the gate — it reports exactly this as a problems entry when it finds one. Otherwise, open the gate's Display Element field: if it shows a selection but the page it's supposed to be on no longer has a matching Info element, that's this bug.
How to fix:
- Add a new Info element to the page you want the countdown to appear on (any page the participant reaches before the gate opens — it does not have to be the gated page itself)
- Give it any placeholder text — the gate overlay replaces it with the live status automatically, so the original text is only seen in the rare case the gate's time hasn't been configured yet
- In the gate's Display Element setting, select this new element
- Save and publish
If the same broken reference is reused by more than one Gate Controller template (common when templates were duplicated from each other), fixing it in one place — pointing every affected gate at the same new element — fixes all of them at once, since Display Element only stores an id, not a copy.
If you need the countdown on more than one page at once, Display Element isn't the right tool — it only ever points at a single element, so repointing it to "fix" one page breaks it on whichever page it used to be on. Use the gate-reference token instead: [countdown: gate:<id> | fmt=hh:mm] on as many Info elements, on as many pages, as you like — see Showing a Live Countdown in Your Own Text.
Questions?
If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.
Useful Links:
Add a Gate - https://help.acenji.com/#/./shared-concepts/gate-controller/add-a-gate/index Select Target - https://help.acenji.com/#/./shared-concepts/gate-controller/add-a-gate/select-target/index Gate Controller - https://help.acenji.com/#/./shared-concepts/gate-controller/index