Skip to main content

SDK Integration

||

ShowpadLib is the JavaScript library that Showpad makes available when your HTML5 app runs within the platform. It is the in-app equivalent of the Experience App SDK. Where the SDK is an npm package for Showpad Apps built with a development toolchain, ShowpadLib is a global (window.ShowpadLib) available directly in plain HTML5 apps without any build step.

It enables your HTML5 app to integrate with the Showpad platform at runtime. Rather than building a standalone experience, you can use it to bridge your app with Showpad: accessing user context, managing Collections, and triggering share workflows directly from your JavaScript code.

What you'll learn

  • Which SDK functions are available from HTML content
  • Which platforms support SDK Integration
  • How to detect when ShowpadLib is ready and call SDK functions
TL;DR
  • ShowpadLib is made available by the platform; you do not load it yourself
  • Wait for window.ShowpadLib !== undefined before calling functions
  • Not available in the Admin App preview

Platform availability​

PlatformSupported
iOS (4.5.1+)✅
Android (1.9.4+)✅
Showpad Windows Desktop App✅
Showpad Web App✅
note

API actions are not available in the Admin App when previewing HTML content.

Prerequisites
  • Plan: eOS Expert, eOS Advanced, eOS Professional
  • Legacy plan: Showpad Platform Enterprise
  • Permissions: Administrator

Available functions​

The SDK exposes functions for:

  • Getting the current user's info
  • Creating, clearing, and adding assets to a Collection
  • Adding and removing a specific asset from the current Share
  • Tracking usage events via trackEvent

For the full function reference, see the Experience App SDK documentation.

How it works​

ShowpadLib is made available by the Showpad platform; you do not load it yourself. Wait for it to be available before calling any SDK functions:

var ready = setInterval(function () {
  if (window.ShowpadLib !== undefined) {
    clearInterval(ready);
    // call SDK functions here
  }
}, 300);

See Image Placeholder for a full implementation of this loading pattern.

Next steps​

Was this page helpful?