Social Locker for jQuery

Configuration Wizard

Social buttons may not work properly locally, please make sure that you uploaded the archive you got from CodeCanyon and run the configuration wizard on your website.

1. Include jQuery and the plugin files in to your page

Upload files from the folder Plugin on your website and add the code below before the tag </head> on the page where you wish put the locker. If you aready use jQuery on your website, you can skip the first line.

2. Generate And Paste Locker Code

Then paste the locker code (after the code above and before the tag </head>). Don't forget to apply the CSS selector you set (by default, the CSS class 'to-lock') to content you wish to lock.

Generate Locker Code To Paste

Copy the code and paste it into your page:

CSS Selector Specify a CSS selector which matches the content you wish to lock.

Locker Header Type a header which attracts attention or calls to action. You can leave this field empty.

Locker Message Type a message which will appear under the header. HTML tags allowed. Please support us, use one of the buttons below to unlock the content.

Theme Select the most suitable theme.

Overlap Mode Choose the way how your locker should lock the content. The blurring mode works in all browsers except IE 10-11 (In IE 10-11, the transparency mode will be applied).

Overlap Position A position where the locker has to appear.

Blurring Intensity You can change the overlap intensity for the blurring mode.

Timer Interval Sets a countdown interval for the locker.

Close Icon Shows the Close Icon at the corner.

Google Analytics If set On, the plugin will generate events for the Google Analytics when the content is unlocked.
Note: before enabling this feature, please make sure that your website contains the Google Analytics tracker code.

Show Always If on, the locker will appear always even if it was already unlocked.