FAQ: Customization
      Back to home
      1. Help Center
      2. Troubleshooting & FAQ
      3. FAQ: Customization

      How do I implement an HTML5 (Smart Tool) application?

      Enhance your Showell account by adding HTML5 (Smart Tool) applications!

      ➡️ What is an HTML5 application?

      • An HTML5 application makes it possible to have interactive and/or animated content within Showell.
        For example: calculators, forms, configurators and 3D graphics.
      • HTML5 is a term used for web apps. It functions with:
        • HTML (markup)
        • CSS (style)
        • JavaScript (interactivity)

      ➡️ How do I add my HTML5 app to Showell?

      • HTML5 apps are added to Showell, the same way as you would add other files.
      • If you have content connected to a Smart Tool that is managed separately in your Showell account, please create and add these to a 'tools'-folder (lowercase) within your application resources. (application resources/tools)

      ➡️ Good to know:

      • Smart Tools are available for all Platforms: Windows, iOS, Android and Web.
      • Smart Tools that exceed a file size of 500mb will not be available on Showell App for Web.


      💡 This article will cover:

      General Guidelines and preparations

      • Showell is available in both Landscape (1024x768) and Portrait (768x1024) orientation, we recommend to design your application for both orientations if possible.
        • Showell Presents documents in Full screen mode without the status bar
        • Showell's Navigation bar is 50 pixels from the top and opens on top of the HTML5 Application, therefore we recommend to avoid placing control (touch) buttons in this area.

                screen ratio and status bar size


      How to set up a Single-file HTML5 application

      • Single-file applications must have a .html file extension
        For Example: contact-form.html
      • You are able to inline HTML/CSS/JavaScript coding into your Single-file HTML5 application
      • You may embed images using Data URIs
      • Gesture recognizers for left/right swipes should not be included in the application as they are already reserved by the Showell navigation itself

      💡 Tip: If you have created an interactive presentation or PDF, but after downloading it loses its transitions or elements, such as videos; You can create a singe-file app using its embed code if it's published online.

      • Make sure your presentation or PDF is published/available online.
      • Copy its HTML embed-code
        For example:
        • With Canva: your projects are already stored online. You can open any project > click Share > More > Embed
        • With Adobe InDesign: you can click 'Publish Online' from the File-tab to get a web-link (URL). Where you then can also copy its embed code
      • Paste the HTML embed-code in a notepad or text file (.txt)
        • Make sure: width="100%" height="100%"
        • Place the code between <html> and <body>
          For example: <html><body> Embed Code </body></html> 
      • save the file and change its extension to .html
      • Upload to Showell

      ➡️ Keep in mind that the embedded presentation or PDF will remain in working order, as long as the document itself is available online as well (A working link).

      ➡️ Some elements provided, such as 'download presentation', from the provided itself (Canva, Adobe,...) might not work. However, the presentation/PDF itself will not be affected.


      How to set up a Multi-file/Archived HTML5 application


      Multi-file/Archived applications:
      (Simple example of an archived Smart Tool)

      Smart tool example archive

      • Must use a ZIP compression and so have a .zip file extension
        • For example: 3dmodel.zip
      • Must contain a launch file:
        • With the following name:
          • index.html
            ➡️ This is recommended if you don't need to implement left/right swipe gestures.
          • OR app.html
            ➡️ This is recommended if you would like to implement left/right swipe gestures. Note that this will have to be activated by a user in Showell by tapping the screen.
        • This launch file should have relative paths. For example: src="./js/example.js"
      • Must contains a showell.json file
        • ➡️ Important: Showell App for Windows works with WebView2, if your form does not function due to this, add "useWebview2": false to the showell.json file.
          For example:

          • {
                 "cordova_support": true
                 "useWebview2": false
            }

        • You can use a JSON validator to discover potential errors if you've made any changes to the file. Such as the JSONLint Validator
      • May naturally contain multiple files.
        For example: CSS files, JavaScript files, images
      • May also link to other .html files within the archive, but it is recommended to implement the applications as so called single-page applications.
      ➕ Showell also offers Smart and Interactive Tools (HTML5) development service. If you'd like to know more:
      Showell