Drinking Age Gateway with JavaScript

UPDATE 12/5/2016: If you’re going to attempt to integrate this into the WordPress platform, please consider using my WP Drinking Age Plugin.


So outside the normal grind I’ve been working on a website for a tequila brand. After a meeting with marketing I’d gathered it was important to add a drinking age gateway to the site. You see some type of these gateways on just about every alcohol brand’s site. I asked if they’d prefer to simply ask “Are you of Legal Drinking Age?”, and then have  “Yes/No” buttons determine a user’s fate (1)(2), or if they’d rather have the user input their birthday (3). Apparently, and I’m not a business guy or a lawyer so don’t comment and argue this with me, the yes/no gateways hold slightly less legitimacy than the ones where a user inputs their birthday to enter the site .

These gateways are really just about putting responsibility into the hands of the user, within reason. Is it easier to  lie with a yes/no gateway?…sure. Is it impossible to lie about your birthday though?…definitely not. So a birthday input is reasonably easy to implement, but not impossible to crack. If a user is going to lie they’re going to lie, not turn off JavaScript to get around the gateway. This is why a client side gateway seemed like the most reasonable approach.


A JavaScript gateway will allow easy indexing by search engines because they won’t run the JavaScript to restrict the content in the first place . If we were to have PHP check for the presence of an age verification cookie,  search engine crawlers will not have this cookie and will not see/index the content. We could work around that I’m sure, but there’s no need.

All countries don’t have the same drinking age. So solutions where the gateway is based on a static entry age aren’t viable. An age, and location must be gathered by the gateway to determine if a user is credible to enter the site. Tequila in Mexico is legal 3 years earlier than California. Sites that implemented this type of gateway (1) seemed to POST location values with country codes “US” “CA” ,ect. So they were authenticating server side with these codes…ugh

I’d Googled long enough to determine the few hours spent writing this script were likely more fun than just searching for an existing solution to work with, because it didn’t jump out at me.

Github Code


  1. Download the dependencies of Bootstrap and jQuery
  2. Get the Source drinkingAge
  3. Place bouncer.css in site’s head <link href="css/bouncer.css" rel="stylesheet">
  4. Place bouncer.js before the close of the body <script src="js/bouncer.js"></script>
  5. Initialize the gateway and its settings


Putting that all together in the most basic form you should have this.

Example Gateway


The bouncer.css file allows you to change just about everything that has to do with the gateway. I’m not a wizard with style sheets and this is a demo…so you’ll want to change things here.


Reference for Legal Drinking Ages