Gating Modals
Restrict access to content with an SA5 gate
Last updated
Was this helpful?
Restrict access to content with an SA5 gate
Last updated
Was this helpful?
SA5 Gating Modals are the same as a regular modal, but they are automatically invoked when the user attempts to perform specific actions, like;
Click a link or button
This would usually navigate to a new page, or open the link content in a new window
Click an SA5 Modal click trigger element
This would usually open an SA5 Modal
An SA5 Gating Modal setup "interrupts" these user actions and displays a special modal to complete a designated action first.
Depending on your configuration the user must do one of three things to open the gate, and proceed to the link or modal content they've requested.
Simply view the gating modal. Once it's dismissed, the gate is open and the action proceeds.
Click a specific button in the gating modal. When clicked, the action proceeds.
Complete and submit a form. When the validated form is submitted, the action proceeds.
SA5 Gating Modals are specially designed so that they only need to appear once per device. Once the gating modal's requirements are satified, the gate is opened and the user does not need to repeat the gating action.
This is true even if the gate is used on different pages throughout the site.
The flow looks like this;
Present important information
e.g. a cancellation policy
Ensure user agreement, where the user must click a button to proceed
e.g. "I am over 18"
e.g. "I agree to receive investment advice"
Collect information successfully from a form
e.g. basic contact info for a sales process
e.g. user info before giving a reward
SECURITY NOTE SA5 Modals are a marketing and policy convenience- they do not provide direct content security. Anyone with the basic knowledge on how to view your page's code can see and access gated links and content.
Depending on how the gated modal is configured, it will require different actions to pass the gate and continue to the requested content.
wfu-modal-gate = ( name ) Required. Indicates that a specific link or modal click trigger element is gated. Must specify the name of the wfu-modal to to use as the gate.
Its behavior depends on the type of element it is placed on which must be one of;
SA5 Modal, containing the wfu-modal element
Gates the modal with a pre-modal. Used when you are giving content, but want a gate before that.
Link, Link Block, or Button element
Gates the link. Once the gate is passed, the link is navigated.
Body element 🧪
Gates the page. Covers the page with a "blur" and a modal state that.
Once the Gating Modal appears, there are a few ways to configure the completion options.
SA5 Modal still have normal "pop-up" style behavior, in which they can easily be closed by the user. However if the user does not perform the required gate action, the gate will not be "opened" and the requested action will not be performed.
If you just want the user to see the modal once, and then dismiss it normally ( click close, click on the overlay, etc. ) then use this attribute;
wfu-modal-gate-view = ( no value needed )
Add this attribute directly to the gating modal's modal element.
If a button must be clicked to complete the gate successfully, use;
wfu-modal-gate-button = ( no value needed )
Add this attribute to one or more buttons.
These buttons must be within the Gating Modal. The modal will be automatically closed on button click, before the next action is performed.
If a form must be successfully submitted to complete the gate successfully, add;
wfu-modal-gate-form = ( no value needed )
Add this attribute to that Form element directly ( not the form wrapper element ).
This form must be within the Gating Modal. The form submission must be successful in order to complete the gate. The modal will be automatically closed on successful form submission, before the next action is performed.
All gating is currently tracked as localStorage.
Future goals include e.g. partial page gating, like show a part of an article, prevent scrolling, and then undo that once the gate is opened.
Forever - LocalStorage
Temporary - SessionStorage
Timed - Cookie
Must be on the modal used for gating.
func - call a function to determine gate passage
Func could be used for e.g. calculate age from date of birth in a form, and confirm.
Considering how this works with SA5 Trigger.
Links... put the gate directly on a link or button. User must complete the modal gate, and is then redirected to the requested content.
Support _target
Page access? Hide page content first
Partial page gating?
Gating another SA5 modal
Modal 1 is requested
Modal 2 then intervenes
Form Submit
A final gate is presented before the form submission can occur, e.g. a cancellation policy
