Building a PERCH app

With the PERCH Interactive Template, you can build your own PERCH app - you can either build a brand new app, or update an existing one. Talk to your PERCH contact to get started and get access to the app folder structure.


1. Download app folder

When you are building a new app, your PERCH contact will send you a link to download the template folder structure. Follow the link, download the zip file, and unzip it.

If you are updating an existing app, login to the PERCH Dashboard and download your app by going to "Campaigns". When you click the name of the campaign you want to update, you'll see the name of your app under the "Content" tab. Click the name to download the zip file, and unzip it.


2. Preview app

Once you've unzipped the app folder, you'll see a set of files containing all the logic and content of the app. Double-click the 'index.html' file to preview the app in your browser (Google Chrome recommended).

Screen Shot 2017-11-21 at 10.10.08 AM.png

Once in the browser, you can press '1' to simulate pickup of product 1, '2' for product 2, etc. Press 'c' to view your cursor and use it to select tabs. Press '0' to return to the Attract Mode.


3. Replace assets

To change the content of your app, go to the 'assets' folder. Here you will find all the existing app content organized according to the PERCH Interactive Template content structure. Replace the assets by dragging your files into the appropriate folders to create your new/updated app. Delete the placeholder assets.

Screen Shot 2017-11-21 at 10.20.04 AM.png

When replacing button assets, make sure to keep the naming consistent (use file names "button_on" and "button_off" respectively). Other assets can have any name you desire.

For more details about the PERCH Interactive Template content structure, click here to download the full documentation.


4. Refresh app

To preview your app with your updated content, double-click "REFRESH_MAC.command" in the app folder. This will run a script that let's the app locate and implement your new content. The first time you run "REFRESH_MAC.command", you might have to right-click the file and choose 'Open With > Terminal'. Once the app is refreshed, you can preview the changes in your browser by double-clicking 'index.html' as described in Step 2.

Screen Shot 2017-12-01 at 4.06.03 PM.png


5. Configure your app

In some cases, you might want to change the number of tabs and the position of tab buttons. You can do this by changing the values "numButtons", "buttonCenter", and "buttonSpacing" in the config.js file, which is located in the app folder. You can download further instructions on app configuration here, or contact a PERCH representative to get assistance configuring your app.

Screen Shot 2017-11-21 at 10.41.18 AM.png


6. Deploy app

Once you finish building your app, the final step is to deploy your app to a PERCH unit.