Step-by-Step Tutorial

How to capture a photo and use it for verification purposes in real time with a smartphone or tablet

Part One: Intial Setup

[If you would like the codeREADr team to set up this service for you please email support@codereadr.com.]

Overview:

  • Step 1: Sign up for a new Dropbox account (free) or use an existing one.
  • Step 2: Find and record a copy of your API Key in your codeREADr account. 
  • Step 3: Find record a copy of a Database ID
  • Step 4: Insert API key and Database ID into a URL template to create a custom Postback URL.
Step 1:  If you do not already have a Dropbox account. Sign up for one.

Step 2: Record (copy and paste) the API Key associated with your codeREADr account.

 

A. Sign into codeREADr.com and select ‘Account’ in navigation bar at the top of the page.
Sign into codeREADr

B. Click the “API” Icon

Select the API icon

C. Copy the API Key and Record it (e.g. paste it into a text document).

Copy the API key

Step 3: Record (copy and paste) the Database ID from either a new or existing database.

A. Select ‘Databases’ in the navigation bar at the top of the page.

Open the database page

B. Select an existing database or create a new one.

Select or create a barcode database

C. Record (copy and paste) the numbers in the URL. Those numbers are your database ID.

Database ID found in the URL

Step 4: Insert API key and Database into this postback URL template to create a custom URL.

 

                                                  You must replace API_KEY and DB_ID with your own values.

                        https://www.codereadr.com/pb/dbb-postback.php?api_key=API_KEY&database_id=DB_ID

Example:  https://www.codereadr.com/pb/dbb-postback.php?api_key=29fbd802**********9c3f769a960960&database_id=280237

This URL will be pasted into the “Postback scans after they are received by the server” field in Advanced Settings

Almost Done!!

After initial set up is complete: please go to ‘Part Two: Service Configuration’ for step- by step instructions on how to create a new codeREADr Service and configure it to function with the photo postback feature.

Part Two: Service Configuration

1. Click the “Services” link in the codeREADr navigation bar at the top of the page.

Open the service page

2. Click the “Create a Service” button in the top-right corner.

Create a scanning service
3. Select ‘Validate Scans with a Database’ and then Select the Online Validation Service option.

Warning: Do NOT select ‘On-device and Later Sync Online’ option as it will not work with Photo Postback configuration.

Validate in real-time

4. In the initial set up (see part one) – a numeric ‘Database ID’ was retrieved from the URL of a database. Select that database from the dropdown menu.

Select the database from dropdown menu

5. Set duplicate scans to Valid.

It is important to set duplicate scans to ‘Valid’ for reentry applications as it will allow any barcode that is in the database to be scanned an unlimited amount of times and continue to return a ‘Valid’ scan result.

Set duplicate scans to valid

6. Select ‘Apply a Validation Pattern’ option and then select the ‘Force an invalid response when a scan match is made’ checkbox.

Apply validation pattern service
7. Name the service and Select Authorized Users:
Name the service >> Save and Continue
Name the service

Select Authorized Users for the Service >> Save and Continue

Authorize users to scan

8. Select Add a Question

Coding custom questions
9. Select: ‘Dropbox: Image only’ in the drop-down menu.
Select dropbox image only

10. Name the Question and then click the Submit button.

Name the question

11. Drag the new Dropbox question from the list of Available Questions on the right to
the — ‘Ask after submitting a valid scan’ field — (use this option if the barcode is to be checked against your original ticket database)
or
the — ‘Ask after submitting any scan’ field — (use this option if the codeREADr app is not checking for validity against your ticket database)

Add questions to scan flow

12. In Advanced Set up: “Postback scans after they are received by the server” and “Alter Response Value” options must be selected.

Advanced settings required

13.  Configurations for the Postback scans after they are received by the server settings must be:

  • Select both online and on-device checkboxes
  • Select the Full Postback option
  • Copy the Postback URL that you created in the initial setup and paste it into the field below.
Configure postback scans and postback URL

14. Configurations for the Alter Response Value advanced setting must include an Alter Response Pattern in one field and Alter Response Replacement in the field below it.

Alter response value

Copy and Paste this Alter Response Pattern in the first field

^([sS]*)$

Copy and Paste the scripts below into the Alter Response Replacement field:

There are two example scripts – one that make the images the right size for smartphones and the other for tablets. Feel free to change the script to that which best suits your needs. Ask us if you need any assistance. 
Smartphones:

<!– <iosheight>265</iosheight> –>
<html>
<head>
<title>Scan Response</title>
<meta name=”viewport” content=”initial-scale=1″ />
<!–link rel=”stylesheet” type=”text/css” href=’dbb-postback.css?time=<? /*echo(filemtime(“dbb-postback.css”));*/ ?>’ /–>
</head>
<body id=”bodyID”>
<script type=”text/codereadr” id=”regex_replacement”>$1</script>
<script type=’text/javascript’>
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
var data = document.getElementById(“regex_replacement”).innerHTML;
try {
data = JSON.parse(data);
} catch (err) {
console.log(“Trouble: “+err);
}
var showLabels = false;
var defaultResponse = “No picture? To allow re-entry scroll down to take one.”;
function loadData(data, showLabels, defaultResponse) {
var bodyElm = document.getElementById(‘bodyID’);
if (Object.prototype.toString.call( data ) !== ‘[object Array]’) {
var value = data + “”;
if (value.trim().length == 0) {
value = defaultResponse;
}
data = [{“label”:””, “type”:”text”, “value”:value}];
}
for (var i=0; i < data.length; i++) {
var label = data[i].label;
var value = data[i].value;
var type =  data[i].type;
if (showLabels) {
if (label.trim().length > 0) {
var labelElm = document.createElement(‘h2’);
labelElm.innerHTML = label;
bodyElm.appendChild(labelElm);
}
}
if (type == ‘image’) {
var valueElm = document.createElement(‘div’);
valueElm.setAttribute(‘style’, ‘max-width:480px;background:rgb(220,220,210);padding:5px;min-height:235px’);
valueElm.innerHTML = “<img style=’float:left;max-height:225px;height:225px;max-width:480px;margin:5px;’ src='” + value + “‘ />”+
“<h3 style=’font-family:monospace;text-transform:uppercase;padding:2px;’>Only valid when ticket holder is present.</h3>”;
bodyElm.appendChild(valueElm);
} else {
var valueElm = document.createElement(‘h3’);
valueElm.setAttribute(‘style’, ‘max-width:480px;background:rgb(220,220,210);padding:5px;’);
valueElm.innerHTML = value;
bodyElm.appendChild(valueElm);
}
}
}
loadData(data, showLabels, defaultResponse);
</script>
</body>
</html>

Tablets:

<!– <iosheight>480</iosheight> –>
<html>
<head>
<title>Scan Response</title>
<meta name=”viewport” content=”initial-scale=1″ />
<!- link rel=”stylesheet” type=”text/css” href=’dbb-postback.css?time=<? /echo(filemtime(“dbb-postback.css”));/ ?>’ / ->
</head>
<body id=”bodyID”>
<script type=”text/codereadr” id=”regex_replacement”>$1</script>
<script type=’text/javascript’>
function insertAfter(referenceNode, newNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); }

var data = document.getElementById(“regex_replacement”).innerHTML;
try
{ data = JSON.parse(data); }

catch (err)
{ console.log(“Trouble: “+err); }

var showLabels = false;
var defaultResponse = “No picture? To allow re-entry scroll down to take one.”;
function loadData(data, showLabels, defaultResponse) {
var bodyElm = document.getElementById(‘bodyID’);
if (Object.prototype.toString.call( data ) !== ‘[object Array]’) {
var value = data + “”;
if (value.trim().length == 0)
{ value = defaultResponse; }

data = [
{“label”:””, “type”:”text”, “value”:value}

];
}
for (var i=0; i < data.length; i++) {
var label = data[i].label;
var value = data[i].value;
var type = data[i].type;
if (showLabels) {
if (label.trim().length > 0)
{ var labelElm = document.createElement(‘h2’); labelElm.innerHTML = label; bodyElm.appendChild(labelElm); }

}
if (type == ‘image’)
{ var valueElm = document.createElement(‘div’); valueElm.setAttribute(‘style’, ‘max-width:640px;background:rgb(220,220,210);padding:5px;min-height:460px’); valueElm.innerHTML = “<img style=’float:left;max-height:450px;height:450px;max-width:420px;margin:5px;’ src='” + value + “‘ />”+ “<h1 style=’font-family:monospace;text-transform:uppercase;padding:2px;’>Only valid when ticket holder is present.</h1>”; bodyElm.appendChild(valueElm); }

else
{ var valueElm = document.createElement(‘h3’); valueElm.setAttribute(‘style’, ‘max-width:640px;background:rgb(220,220,210);padding:5px;’); valueElm.innerHTML = value; bodyElm.appendChild(valueElm); }

}
}
loadData(data, showLabels, defaultResponse);
</script>
</body>
</html>

15. Save and continue after configuring the Advanced Settings.

16. Review your Service Specifications and click ‘Done’ to finalize your service.