{"_id":"586365f3b8b7fa23009665ee","version":{"_id":"56cacb1cc675f50b00a4b61c","project":"56cacb1bc675f50b00a4b619","__v":14,"createdAt":"2016-02-22T08:47:24.528Z","releaseDate":"2016-02-22T08:47:24.528Z","categories":["56cacb1dc675f50b00a4b61d","56cc10aaca43550b0028125a","56cc10b7b4cbcf0b004a5df9","56cc1bb2272aa4130002ccd2","56cc5834b4cbcf0b004a5f8b","56cda18bface161300dae13b","56d51f2873dcd20b00fb87bb","56fbe0610023171700b96105","57658310c176520e00ea9076","5772bdd48c48e00e00503638","577c1dfe87acf617003c3fcd","579525172979790e00771a15","582b4661cdfdc125000c8684","586365cedfe6cc3700a7be63"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1"},"user":"58625b34d072b40f00caab11","project":"56cacb1bc675f50b00a4b619","__v":0,"category":{"_id":"586365cedfe6cc3700a7be63","__v":0,"project":"56cacb1bc675f50b00a4b619","version":"56cacb1cc675f50b00a4b61c","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-12-28T07:12:14.104Z","from_sync":false,"order":1,"slug":"web-sdk","title":"Web SDK"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-12-28T07:12:51.721Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":999,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Modal Popup mode\"\n}\n[/block]\nYou can popup a window with rewards using the following sample code.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div id=\\\"codemojo-slot\\\"></div>\\n\\n<script type=\\\"text/javascript\\\" src=\\\"https://cdn.codemojo.io/js/sdk/rewards/v1\\\"></script>\\n<script>\\n    var codemojo;\\n    window.addEventListener('load', function (){\\n        var settings = {\\n            popup : 1,\\n            communication: 1,\\n          \\temail: 'user:::at:::domain.com'\\n        }\\n        codemojo = new Codemojo('username','app_id',1);\\n        codemojo.showAvailableRewards(settings);\\n    });\\n</script>\",\n      \"language\": \"html\",\n      \"name\": \"Sample Code\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"In-page embed mode\"\n}\n[/block]\nEmbed rewards as a part of the page using the codes given below.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div id=\\\"codemojo-slot\\\"></div>\\n\\n<script type=\\\"text/javascript\\\" src=\\\"https://cdn.codemojo.io/js/sdk/rewards/v1\\\"></script>\\n<script>\\n    var codemojo;\\n    window.addEventListener('load', function (){\\n        var settings = {\\n            popup : 0,\\n            communication: 0,\\n            email: 'user@domain.com'\\n        }\\n        codemojo = new Codemojo('username','app_id',1);\\n        codemojo.showAvailableRewards(settings);\\n    });\\n</script>\",\n      \"language\": \"html\",\n      \"name\": \"Sample Code\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Object mode - Custom UI\"\n}\n[/block]\nThese function will return json object.\n**getAvailableRewards()** will return the available rewards and **grabReward()** will return the coupon code along with the details of the offer.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"https://cdn.codemojo.io/js/sdk/rewards/v1\\\"></script>\\n\\t\\t<script>\\n\\t\\t\\tvar codemojo;\\n\\t\\t\\tvar HTML_DATA = \\\"\\\";\\n\\t\\t\\twindow.addEventListener('load', function (){\\n\\t\\t\\t\\t\\tvar settings = {\\n\\t\\t\\t\\t\\t\\tpopup : 0,\\n\\t\\t\\t\\t\\t\\tcommunication : 0,\\n            email: 'user@domain.com',\\n            return_object: 1,\\n\\t\\t\\t\\t\\t\\ttesting: 1,\\n\\t\\t\\t\\t\\t\\tlon: '77.5946',\\n\\t\\t\\t\\t\\t\\tlat: '12.9716',\\n\\t\\t\\t\\t\\t\\tlocale: 'in'\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\tcodemojo = new Codemojo('username','app_id',1);\\n\\t\\t\\t\\t\\tcodemojo.getAvailableRewards(settings, function(object){\\n\\t\\t\\t\\t\\t\\tfor (var key in object) {\\n\\t\\t\\t\\t\\t\\t\\tvar obj = object[key];\\n\\t\\t\\t\\t\\t\\t\\tHTML_DATA = '<a href=\\\"JavaScript:flow(\\\\''+ obj['id'] +'\\\\');\\\" id=\\\"'+ obj['id'] +'\\\">[ '+ obj['brand_name'] +' ] '+ obj['offer'] +'</a><br>' + HTML_DATA;\\n\\t\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\t\\tdocument.getElementById('container').innerHTML=HTML_DATA;\\n\\t\\t\\t\\t\\t});\\n\\t\\t\\t});\\n\\t\\t\\tfunction flow(id){\\n\\t\\t\\t\\t\\tcodemojo.grabReward(id, function(object){\\n\\t\\t\\t\\t\\t\\tdocument.getElementById('container').innerHTML=object.coupon_code;\\n\\t\\t\\t\\t\\t});\\n\\t\\t\\t}\\n\\t\\t</script>\\n\\t\\t<div id=\\\"container\\\">Loading..</div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"getAvailableRewards(settings, callback);\",\n      \"language\": \"javascript\",\n      \"name\": \"Signature\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"grabReward(id, callback);\",\n      \"language\": \"javascript\",\n      \"name\": \"Signature\"\n    }\n  ]\n}\n[/block]\nHere **id** is the id of the offer returned by the **getAvailableRewards()** function.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" Codemojo(username,app_id,environment);\",\n      \"language\": \"javascript\",\n      \"name\": \"Signature\"\n    }\n  ]\n}\n[/block]\n## Parameters \n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Parameter\",\n    \"h-1\": \"Description\",\n    \"0-0\": \"username\",\n    \"1-0\": \"app_id\",\n    \"2-0\": \"environment\",\n    \"0-1\": \"Customer ID of the logged in user.\",\n    \"1-1\": \"Your application id.\",\n    \"2-1\": \"SANDBOX = 1, PRODUCTION = 2, LOCAL = 3.\"\n  },\n  \"cols\": 2,\n  \"rows\": 3\n}\n[/block]\n##  Settings\n\n\n**General** \n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Option\",\n    \"h-1\": \"Example\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"popup\",\n    \"1-0\": \"communication\",\n    \"2-0\": \"email\",\n    \"3-0\": \"testing\",\n    \"4-0\": \"lat\",\n    \"5-0\": \"lon\",\n    \"6-0\": \"locale\",\n    \"7-0\": \"gender\",\n    \"0-1\": \"popup: 1\",\n    \"1-1\": \"communication : 1\",\n    \"2-1\": \"email : 'user@domain.com'\",\n    \"3-1\": \"testing: 1\",\n    \"4-1\": \"lat : '12.9716'\",\n    \"5-1\": \"lon : '77.5946'\",\n    \"6-1\": \"locale : 'IN'\",\n    \"7-1\": \"gender : 'male'\",\n    \"8-0\": \"age\",\n    \"9-0\": \"style_head\",\n    \"10-0\": \"style_foot\",\n    \"11-0\": \"style_body\",\n    \"12-0\": \"style_body_2\",\n    \"13-0\": \"style_modal\",\n    \"14-0\": \"style_back_button_hover\",\n    \"15-0\": \"style_get_reward_button\",\n    \"16-0\": \"style_get_reward_button_hover\",\n    \"8-1\": \"age: 20\",\n    \"9-1\": \"style_modal: 'background:#CCCCCC;color:#1E1E1E'\",\n    \"10-1\": \"style_body: 'background:#F7F7F7;color:#1E1E1E'\",\n    \"11-1\": \"style_box: 'background:#E5E5E5;color:#565656'\",\n    \"12-1\": \"style_box_hover: 'background:#eeeeee;color:#565656'\",\n    \"13-1\": \"style_back_button: 'background:#FFFFFF;border:1px solid #CCCCCC;'\",\n    \"14-1\": \"style_back_button_hover: 'background:#EEE'\",\n    \"15-1\": \"style_get_reward_button: 'background:#5cb85c;color:#FFFFFF;border:0px;'\",\n    \"16-1\": \"style_get_reward_button_hover: 'color: #fff;background-color: #449d44;'\",\n    \"0-2\": \"1 to enable popup, 0 for embed and 2 for popup and embed at the same time.\",\n    \"1-2\": \"1 to indicate auto send communication about the Reward to the user via email/sms to the user - 0 for otherwise\",\n    \"2-2\": \"Email / Phone communication channel where the reward is to be delivered to\",\n    \"3-2\": \"1 to indicate testing 0 to indicate production\",\n    \"4-2\": \"Latitude\",\n    \"5-2\": \"Longitude\",\n    \"6-2\": \"Short code country format. Example IN, US, GB.\",\n    \"7-2\": \"Optional user detail.\",\n    \"8-2\": \"Optional user detail.\",\n    \"9-2\": \"Style for modal selector.\",\n    \"10-2\": \"Style for modal body selector.\",\n    \"11-2\": \"Style for brand box selector.\",\n    \"12-2\": \"Style for brand box hover selector.\",\n    \"13-2\": \"Style for Back and Close button selector.\",\n    \"14-2\": \"Style for Back and Close button hover selector.\",\n    \"15-2\": \"Style for Get The Reward selector.\",\n    \"16-2\": \"Style for Get The Reward hover selector.\",\n    \"17-0\": \"style_head\",\n    \"17-1\": \"style_head:color:#fff;\",\n    \"17-2\": \"Style for heading.\",\n    \"20-0\": \"LOAD_IMAGE\",\n    \"20-1\": \"LOAD_IMAGE: 'https://cdn.codemojo.io/images/js/loaders/default.gif'\",\n    \"20-2\": \"Full path of loading gif image.\",\n    \"18-0\": \"style_foot\",\n    \"19-0\": \"style_body_2\",\n    \"18-1\": \"style_head:color:#fff;\",\n    \"19-1\": \"style_head:color:#fff;background:#000;\",\n    \"18-2\": \"Style for footer\",\n    \"19-2\": \"Style for body, this will take effect on Reward Detail page and Grab Reward Page.\"\n  },\n  \"cols\": 3,\n  \"rows\": 9\n}\n[/block]\n**User Interface** \n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Option\",\n    \"h-1\": \"Example\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"style_head\",\n    \"1-0\": \"style_foot\",\n    \"2-0\": \"style_body\",\n    \"3-0\": \"style_body_2\",\n    \"4-0\": \"style_modal\",\n    \"5-0\": \"style_box\",\n    \"6-0\": \"style_box_hover\",\n    \"7-0\": \"style_back_button\",\n    \"8-0\": \"style_back_button_hover\",\n    \"9-0\": \"style_get_reward_button\",\n    \"10-0\": \"style_get_reward_button_hover\",\n    \"0-1\": \"style_head: 'color:#fff;'\",\n    \"1-1\": \"style_foot: 'color:#fff;'\",\n    \"2-1\": \"style_body: 'background:#F7F7F7;color:#1E1E1E'\",\n    \"3-1\": \"style_body_2:color:#fff;background:#000;\",\n    \"4-1\": \"style_modal: 'background:#CCCCCC;color:#1E1E1E'\",\n    \"5-1\": \"style_box: 'background:#E5E5E5;color:#565656'\",\n    \"6-1\": \"style_box_hover: 'background:#eeeeee;color:#565656'\",\n    \"7-1\": \"style_back_button: 'background:#FFFFFF;border:1px solid #CCCCCC;'\",\n    \"8-1\": \"style_back_button_hover: 'background:#EEE'\",\n    \"9-1\": \"style_get_reward_button: 'background:#5cb85c;color:#FFFFFF;border:0px;'\",\n    \"10-1\": \"style_get_reward_button_hover: 'color: #fff;background-color: #449d44;'\",\n    \"0-2\": \"Style for heading.\",\n    \"1-2\": \"Style for footer.\",\n    \"2-2\": \"Style for modal body selector.\",\n    \"3-2\": \"Style for body, this will take effect on Reward Detail page and Grab Reward Page.\",\n    \"4-2\": \"Style for modal selector.\",\n    \"5-2\": \"Style for brand box selector.\",\n    \"6-2\": \"Style for brand box hover selector.\",\n    \"7-2\": \"Style for Back and Close button selector.\",\n    \"8-2\": \"Style for Back and Close button hover selector.\",\n    \"9-2\": \"Style for Get The Reward selector.\",\n    \"10-2\": \"Style for Get The Reward hover selector.\",\n    \"11-0\": \"LOAD_IMAGE\",\n    \"11-1\": \"LOAD_IMAGE: 'https://cdn.codemojo.io/images/js/loaders/default.gif'\",\n    \"11-2\": \"Full path of loading gif image.\"\n  },\n  \"cols\": 3,\n  \"rows\": 12\n}\n[/block]\n**Titles** \n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Options\",\n    \"h-1\": \"Example\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"title_rewards_list\",\n    \"1-0\": \"title_reward_detail\",\n    \"2-0\": \"title_reward_grab\",\n    \"2-1\": \"title_reward_grab: \\\"Thank you! Your reward details are below\\\"\",\n    \"1-1\": \"title_reward_detail: \\\"More about the reward\\\"\",\n    \"0-1\": \"title_rewards_list: \\\"Please pick a reward below\\\"\",\n    \"0-2\": \"Title of \\\"Available Rewards\\\" page.\",\n    \"1-2\": \"Title of \\\"Reward Details\\\" page.\",\n    \"2-2\": \"Title of \\\"Grab Reward\\\" page.\",\n    \"3-0\": \"title_cursor_outside\",\n    \"3-1\": \"title_cursor_outside: \\\"Wait! We have some rewards for you\\\"\",\n    \"3-2\": \"Title for rewards list on cursor outside window trigger.\"\n  },\n  \"cols\": 3,\n  \"rows\": 4\n}\n[/block]\n**Triggers**\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Options\",\n    \"h-1\": \"Example\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"track_session_time\",\n    \"1-0\": \"track_time_repeat_count\",\n    \"2-0\": \"track_type\",\n    \"3-0\": \"track_on_page_count\",\n    \"4-0\": \"track_page_repeat_count\",\n    \"4-1\": \"track_page_repeat_count:7\",\n    \"3-1\": \"track_on_page_count: 5\",\n    \"2-1\": \"track_type: 'page'\",\n    \"1-1\": \"track_time_repeat_count:3\",\n    \"0-1\": \"track_session_time:3\",\n    \"0-2\": \"Trigger rewards after x seconds.\",\n    \"1-2\": \"Trigger the rewards y times every x seconds.\",\n    \"2-2\": \"If track_type is \\\"website\\\", tracker will consider the time spend on whole website by the user. If it is page, tracker will consider the time only on that page.\",\n    \"3-2\": \"Trigger rewards on x number of page visits.\",\n    \"4-2\": \"Trigger rewards y time every x number of page visits.\",\n    \"5-0\": \"track_on_cursor_outiside_window\",\n    \"5-1\": \"track_on_cursor_outiside_window:true\",\n    \"5-2\": \"Trigger rewards if user is trying to move the cursor out side the window.\"\n  },\n  \"cols\": 3,\n  \"rows\": 6\n}\n[/block]\n**Callbacks** \n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"on_reward_grab\",\n    \"1-0\": \"on_error\",\n    \"2-0\": \"on_popup_close\",\n    \"0-1\": \"on_reward_grab : function (grab_data) {\\n            console.log(grab_data);\\n            }\",\n    \"1-1\": \"on_error: function(code, message) {\\n                alert(\\\"Error code: \\\" + code + \\\", Message: \\\" + message)\\n            }\",\n    \"2-1\": \"on_popup_close: function(){\\n                alert('Window closed')\\n            }\",\n    \"0-2\": \"Callback function when user grabs a reward.\",\n    \"1-2\": \"Callback function when an error occurs.\",\n    \"2-2\": \"Callback when popup is closed.\",\n    \"h-0\": \"Options\",\n    \"h-1\": \"Example\",\n    \"h-2\": \"Description\"\n  },\n  \"cols\": 3,\n  \"rows\": 3\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## Screenshots \n\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/f9deff3-available_rewards.png\",\n        \"available_rewards.png\",\n        850,\n        520,\n        \"#cdcbca\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/34fbbd1-reward_details.png\",\n        \"reward_details.png\",\n        850,\n        520,\n        \"#e3e2e1\"\n      ]\n    }\n  ]\n}\n[/block]","excerpt":"This page will help you embed reward service in your website. This is a JavaScript based snippet which comes with a basic UI.","slug":"rewards-network-js-sdk","type":"basic","title":"Javascript SDK"}

Javascript SDK

This page will help you embed reward service in your website. This is a JavaScript based snippet which comes with a basic UI.

[block:api-header] { "type": "basic", "title": "Modal Popup mode" } [/block] You can popup a window with rewards using the following sample code. [block:code] { "codes": [ { "code": "<div id=\"codemojo-slot\"></div>\n\n<script type=\"text/javascript\" src=\"https://cdn.codemojo.io/js/sdk/rewards/v1\"></script>\n<script>\n var codemojo;\n window.addEventListener('load', function (){\n var settings = {\n popup : 1,\n communication: 1,\n \temail: 'user@domain.com'\n }\n codemojo = new Codemojo('username','app_id',1);\n codemojo.showAvailableRewards(settings);\n });\n</script>", "language": "html", "name": "Sample Code" } ] } [/block] [block:api-header] { "type": "basic", "title": "In-page embed mode" } [/block] Embed rewards as a part of the page using the codes given below. [block:code] { "codes": [ { "code": "<div id=\"codemojo-slot\"></div>\n\n<script type=\"text/javascript\" src=\"https://cdn.codemojo.io/js/sdk/rewards/v1\"></script>\n<script>\n var codemojo;\n window.addEventListener('load', function (){\n var settings = {\n popup : 0,\n communication: 0,\n email: 'user@domain.com'\n }\n codemojo = new Codemojo('username','app_id',1);\n codemojo.showAvailableRewards(settings);\n });\n</script>", "language": "html", "name": "Sample Code" } ] } [/block] [block:api-header] { "type": "basic", "title": "Object mode - Custom UI" } [/block] These function will return json object. **getAvailableRewards()** will return the available rewards and **grabReward()** will return the coupon code along with the details of the offer. [block:code] { "codes": [ { "code": "<script type=\"text/javascript\" src=\"https://cdn.codemojo.io/js/sdk/rewards/v1\"></script>\n\t\t<script>\n\t\t\tvar codemojo;\n\t\t\tvar HTML_DATA = \"\";\n\t\t\twindow.addEventListener('load', function (){\n\t\t\t\t\tvar settings = {\n\t\t\t\t\t\tpopup : 0,\n\t\t\t\t\t\tcommunication : 0,\n email: 'user@domain.com',\n return_object: 1,\n\t\t\t\t\t\ttesting: 1,\n\t\t\t\t\t\tlon: '77.5946',\n\t\t\t\t\t\tlat: '12.9716',\n\t\t\t\t\t\tlocale: 'in'\n\t\t\t\t\t}\n\t\t\t\t\tcodemojo = new Codemojo('username','app_id',1);\n\t\t\t\t\tcodemojo.getAvailableRewards(settings, function(object){\n\t\t\t\t\t\tfor (var key in object) {\n\t\t\t\t\t\t\tvar obj = object[key];\n\t\t\t\t\t\t\tHTML_DATA = '<a href=\"JavaScript:flow(\\''+ obj['id'] +'\\');\" id=\"'+ obj['id'] +'\">[ '+ obj['brand_name'] +' ] '+ obj['offer'] +'</a><br>' + HTML_DATA;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdocument.getElementById('container').innerHTML=HTML_DATA;\n\t\t\t\t\t});\n\t\t\t});\n\t\t\tfunction flow(id){\n\t\t\t\t\tcodemojo.grabReward(id, function(object){\n\t\t\t\t\t\tdocument.getElementById('container').innerHTML=object.coupon_code;\n\t\t\t\t\t});\n\t\t\t}\n\t\t</script>\n\t\t<div id=\"container\">Loading..</div>", "language": "html" } ] } [/block] [block:code] { "codes": [ { "code": "getAvailableRewards(settings, callback);", "language": "javascript", "name": "Signature" } ] } [/block] [block:code] { "codes": [ { "code": "grabReward(id, callback);", "language": "javascript", "name": "Signature" } ] } [/block] Here **id** is the id of the offer returned by the **getAvailableRewards()** function. [block:code] { "codes": [ { "code": " Codemojo(username,app_id,environment);", "language": "javascript", "name": "Signature" } ] } [/block] ## Parameters [block:parameters] { "data": { "h-0": "Parameter", "h-1": "Description", "0-0": "username", "1-0": "app_id", "2-0": "environment", "0-1": "Customer ID of the logged in user.", "1-1": "Your application id.", "2-1": "SANDBOX = 1, PRODUCTION = 2, LOCAL = 3." }, "cols": 2, "rows": 3 } [/block] ## Settings **General** [block:parameters] { "data": { "h-0": "Option", "h-1": "Example", "h-2": "Description", "0-0": "popup", "1-0": "communication", "2-0": "email", "3-0": "testing", "4-0": "lat", "5-0": "lon", "6-0": "locale", "7-0": "gender", "0-1": "popup: 1", "1-1": "communication : 1", "2-1": "email : 'user@domain.com'", "3-1": "testing: 1", "4-1": "lat : '12.9716'", "5-1": "lon : '77.5946'", "6-1": "locale : 'IN'", "7-1": "gender : 'male'", "8-0": "age", "9-0": "style_head", "10-0": "style_foot", "11-0": "style_body", "12-0": "style_body_2", "13-0": "style_modal", "14-0": "style_back_button_hover", "15-0": "style_get_reward_button", "16-0": "style_get_reward_button_hover", "8-1": "age: 20", "9-1": "style_modal: 'background:#CCCCCC;color:#1E1E1E'", "10-1": "style_body: 'background:#F7F7F7;color:#1E1E1E'", "11-1": "style_box: 'background:#E5E5E5;color:#565656'", "12-1": "style_box_hover: 'background:#eeeeee;color:#565656'", "13-1": "style_back_button: 'background:#FFFFFF;border:1px solid #CCCCCC;'", "14-1": "style_back_button_hover: 'background:#EEE'", "15-1": "style_get_reward_button: 'background:#5cb85c;color:#FFFFFF;border:0px;'", "16-1": "style_get_reward_button_hover: 'color: #fff;background-color: #449d44;'", "0-2": "1 to enable popup, 0 for embed and 2 for popup and embed at the same time.", "1-2": "1 to indicate auto send communication about the Reward to the user via email/sms to the user - 0 for otherwise", "2-2": "Email / Phone communication channel where the reward is to be delivered to", "3-2": "1 to indicate testing 0 to indicate production", "4-2": "Latitude", "5-2": "Longitude", "6-2": "Short code country format. Example IN, US, GB.", "7-2": "Optional user detail.", "8-2": "Optional user detail.", "9-2": "Style for modal selector.", "10-2": "Style for modal body selector.", "11-2": "Style for brand box selector.", "12-2": "Style for brand box hover selector.", "13-2": "Style for Back and Close button selector.", "14-2": "Style for Back and Close button hover selector.", "15-2": "Style for Get The Reward selector.", "16-2": "Style for Get The Reward hover selector.", "17-0": "style_head", "17-1": "style_head:color:#fff;", "17-2": "Style for heading.", "20-0": "LOAD_IMAGE", "20-1": "LOAD_IMAGE: 'https://cdn.codemojo.io/images/js/loaders/default.gif'", "20-2": "Full path of loading gif image.", "18-0": "style_foot", "19-0": "style_body_2", "18-1": "style_head:color:#fff;", "19-1": "style_head:color:#fff;background:#000;", "18-2": "Style for footer", "19-2": "Style for body, this will take effect on Reward Detail page and Grab Reward Page." }, "cols": 3, "rows": 9 } [/block] **User Interface** [block:parameters] { "data": { "h-0": "Option", "h-1": "Example", "h-2": "Description", "0-0": "style_head", "1-0": "style_foot", "2-0": "style_body", "3-0": "style_body_2", "4-0": "style_modal", "5-0": "style_box", "6-0": "style_box_hover", "7-0": "style_back_button", "8-0": "style_back_button_hover", "9-0": "style_get_reward_button", "10-0": "style_get_reward_button_hover", "0-1": "style_head: 'color:#fff;'", "1-1": "style_foot: 'color:#fff;'", "2-1": "style_body: 'background:#F7F7F7;color:#1E1E1E'", "3-1": "style_body_2:color:#fff;background:#000;", "4-1": "style_modal: 'background:#CCCCCC;color:#1E1E1E'", "5-1": "style_box: 'background:#E5E5E5;color:#565656'", "6-1": "style_box_hover: 'background:#eeeeee;color:#565656'", "7-1": "style_back_button: 'background:#FFFFFF;border:1px solid #CCCCCC;'", "8-1": "style_back_button_hover: 'background:#EEE'", "9-1": "style_get_reward_button: 'background:#5cb85c;color:#FFFFFF;border:0px;'", "10-1": "style_get_reward_button_hover: 'color: #fff;background-color: #449d44;'", "0-2": "Style for heading.", "1-2": "Style for footer.", "2-2": "Style for modal body selector.", "3-2": "Style for body, this will take effect on Reward Detail page and Grab Reward Page.", "4-2": "Style for modal selector.", "5-2": "Style for brand box selector.", "6-2": "Style for brand box hover selector.", "7-2": "Style for Back and Close button selector.", "8-2": "Style for Back and Close button hover selector.", "9-2": "Style for Get The Reward selector.", "10-2": "Style for Get The Reward hover selector.", "11-0": "LOAD_IMAGE", "11-1": "LOAD_IMAGE: 'https://cdn.codemojo.io/images/js/loaders/default.gif'", "11-2": "Full path of loading gif image." }, "cols": 3, "rows": 12 } [/block] **Titles** [block:parameters] { "data": { "h-0": "Options", "h-1": "Example", "h-2": "Description", "0-0": "title_rewards_list", "1-0": "title_reward_detail", "2-0": "title_reward_grab", "2-1": "title_reward_grab: \"Thank you! Your reward details are below\"", "1-1": "title_reward_detail: \"More about the reward\"", "0-1": "title_rewards_list: \"Please pick a reward below\"", "0-2": "Title of \"Available Rewards\" page.", "1-2": "Title of \"Reward Details\" page.", "2-2": "Title of \"Grab Reward\" page.", "3-0": "title_cursor_outside", "3-1": "title_cursor_outside: \"Wait! We have some rewards for you\"", "3-2": "Title for rewards list on cursor outside window trigger." }, "cols": 3, "rows": 4 } [/block] **Triggers** [block:parameters] { "data": { "h-0": "Options", "h-1": "Example", "h-2": "Description", "0-0": "track_session_time", "1-0": "track_time_repeat_count", "2-0": "track_type", "3-0": "track_on_page_count", "4-0": "track_page_repeat_count", "4-1": "track_page_repeat_count:7", "3-1": "track_on_page_count: 5", "2-1": "track_type: 'page'", "1-1": "track_time_repeat_count:3", "0-1": "track_session_time:3", "0-2": "Trigger rewards after x seconds.", "1-2": "Trigger the rewards y times every x seconds.", "2-2": "If track_type is \"website\", tracker will consider the time spend on whole website by the user. If it is page, tracker will consider the time only on that page.", "3-2": "Trigger rewards on x number of page visits.", "4-2": "Trigger rewards y time every x number of page visits.", "5-0": "track_on_cursor_outiside_window", "5-1": "track_on_cursor_outiside_window:true", "5-2": "Trigger rewards if user is trying to move the cursor out side the window." }, "cols": 3, "rows": 6 } [/block] **Callbacks** [block:parameters] { "data": { "0-0": "on_reward_grab", "1-0": "on_error", "2-0": "on_popup_close", "0-1": "on_reward_grab : function (grab_data) {\n console.log(grab_data);\n }", "1-1": "on_error: function(code, message) {\n alert(\"Error code: \" + code + \", Message: \" + message)\n }", "2-1": "on_popup_close: function(){\n alert('Window closed')\n }", "0-2": "Callback function when user grabs a reward.", "1-2": "Callback function when an error occurs.", "2-2": "Callback when popup is closed.", "h-0": "Options", "h-1": "Example", "h-2": "Description" }, "cols": 3, "rows": 3 } [/block] [block:api-header] { "type": "basic" } [/block] ## Screenshots [block:image] { "images": [ { "image": [ "https://files.readme.io/f9deff3-available_rewards.png", "available_rewards.png", 850, 520, "#cdcbca" ] } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/34fbbd1-reward_details.png", "reward_details.png", 850, 520, "#e3e2e1" ] } ] } [/block]