Guidelines for web apps and HTML content Updated October 29, 2024 17:23 Note: This article is about the new beta Admin App, which is still in development. Changes may occur. Please provide feedback directly in the beta app. 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 beta Admin App enabled Feature availability depends on your subscription package Familiarity with HTML5, Javascript, CSS, memory, and image handling Development tools to check memory usage of your HTML app like XCode (iOS) or Chrome DevTools (Web) Web apps and HTML apps corresponding to the recommended file size Content to use in your custom web app The quick way to awesomeness Use HTML5 with JavaScript and CSS; server-side languages (e.g., .NET, PHP, or Ruby) are not supported. Ensure cross-platform compatibility by using responsive design. For offline use, include all necessary resources within the ZIP. Avoid using iFrames in favor of HTTPS links. Avoid spaces in file and folder names Keep the memory limits of mobile devices in mind Follow the W3C best practices for developing web apps Compress app files into a .zip file with `index.html` at the root. 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. Back to Top Upload to Showpad To prepare your web app for uploading to Showpad: 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. 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. 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. Back to Top Offline Usage You can run web apps in Showpad without an internet connection as long as the zip archive includes all necessary resources. Back to Top Statistical Data 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 trackerga('create', 'UA-ABCDE123465-1', 'auto');// Don't let the tracker check the protocolga('set', 'checkProtocolTask', null);// Don't let the tracker check the storagega('set', 'checkStorageTask', null);// Don't let the tracker check the historyga('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. Back to Top Cross-Platform Compatibility 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. Back to Top Showpad Navigation & JS Functions 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. Back to Top Local Storage 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. Back to Top Linking 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. Back to Top Best practices for developing web applications Subject Considerations Hardware limitations Know your hardware limits. External libraries Know your external libraries, they provide you with easy to use APIs, but they might come with the cost of performance when not used correctly. JavaScript Avoid using JS animations and setTimeout, either use CSS animations (preferable 3d, so the GPU takes over the calculations, not the CPU) or use requestAnimationFrame. Design Don’t develop for a fixed viewport, not all devices are 1024*768 and devices can be rotated. If the app you're developing needs to be landscape or portrait, be sure to add a message when used incorrectly. Test inside Showpad. When sharing HTML content to a client (collection viewer), the HTML content will be shown in an iframe, make sure your viewport dimensions and overflow are set up correctly App Structure Keep your DOM as clean as possible. Remove elements you are not using. Preloading assets is only interesting when they are coming from the network, not when they are stored on the device, also don't keep them in your DOM, and make sure they have the right cache headers (or you won't be doing any preloading at all). Using the extension ".htm" does not work and you should use “.html” instead for your index, i.e. “index.html”. Avoid using shortcut folders (symlinks) in your site structure. iOS We recommend using HTTPS for HTML apps communicating externally on iOS. If you have issues with adapting to this, we recommend you to update to iOS version 10.1 or later. To make sure these URLs and HTML Apps work on iOS, we added an exception to allow HTTP communication in our web views. This exception only works from iOS version 10.1.On iOS 10.0, HTTP URLs or HTML apps that use HTTP for loading external resources will result in blank or half-loaded pages. We use WKWebview to embed content in our iOS app. Back to Top Learn how this feature works in the current Online Platform. Related articles Web apps and HTML content guidelines