Create an HTML5 app

In Pepper Folio, users can view and interact with HTML5 apps. Each HTML5 app is a zip file that contains HTML files, CSS files, JS files, and images. They appear as a .pepperapp file type when you download them.

To prepare an HTML5 app for Pepper Folio, do the following:

1. Make sure your HTML5 app has an index.html file as its homepage.
2. Once your HTML5 app files are ready, compress them into a .zip file. Make sure the index.html file is located at the root. Do not compress a parent folder that contains all of your files; this will result in an HTML5 app that doesn't work properly. Instead, select your index.html and all of the other files that make up your app, as in the screenshot below. 
   
3. Change the file extension of your .zip file to .pepperapp.
   • In Windows, right click the .zip file and select “Rename.” Change .zip to .pepperapp, then confirm the change.
   • In MacOS, right click the .zip file and select “Get Info.” Under Name & Extension, change .zip to .pepperapp, then confirm the change.
4. Upload your .pepperapp file into Pepper Flow and send it through your review process. Once it’s approved, it will display in Pepper Folio.

Tips

• By default, each HTML5 app displays a tablet icon as the thumbnail. To use a custom thumbnail instead, include a thumb.png file alongside your index.html. Recommended image size is 400px by 400px, but some variation is OK.
  
• To link to files from your HTML5 app, do any of the following:
  • For files that are available in Pepper Folio, copy and paste the file’s Viewer URL. For this option to work, people who view the HTML5 app will also need access to Pepper Folio.
  • For files that are approved in Pepper Flow, use public URLs.
  • For any other files, include them within the HTML5 app and use relative links.
• When you link to anything outside the HTML5 app, use target="_blank" to open the link in a new window. This allows for easier navigation back to your HTML5 app.
• Save images, videos, and other files at smaller file sizes, the way you would for a website. This makes your HTML5 app load faster.

Issues you may run into

• If you forget to change your .zip to a .pepperapp before you upload it to Pepper Flow, make sure to make an arbitrary change (like adding an empty folder) before re-uploading the proper .pepperapp. Otherwise, Pepper Flow will continue to interpret your .pepperapp as a regular .zip file, and the HTML5 app won’t display in Pepper Folio.