Guidelines for web apps and HTML content

Showcase your content in a striking way that captivates customers and prospects. By developing interactive HTML5 web apps for Showpad, you can effectively guide sales reps and their prospects through engaging presentations. To ensure your HTML5 content performs optimally within Showpad, follow these essential guidelines.

View an example

Key benefits

• Customized HTML web apps tailored to specific sales scenarios
• Engage customers and prospects with interactive content
• Cross-platform compatibility to work seamlessly across different devices and platforms
• Offline Access if all necessary resources are packaged within the app,

You need this to succeed

The quick way to awesomeness

1. Use HTML5 with JavaScript and CSS; server-side languages (e.g., .NET, PHP, or Ruby) are not supported.
2. Ensure cross-platform compatibility by using responsive design.
3. For offline use, include all necessary resources within the ZIP.
4. Avoid using iFrames in favor of HTTPS links.
5. Avoid spaces in file and folder names
6. Keep the memory limits of mobile devices in mind
7. Follow the W3C best practices for developing web apps
8. Compress app files into a .zip file with `index.html` at the root.
9. Upload your .zip to your Showpad Library

Things to keep in mind

• General Considerations
• Upload to Showpad
• Offline Usage
• Statistical Data
• Cross-Platform Compatibility
• Showpad Navigation & JS Functions
• Local Storage
• Linking
• Best practices

General Considerations

It’s important to be aware that Showpad only supports HTML5 web apps using JavaScript, CSS, HTML, images, and similar technologies. Dynamic programming languages like Ruby, PHP, and .NET are not compatible since they require server-side processing.

In addition, Flash is not fully supported due to its outdated technology, which may cause display issues.

To prepare your web app for uploading to Showpad:

1. Ensure that the main HTML file is named “index.html” and is in the root folder. Note that if the index.html file is empty, the thumbnail will be white. To avoid this, include a loading screen image visible in the first milliseconds.
2. Compress all the app’s files into a .zip file. Be sure to include all necessary files (JavaScript, CSS, images) to ensure the app runs smoothly, even offline.
3. When you’re ready, upload the .zip file to your Showpad Library. Read more about how to do that here.

Once the .zip file is uploaded to Showpad, we’ll unpack the file, generate a thumbnail, and make it ready for use.

You can run web apps in Showpad without an internet connection as long as the zip archive includes all necessary resources.

• Showpad - Developers can track Showpad usage via the SDK’s trackEvent function.
• Google - General information can be found on Google's developers site.
  • Google Analytics - To track HTML5 app usage in Showpad’s Web app, you can integrate Google Analytics for detailed insights. Ensure all content is requested over HTTPS, as using HTTP scripts may prevent the app from loading in most browsers.
    To enable Google Analytics in HTML5 apps for both the Web App and mobile apps, follow these steps:
    

    // Create the tracker
    ga('create', 'UA-ABCDE123465-1', 'auto');
    
    // Don't let the tracker check the protocol
    ga('set', 'checkProtocolTask', null);
    
    // Don't let the tracker check the storage
    ga('set', 'checkStorageTask', null);
    
    // Don't let the tracker check the history
    ga('set', 'historyImportTask', null);
    ga('send', 'pageview', '/about');

    Note: Change the UA ID with your company's property number.

  • JavaScript tagging - You can also use Google's gtag.js service.

Showpad supports access through iOS, Android, web browsers, and Windows, making responsive design essential to ensure compatibility across various screen sizes.

• The standard web browsers, Safari and Chrome, are used on iOS and Android, while the Showpad Web platform is compatible with Edge, Chrome, Safari, and Firefox.
• The Windows Desktop app embeds a WebView2 control, so running HTML content in the Windows app is consistent with the experience in web browsers. There are no differences between the app and browser for HTML content rendering.

• Navigation - On iOS, a button in the top left corner allows users to access Showpad navigation and exit the Web App. To avoid conflicts, this area should be kept clear of any interactive elements or action buttons within the Web App itself.
• JS Functions - This article provides a full report on the JavaScript functions we offer for HTML content.

You can make use of local storage to preserve the state of a web app, allowing your users to leave and return to the app while maintaining their previous state. This includes saving details such as a completed form, selected language, and other settings.

• Assets - Use the <a href="{showpadAssetLink}"> tag for asset links in the Showpad Web App. Note that asset links use the “showpad.//” protocol (e.g., showpad://file/{assetSlug}.
• Hyperlinking - Be sure to use the <a href=“{url}”> tag method for hyperlinks in the Showpad Web App. Hyperlinks are exclusively loaded over the HTTPS protocol.
  Additionally, see the Statistical Data section regarding JavaScript sources when linking to external pages.
• Internal links - When developing your HTML5 file, you should keep in mind that you cannot use iFrames for internal links since they will not work on the iPad.
  
  

Note: By default, Angular apps have a <base href="/"> in the index.html. You should change this to <base href=""> to ensure your files are loaded properly.