Making Your Locker appear on CLICK of an element

Full documentation of Mighty Content Locker. Everything You need to know about the script is in this forum!
Site Admin
User avatar
Posts: 310
Joined: Mon Jan 21, 2013 8:43 pm
Location: InnoCoders.com

Making Your Locker appear on CLICK of an element

Postby innozemec » Mon Mar 18, 2013 2:13 pm

This is a detailed guide to help You make Your Locker not to automatically appear on website load, but on a click of an element!

METHOD 1

As of version 1.5, We have implemented JavaScript function mcl_lock_up() that can be used anywhere in your html or in a JavaScript code to load the locker.

Here's a sample how to implement it for a click of an element:

1. In the Manual Lockers field at the Locker Settings tab put something random (it can be anything), just to make the locker not load automatically when the page loads. For example put #getrwqdfsgf

2. Lets say You have a Download link which You want when clicked to display the Locker. Lets say its HTML code looks like this:

Code: Select all
<a href="http://DOWNLOAD_FILE_LINK_HERE">DOWNLOAD</a>


You simply need to put the mcl_lock_up() JavaScript function to be executed on click. So it will look like this for example:

Code: Select all
<a href="http://DOWNLOAD_FILE_LINK_HERE" onclick="mcl_lock_up();">DOWNLOAD</a>



METHOD 2

1. Itegrating the Locker to your website is done the same way as You regularly do - grab the Embed Code from MCL admin panel and simply paste it into your websites (as instructions advice)


2. Lets say You have a Download link which You want when clicked to display the Locker. Lets say its HTML code looks like this:

Code: Select all
<a href="http://DOWNLOAD_FILE_LINK_HERE">DOWNLOAD</a>


You simply need to edit that link and place an ID tag in it. So it will look like this for example:

Code: Select all
<a href="http://DOWNLOAD_FILE_LINK_HERE" id="my-download-link">DOWNLOAD</a>


So, we gave that link an ID tag with a value of my-download-link (it can be anything, we used that for our example only)

If Your link already has an ID tag, you can skip this step!


3. If Your Download link contains an URL You need to cut it out from Your website, so that Your visitors do not see the Download URL
and are not directed to it once they click the link. Instead We will put the URL in MCL, so they will be directed to it once they unlock the Locker.

So, our sample link that already looks like this:

Code: Select all
<a href="http://DOWNLOAD_FILE_LINK_HERE" id="my-download-link">DOWNLOAD</a>


We cut out the HREF part, and it will finally look like this:
Code: Select all
<a id="my-download-link">DOWNLOAD</a>



4. Now we go into MCL admin, and in the Locker Settings tab we find field called Manual Lockers
In that field You simply place the ID value of your Download link, converted into a jQuery Selector

As per our example, You need to place the following in the Manual Lockers field:
Code: Select all
#my-download-link


If you hove your mouse over the information icon next to the Manual Lockers field, You will see more detail info and instructions.
Also take in mind You can specify multiple selectors, simply separate them with commas


5. Next we find option Unlock URL Redirection and in it We put the URL to which we want the visitor be redirected once he unlocks
the locker. So in our example, we simply put our Download Link in that field:

http://DOWNLOAD_FILE_LINK_HERE


Save the settings and thats it, You are ready! Go test it by yourself!
Image

Indexification.com

Return to Knowledge Base (Read Only)

Who is online

Users browsing this forum: No registered users and 1 guest