Gating Modals

Restrict access to content with an SA5 gate

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.

1. Simply view the gating modal. Once it's dismissed, the gate is open and the action proceeds.

2. Click a specific button in the gating modal. When clicked, the action proceeds.

3. 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;

Use Cases

• 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.

Usage Notes

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;

Element Type	Behavior
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.

Usage Notes - Gate Completion

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.

View the Gating Modal

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.

Button Click Required

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.

Form Submission Required

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.

Technical Notes

All gating is currently tracked as localStorage.

Future

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.

Suppression Options

• Forever - LocalStorage

• Temporary - SessionStorage

• Timed - Cookie

Must be on the modal used for gating.

Function Gate

• 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.

SA5 Trigger

Considering how this works with SA5 Trigger.

Where Gating Can be Implemented

• 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