Add A Secret Code To Your Website

April 14, 2022

In this video I will show you something fun!

I will show how to add an interactive Easter Egg to your Elementor website.

In this tutorial I will show 2 different ways to add a secret code to your Elementor website.

To follow this tutorial it will require Elementor Pro.
Use our affiliate link below if you’d like to support this YouTube channel.

Elementor Pro:
https://trk.elementor.com/4776

Konami Code CodePen:
https://codepen.io/cferdinandi/pen/qBWVPqL

Timestamps:

  • 0:00 Introduction
  • 2:50 Easter Egg Section Example
  • 11:21 Easter Egg Pop-Up Example

Example #1 Code:

				
					<script>
    var pattern = ['w', 'i', 'c', 'k', 'y'];
var current = 0;

var keyHandler = function (event) {

	// If the key isn't in the pattern, or isn't the current key in the pattern, reset
	if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
		current = 0;
		
		return;
		
	}

	// Update how much of the pattern is complete
	current++;

	// If complete, alert and reset
	if (pattern.length === current) {
		current = 0;
document.getElementById("easteregg").style.display = 'block';
	}

};

// Listen for keydown events
document.addEventListener('keydown', keyHandler, false);
</script>
				
			

HTML Close Button

				
					<div style="text-align:center"><button onclick="myFunction()">Close Me</button></div>
<script>
    function myFunction() {
  var x = document.getElementById("easteregg");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>
				
			

Example #2 Code:

				
					<script>
    var pattern = ['w', 'i', 'c', 'k', 'y'];
var current = 0;

var keyHandler = function (event) {

	// If the key isn't in the pattern, or isn't the current key in the pattern, reset
	if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
		current = 0;
		
		return;
		
	}

	// Update how much of the pattern is complete
	current++;

	// If complete, alert and reset
	if (pattern.length === current) {
		current = 0;
	elementorProFrontend.modules.popup.showPopup( { id: 20012 } );
	}

};

// Listen for keydown events
document.addEventListener('keydown', keyHandler, false);
</script>
				
			

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

Share this post:

Facebook
Reddit
Twitter
Pinterest
LinkedIn
Email

More Free Resources