How to Add an Age Gate to your Website

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

🟠 PART I: Sign up for Elfsight

1. 1. Click on 'Sign Up Free'

   

2. 2. Click on 'Continue with Email'

   

3. 3. Type in your Email Address

   

4. 4. Type in a new Password

   

5. 5. Click on 'Sign Up'

   

🟠 PART II: Confirm your email address

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

   

2. 7. After email has been verified, click on 'Close'

   

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

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

   

2. 9. Select 'Age Verification'

   

3. 10. Select a template: I chose 'Default'

   

4. 11. Click on 'Continue with this template'

   

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

   

6. 13. Click on the 'Verification Method' dropdown

   

7. 14. Select 'Date of Birth'

   

8. 15. Click on 'Content'

   

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

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

    

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

    

12. 19. Adjust the punctuation OR enter a new 'Caption'

    

13. 20. Click on 'Additional Info' field > Delete the default text

    

14. 21. Type in 'Additional Info' (optional)

    

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

16. 23. Click on 'Appearance'

    

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

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

    

18. 25. Select from the color palette OR Click on 'Custom Color'

    

19. 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).

    

20. 27. Click on 'Done'

    

21. 28. Apply other adjustments (optional)

    I am going to change the 'Popup Shape'.

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

    

22. 29. Click on 'Publish' if you are satisfied with the result

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

    

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

    

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

    

🟠 PART IV: Paste the generated code to Squarespace

➡️ Sign in to your Squarespace account

1. 32. Paste the code into the 'HEADER' field

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

   

2. 33. Hit 'SAVE'

   

3. 34. Refresh your internet browser to see your new Age Gate!

   

4. 35. All done ✅