> For the complete documentation index, see [llms.txt](https://attr.sygnal.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://attr.sygnal.com/overview/events/events/gated-events.md).

# Gated Events 🧪

Some Events might have pre-requisites before they can fire. 

* User is logged in to MemberStack 
* User is in a specific User Group 
* User has accepted a Gating modal or something similar 

## Use Cases 

* Over 21 gating before a site can be accessed  
* Birthdate gating before a site can be accessed 
* Collect user data before a modal is shown 

## Technical Notes 

### Custom gates

Custom gates perform a special test every time 

### State gates 

Require a specific action be perfomed or test be passed once. Once the gate is opened, the open state is stored generally in localStorage. 

Once opened, it does not need to be re-opened 

Opening a gate can be done by an EventGateHandler in a number of ways; 

* Check to see if the user is 

When the gate is open, the event fires normally. 

When the gate is closed; 

* A modal is presented
  * The user satisfies the gating requirements, e.g. submit a form, click a button 
* The URL is followed, including target 
* The gate is opened 

## Gate State Management 

### Check Gate 

Determine if the gate is opened; 

* Default is to check localStorage 
* But can also be sessionStorage
* Or cookies 
* Can be any custom thing as well, e.g. 

### Open Gate

Opens the gate; 

* localStorage, sessionStorage, or cookies   

### Close Gate 

Closes the gate; 

## Implementation Notes

Defined as a block 

```html
<script sa5-event="name">
{
   gate-type: modal
   modal-gate-type: view
   gate-state: localstorage 
}
</script> 
```

* EventGateHandlerBase&#x20;
  * EventGateModalHandler&#x20;
    * EventGateModalViewHandler&#x20;
    * EventGateModalButtonHandler&#x20;
    * EventGateModalFormHandler&#x20;
  * EventGateMemberstackHandler&#x20;
* EventGateStateHandlerBase&#x20;
  * EventGateStateLocalStorageHandler&#x20;
  * EventGateStateSessionStorageHandler&#x20;
  * EventGateStateCookieHandler&#x20;

EventGateLocalStorageHandlerBase&#x20;

EventGateLocalStorageHandlerBase

## Concept&#x20;

wfu-event-gate = function

Must return true&#x20;

Pass in Event, so it can be fired&#x20;

## Gate Types &#x20;

Defined as a block&#x20;

```
<script sa5-event="name">
{
   gate-type: modal
   modal-gate-type: view
   
}
</script> 
```

### Modal Gates&#x20;

1. An event fires&#x20;
2. Modal type gate is gate-checked&#x20;
3. If fails pass;&#x20;
   1. Display modal&#x20;
4. Success pass;&#x20;
   1. Fire event&#x20;

| Modal Gate Type | Test | Success | Fail |
| --------------- | ---- | ------- | ---- |
| view            |      |         |      |
| button          |      |         |      |
| form            |      |         |      |

### Eval Gate&#x20;

1\.