@showpad/content-picker

Introduction

The content-picker lib allows Third-party developers to embed a Showpad ContentPicker within their app

Requirements

Development

• HTML & JavaScript knowledge
• a Code Editor (we like Visual Studio Code)
• Node.js 15+

Showpad

• Ultimate subscription to Showpad
• Administrator access to Showpad's Online Platform
• A Showpad OAUTH Client or API token

Platform & Browser Compatibility

We comply with all evergreen browsers & versions as documented on our Help Center

Installation

# npm
npm i @showpad/content-picker

# yarn
yarn add @showpad/content-picker

# pnpm
pnpm install @showpad/content-picker

Usage

Minimal working example of the @showpad/content-picker SDK **Requires a Showpad OAuth Client or Personal API token, see the developer docs on how to create one

// example for acme.showpad.com

import { createContentPicker, Auth } from '@showpad/content-picker';

// Register Auth Provider
Auth.registerProvider({
    getToken: async () => {
        // use your own personal API token or implement an oauth client auth flow
        return 'ACCESS_TOKEN';
    },
    getOrgInfo: async () => {
        // name of your Showpad instance
        return { subdomain: 'acme' };
    },
});

// create a Showpad content picker
const contentPicker = await createContentPicker(document.getElementById('content-picker-slot'), {
    // assets selected callback
    onSelectAssets: (assets) => {
        console.log(assets);
        contentPicker.close();
    },
    // (optional) allow selection of multiple assets
    allowMultipleSelection: true,
    // (optional) preview asset callback
    onPreview: (asset) => console.log(asset),
    // (optional) provide a Showpad supported language identifier
    language: 'en',
});

// open the content picker
contentPicker.open();