CynoInfotech - HTML Scratch Card Script

Introduction

It is fun to win cashback or offers using the scratch cards. Exciting offers, cash-back, contests, lottery offers and many other displays using scratch cards popup and box are the most convenient option for all users. Users are excited to see what offers they get by scratch cards. Users are use trend of scratch cards offers, so we introduce an HTML Scratch Card Script for all website development platforms.

HTML Scratch Card Script helps to display a scratch card in the box and popup window. This script is highly customizable. This script is a responsive layout, so the users can see it in multiple mobiles, tablet devices. HTML Scratch Card Script is compatible with all browsers.

HTML Scratch Card Script helps to increase website usability by engaged users to website. You can use HTML Scratch Card Script to make scratch cards box, coupons code promotion in popup, promotional game and advertisement.

Features

  • Fully Responsive and Mobile optimized
  • Touch support and fully configurable
  • Display scratch card in the box and popup window
  • Increase website use usability by engaged users to the website
  • Increase site traffic, website functionality
  • Attracts visitors coming to the site
  • Compatible with all frameworks

Getting Started

1. Download a zip of the latest release of HTML Scratch Card Script from the Codecanyon

2. Ready to set HTML Scratch Card up on your page? Start by including the scratchcard CSS and Javascript. You can grab both these files from the /assets folder.

- Include the CSS at the top of your page in your <head> tag:
<link href="assets/css/scratchcard.css" rel="stylesheet" />

- Include the Javascript at the bottom of your page before the closing <body> tag:
<script src="assets/js/scratchcard.js"></script>
<script src="assets/js/jquery.modal.js"></script>

3. Make sure jQuery, which is required by HTML Scratch Card Script, is also loaded.

- If you already use jQuery on your page, make sure it is loaded before scratchcard.js & jquery.modal.js

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

4. Initialize the HTML Scratch Coupon Card Script and we're done.

- HTML

<div class="demo1" id="demo1" >
// put your custom HTML here
</div>

- JavaScript

(function($){ 'use strict'; $('.demo1').scratchCard({}); }(jQuery));

Options

If you want to change any of the default options, call the option method.

(function($){ 'use strict'; $('.demo1').scratchCard({ width: 300, height: 300, scratched: 40 }); }(jQuery));

OPTION DEFAULT DESCRIPTION
width 300 The width of HTML Scratch Card box
height 300 The height of HTML Scratch Card box
scratched 40 This value is used to completely uncover the box after the user scratching some portion of the box. Ex. Value is 50 then if the user scratching greater than 50% of the box then the box automatically uncovers.
coverImage Image This image is used for the cover to set on the HTML Scratch Card box. You can pass your custom cover image URL here
brushImage Image This brush image is used for scratching the HTML Scratch Card box. You can pass your custom brush image URL here.
inpopup false If true, the HTML Scratch Card box is open in a popup.
triggerOn - If you want to open popup on click of some element then pass id or class of this element ex. "#elementID" or ".className". This option only works if inpopup is true
autoTrigger false If true, the HTML Scratch Card box popup automatically trigger after 5 seconds. This option only works if inpopup is true
triggerAfter 5 The time is used for an automatic trigger popup after seconds. This option only works if inpopup and autoTrigger are true
onComplete - Callback function once the scratch is complete

Browser Support

HTML Scratch Card Script has been tested successfully in the following browsers:

  • Internet Explorer(IE 10+).
  • Chrome
  • Safari
  • Firefox
  • iOS Safari
  • iOS Chrome
  • Android Browser
  • Android Chrome

Demo

support

If you have any questions about this plugin, you can Contact Us or Email Us and within a few hours, we reply you back.