How to Add an Age Gate to your Website
JL

Joanna L.

Created Aug 14, 2023

How to Add an Age Gate to your Website

66
    e

Tutorial: Create an Elfsight Age Gate + Add it to your Website

0 Steps

In this tutorial, I walk through the steps on how to create an Age Gate for your website using Elfsight. Once this is done, I will copy the generated code and paste it into Squarespace (chosen web builder for demo purposes).

PART I: Sign up for Elfsight
PART II: Confirm your email address
PART III: Create an 'Age Verification' widget (Age Gate)
PART IV: Copy the generated code to Squarespace

🟠

PART I: Sign up for Elfsight

5 Steps

Go to https://elfsight.com

1

Click on 'Sign Up Free'

Click on 'Sign Up Free'
2

Click on 'Continue with Email'

Click on 'Continue with Email'
3

Type in your Email Address

Type in your Email Address
4

Type in a new Password

Type in a new Password
5

Click on 'Sign Up'

Click on 'Sign Up'

🟠

PART II: Confirm your email address

2 Steps
6

Go to your inbox to look for an email from Elfsight.Open it > Click on 'Confirm Email Address'

Note: You must confirm the email address used for your Elfsight account.
The widget will not work on your website until this has been completed.

Go to your inbox to look for an email from Elfsight. Open it > Click on 'Confirm Email Address'
7

After email has been verified, click on 'Close'

After email has been verified, click on 'Close'

If you do not see the 'Confirm your email address...' email from Elfsight, check your Junk / Spam folder. If that doesn't work, you can use the 'Resend' function on the final generated code page: click 'X' to close the EMBED CODE dialog box > click 'Resend' at the top of the page.

🟠

PART III: Create an 'Age Verification' widget (Age Gate)

24 Steps
8

Go to the SEARCH field in the top-right > Type in 'Age Verification'

Go to the SEARCH field in the top-right > Type in 'Age Verification'
9

Select 'Age Verification'

Select 'Age Verification'
10

Select a template: I chose 'Default'

Select a template: I chose 'Default'
11

Click on 'Continue with this template'

Click on 'Continue with this template'
12

Enter the 'Minimum Age' for your province: I entered '19'

Enter the 'Minimum Age' for your province: I entered '19'
13

Click on the 'Verification Method' dropdown

Click on the 'Verification Method' dropdown
14

Select 'Date of Birth'

Select 'Date of Birth'
15

Click on 'Content'

Click on 'Content'
16

If you would like to add a LOGO, click on 'Add' > Upload the imageNote: I skipped this step (optional)

17

Type in a 'Message' / Title for your Age Gate.Be sure to include your Store Name. Ex. "Welcome to ___ CANNABIS STORE"

Type in a 'Message' / Title for your Age Gate. Be sure to include your Store Name. Ex. "Welcome to ___ CANNABIS STORE"
18

Click on the default 'Caption': 'Please, verify your age to enter.'

Click on the default 'Caption': 'Please, verify your age to enter.'
19

Adjust the punctuation OR enter a new 'Caption'

Adjust the punctuation OR enter a new 'Caption'
20

Click on 'Additional Info' field > Delete the default text

Click on 'Additional Info' field > Delete the default text
21

Type in 'Additional Info' (optional)

Type in 'Additional Info' (optional)
22

If you would like to add a 'Verification Window Image', click on 'Add' > Upload the imageNote: I skipped this step (optional)

23

Click on 'Appearance'

Click on 'Appearance'
24

Here you can select new colors, if desired (optional)

I am going to change the 'Submit Button Color': Click on the coloured dot

Here you can select new colors, if desired (optional)
25

Select from the color palette OR Click on 'Custom Color'

Select from the color palette OR Click on 'Custom Color'
26

Use the color adjustment tools OR Enter an exact Hex Code

Note: I recommend using your branding colors.

You can pull the exact Hex codes, use this Image Color Picker tool to upload an image containing your branding colors (Ex. company logo).

Use the color adjustment tools OR Enter an exact Hex Code
27

Click on 'Done'

Click on 'Done'
28

Apply other adjustments (optional)

I am going to change the 'Popup Shape'.

I selected 'Square Corners', which made all the edges sharp.

Apply other adjustments (optional)
29

Click on 'Publish' if you are satisfied with the result

Note: You can edit this widget again in the future.

Click on 'Publish' if you are satisfied with the result
30

Pick a plan: To choose the 'Lite' plan (free), click 'Select' in the first column

Note: Under the 'Lite' plan, the widget will stop working after 200 views.

  • Once expired, you will have to sign into your Elfsight account and upgrade to the 'Basic' plan OR restart this process all over again using a new Elfsight account.

  • All prices shown are in US dollars.

Pick a plan: To choose the 'Lite' plan (free), click 'Select' in the first column
31

Your widget has been created, and the code is generated! Click on 'Copy Code'

Your widget has been created, and the code is generated! Click on 'Copy Code'

Note: If you are NOT using Squarespace as your web builder, select your provider from the 'Platform Tutorials' list. Instructions will be provided.

🟠

PART IV: Paste the generated code to Squarespace

0 Steps

➡️

Sign in to your Squarespace account

4 Steps

Go to https://account.squarespace.com

Please note that Squarespace has updated their main user interface since the making of this tutorial. One of the changes is where to access the 'Code Injection' page.

Before: After signing in, go to Website > Settings > Developer Tools > Code Injection
Now: After signing in, go to Website > Website Tools (under Utilities) > Code Injection

32

Paste the code into the 'HEADER' field

Code Injection is found in 'Website' > 'Website Tools' (under Utilities)

Paste the code into the 'HEADER' field
33

Hit 'SAVE'

Hit 'SAVE'
34

Refresh your internet browser to see your new Age Gate!

Refresh your internet browser to see your new Age Gate!
35

All done ✅

All done ✅
Well done!
Create how-to guides like this in a snap. Get Tango now.