Blog
Tempo est.: 4 minutos

Unlock hidden content in Oxygen Builder

Neste post eu explico como

In this post I'll show you how to make a locked content. To be more accurate it's only show/hide but will look and behave like locked/unloked content.

You can check the end result this page, so you feel and experiment what I mean.

You need a few things:

  1. Name the IDs of the elements you want to change.
  2. Insert a Code block
  3. Add the given Java Script

That's it. No need to external, no extra plugins.

Why do you ever want to make this?

If you run some marketing campaings like product lauch event, you will want that people engage with you and make some actions. These actions can be a post comment, like facebook/instagram page, subscribe to your YouTube channel and so one.

I mean, you want some valuable actions for your user. But, for you to make them do all that in a more fun and interective way, you can provide a hidden valueable gift, like an ebook that you usually sell for a cost, a very valuable video, or even a coupon code.

This is where this approach can come handy and that's why I build that for one of my business.

Ok, now let's start with the actual steps you need to do to acomplish it.
So, let's start with naming the IDs.

Naming the IDs

To ilustrate, just see the gif bellow.

Changing IDs
Naming the IDs

You have to rename all buttons and all icons In order to work.
In this example, you should name like this

Step 1:
Button name = btn-1
Icon name = icon-1

Step 2:
Button name = btn-2
Icon name = icon-1

Step 3:
Button name = btn-3
Icon name = icon-3

Step 4 :
Button name = btn-4
Icon name = icon-4

Hidding Element

This is where you make the content look and feel like it's locked, but in reality is just hidden.

In order to work in this example, you should name like this:

Loked Div ID= locked
Unlocked Div ID = unlocked

Adding Java Script

Adding the Java script code to Code block element

The Java Script basically do this.

When a button is clicked it receive a value of 1 and the icon changes it's color to green to indicate it was clicked.
After all button is clicked the total value will be 4, which then hides the DIV locked and shows the DIV unlocked.

That's it.

Here is the java script code used in this example:

let totalSteps = 0;
let step1IsClicked = 0;
let step2IsClicked = 0;
let step3IsClicked = 0;
let step4IsClicked = 0;

function displayVideo(){
  //Add up the total number of steps completed
  totalSteps = step1IsClicked + step2IsClicked + step3IsClicked + step4IsClicked;
  //Check if all steps have been completed
  if (totalSteps == 4){
    //Display the video
    document.getElementById("unlocked").style.display = "flex";
    document.getElementById("locked").style.display = "none";

  }
};

//Listen for clicks on btn-1
document.getElementById("btn-1").addEventListener("click", function(){
  //mark step 1 as clicked
  step1IsClicked = 1;
  //run our display video function
  displayVideo();
  //change icon-1 color
  document.getElementById("icon-1").style.color = "#2aff00";
});

//Listen for clicks on btn-2
document.getElementById("btn-2").addEventListener("click", function(){
  //mark step 1 as clicked
  step2IsClicked = 1;
  //run our display video function
  displayVideo();
  //change icon-2 color
  document.getElementById("icon-2").style.color = "#2aff00";

});

//Listen for clicks on btn-3
document.getElementById("btn-3").addEventListener("click", function(){
  //mark step 1 as clicked
  step3IsClicked = 1;
  //run our display video function
  displayVideo();
  //change icon-3 color
  document.getElementById("icon-3").style.color = "#2aff00";
});

//Listen for clicks on btn-4
document.getElementById("btn-4").addEventListener("click", function(){
  //mark step 1 as clicked
  step4IsClicked = 1;
  //run our display video function
  displayVideo();
  //change icon-4 color
  document.getElementById("icon-4").style.color = "#2aff00";
});

Testing the end result

This is how the end result will look like.
Of course I didn't leave any real action like link to a different page, which you will want to do in most of the cases.

Another important thing to consider is that we are not tracking if the user does the action, for example, if one of the steps were like your facebook page, it will just open a tab and hope they liked it.

Final results

That's it.

I want to make it clear that this was acomplish because Alec Gall took the time to not only answer my post on Oxygen builder community but to also write the actual Java script to make it work without I even ask him. So thank you very much Allec Gall. You can also check his website here.

What do you think?
Any suggestion for making it better?
Comment on this post on Oxygen community

Artigo escrito por Fernando Arbex
Fernando é webdesigner, consultor digital e coach apaixonado por tecnologia e desenvolvimento humano. Trabalhando durante anos com a I.T. ele acredita que o caminho para uma sociedade mais harmoniosa e justa será através do uso da tecnologia de maneira inteligente e consciente.

Não perca nenhuma novidade

Post relacionados

Unlock hidden content in Oxygen Builder
Texto
Presto Player é o melhor player de vídeo para WordPress?
Vídeo
Integrando formulários do Elementor com Mautic e demais outros formulários de contato.
Texto

Mais visualizados

Presto Player é o melhor player de vídeo para WordPress?
Vídeo
Integrando formulários do Elementor com Mautic e demais outros formulários de contato.
Texto
Unlock hidden content in Oxygen Builder
Texto
Motivação e Autoconfiança
Texto

Não perca nenhuma novidade !

Preencha os campos ao lado:

Não perca nenhuma novidade na Road To Fluency!

Recentes de Negócios

Motivação e Autoconfiança
Texto
Por que escolhi fazer o curso Nanodegree de Marketing Digital da Udacity?
Texto

Recentes de Ferramentas

Unlock hidden content in Oxygen Builder
Texto
Presto Player é o melhor player de vídeo para WordPress?
Vídeo
Integrando formulários do Elementor com Mautic e demais outros formulários de contato.
Texto

Recentes de Reviews

Somos especialistas em construção de funis de venda para alta conversão, construção de, e-commerce, sistemas de e-learning (LMS), marketing digital, criação de vídeos e artes gráficas.

Fique por dentro das novidades

Copyright © 2021 FernandoArbex.com
cogenvelopefilm-playearthclockcrossmenucheckmark-circle