Universal Content Picker

Purpose

Seismic's Content Picker, frequently referred to as the Universal Content Picker, is a component that allows you to see and interact with your seismic content in an efficient and lightweight client that is designed to be embedded in other applications. UCP is the foundation of many existing integrations, both those owned by Seismic and others created by clients and 3rd parties.

Common use cases include:

Inserting a livesend link into a 3rd party platform, such as Outlook, Gmail, Salesloft, or Outreach
Surfacing Seismic content search into your intranet or other highly used platforms
Workspace and Contextual Workspace folders for easy content access in your CRMs or Marketing Automation tools

Browser Support

Full Support:

Chrome
Chrome mobile
Edge
Firefox
Safari
Safari mobile
Mobile Chrome and Safari

Limited support

Internet Explorer 11 (requires ES2015/Intl polyfill)

Security & Authentication

The Content Picker needs permissions to access your Seismic content which is achieved by requesting an authentication token through your Seismic Hosted application. If you are unfamiliar with this concept, you can read more about it here: Authentication - high level & demo

👍
Which scopes should I use in my token?
When requesting a token, you will need to request access the following scopes, and your app will also need to be configured to allow these specific scopes. You can read more about Scopes here: Scopes

seismic.self.view

seismic.search

To simplify token generation during your development phases, Seismic has provided the following tool to manually request your Authentication Tokens: Token Generator

For your production applications where you will need to authenticate in an automated manner, please refer to the following documentation Authentication Overview. It is strongly suggested to authenticate at the user level with Implicit flow for individual user-level functionalities like favorites, LiveSend tracking, activity history, and more.

Getting started - Developer details

To quickly load a Seismic Platform component, you first must include the Seismic Bootstrapper script in the DOM and create an empty container element for the component to live in. The bootstrapper will check the containing application for dependencies already loaded, like react, or jquery, and only load what isn't already available.

🚧
Updated seismic-bootstrapper to version 2.0.0
Please refer to the updated HTML script below

<script crossorigin src="https://cdn-prod.seismic.com/static/public/seismic-bootstrapper/2.0.0/SeismicBootstrapper.js"></script>

<div id="contentPickerContainer"></div>

After the script is loaded and the container element in place, you must initialize the Bootstrapper and then attach the component to the element.

🚧
Updated content picker to version 4
Please refer to the updated Javascript below

const options = {
    manifestPath: "https://cdn-prod.seismic.com/static/public/",
    token: ''
};
const containerEl = document.getElementById('contentPickerContainer');

window.SeismicPlatform.SeismicBootstrapper.init(options);

function tokenResolver() {
    return options.token
};
function apiDomainResolver() {
    return "api.seismic.com"
};

function headerResolver() {
    return {
        'Authorization': 'Bearer ' + tokenResolver(),
        'Content-Type': 'application/json',
    }
};

const apiOptions = {
    apiDomainResolver: apiDomainResolver,
    authTokenResolver: tokenResolver,
    globalErrorHandlers: {},
    customHeadersResolver: headerResolver,
};

window.SeismicPlatform.SeismicBootstrapper.attach("universal-content-picker@4", {
    settings: {
        "language": "en-US",
        "selectionMode": "single",
        "allowFolderSelection": false,
        "repositories": ["recents", "favorites", "doccenter", "workspace", "library"],
        "initialFolderId": {},
        "viewMode": "narrow",
        "contentTypeFilter": [],
        "hideContentTypeFilteredItems": true,
        "deliveryOptionsFilter": [],
        "hideDeliveryOptionsFilteredItems": true
    },
    apiOptions: apiOptions,
    callbacks: {
        onSelectionChanged: function (items) {
            console.log(items);
        },
        onPreviewClick: function (item) {
            console.log(items);
        }
    }
}, containerEl);

Options

In addition to the options listed above, the following options can be used to customize the Seismic Content Picker for your use case.

Name	IsRequired	Value Range
language	N (default to en-US)	de-DE, en-GB, en-US, es-ES, fr-CA, fr-FR, it-IT, ja-JP, ko-KR, pt-BR, zh-CN, zh-TW, el-CY, tr-CY
selectionMode	Y	multi: Multiple contents can be selected single: Only single document can be selected drag: Contents can be dragged outside of UCP and selected by dropping on drag target
allowFolderSelection	N (default to true)	true: Folders can be selected false: Folder can’t be selected
contentTypeFilter	N	"PPTX","PPT", "Email Template", etc...
hideContentTypeFilteredItems	N	true: Hide items not matching with the filter false: Gray out items not matching with the filter
deliveryOptionsFilter	N	"Livesend","Generate Livesend Link"
hideDeliveryOptionsFilteredItems	N	true: Hide items not matching with the filter false: Gray out items not matching with the filter
viewMode	Y	narrow: Load in narrow view design. wide: Loads in wide view
repositories	N	"recents", "favorites", "doccenter", "workspace", "library"
initialFolderId	N	Content Manager { "repository": "library", "folderId": "", "teamsiteId": ""} NOTE: Enter "folderId": "root" to show all contents in the given teamsite. Workspace {"repository": "workspace", "folderId": ""} DocCenter {"repository": "doccenter", "folderId": "", "contentProfileId": ""}
assetTypeFilter	N	{ "filterType": "blacklist", "values": ["LiveDoc", "LiveDoc Component", "Email Template"] } {"filterType": "whitelist", "values": ["File"] }
formatFilter	N	{ "filterType": "blacklist", "values": ["PPTX"] } {"filterType": "whitelist", "values": ["PNG"] }
profileFilter	N	profileFilter: { "filterType": "blacklist", "values": ["1fd349ba-78da-4f62-8160-36c0c7c14fa1"] } profileFilter: { "filterType": "whitelist", "values": ["1fd349ba-78da-4f62-8160-36c0c7c14fa1"] }
showPreview	N (default to false)	true - Adds a preview button items, which on click triggers onPreviewClick callback.
application	N	The name of your application for reporting purposes
tintColor	N	# ecf0f1AA, #10c0392b, rgb(170,34,51)

Example return values

When clicking the "done" button, it will execute the function provided to the callbacks.onDone option during initialization, and pass the following JSON to the first parameter.

[
    {
        "repository": "doccenter",
        "id": "L2RkZTA0NGE5ZDgtMjY1OS00NzM1LWIzNGMtMzUwYTMxNzNmOWQyL2RmTkRWak9HWXpZekl0TTJaalpTMDBPVEpsTFRobE9HTXROMlEyTnpjeU5URTJPV0ZqLFBUMD0sUTFCSC9kZlpEbGpOall3Wm1JdFlXUXlaQzAwWWpneUxXRmtNall0T0dFd01ESTJNVGM1TlRFMyxQVDA9LFJYaDBaWEp1WVd3PS9sZjViZmNkNWU5LTYyZGEtNDkwYi04YjZiLWM1YmZhOWQxMzM2YQ==",
        "profileVersionId": "67aa047c-a251-4d77-b626-68e00a8c9457",
        "name": "Ballpark Analytics Sell Sheet",
        "type": "File",
        "format": "PDF",
        "description": null,
        "parentFolderId": "dfZDljNjYwZmItYWQyZC00YjgyLWFkMjYtOGEwMDI2MTc5NTE3,PT0=,RXh0ZXJuYWw=",
        "contentProfileId": "374df864-f9d2-4b27-b7ed-682e10e39088",
        "sourceBlobId": "d4acb093-764f-4d5a-bc74-6833084868b6",
        "sourceContainerName": "tstrader",
        "contentProfileName": "Enterprise Sales - East",
        "path": [
            {
                "id": "dfNDVjOGYzYzItM2ZjZS00OTJlLThlOGMtN2Q2NzcyNTE2OWFj,PT0=,Q1BH",
                "name": "CPG"
            },
            {
                "id": "lf5bfcd5e9-62da-490b-8b6b-c5bfa9d1336a",
                "name": "Ballpark Analytics Sell Sheet"
            }
        ],
        "thumbnailId": "tef8785a9-2933-4320-96ea-f31693cead75",
        "thumbnailUrl": "https://newdownload.seismic.com/api/download/v1/blob?t=tstrader&c=tstrader&id=tef8785a9-2933-4320-96ea-f31693cead75&et=20210822164011&sig=Uf1d1B9v5e8seUaIg7kUnj7iiOHYBlBlvSXs1WV7El8%3D",
        "sourceBlobDownloadUrl": "https://newdownload.seismic.com/api/download/v1/blob?t=tstrader&c=tstrader&id=d4acb093-764f-4d5a-bc74-6833084868b6&et=20210822164011&sig=UJ3o1s5HeqcDM6xnJvzR2FIy3BDXzy09oUK4bJEo5zE%3D",
        "applicationUrls": [
            {
                "name": "DocCenter Universal Link",
                "url": "https://tstrader.seismic.com/Link/Content/DC6CFTgSb7lU29V8FZeJlvDQ"
            }
        ],
        "libraryContent": {
            "id": "815321e8-fb26-4d95-bd57-c15978996f0d",
            "versionId": "5bfcd5e9-62da-490b-8b6b-c5bfa9d1336a",
            "teamsiteId": "1"
        },
        "version": "1.0",
        "expiresAt": null,
        "properties": [
            {
                "name": "Asset Grouping",
                "id": "46a9a522-3e7d-405c-83c5-aee8746515c9",
                "values": [
                    "Collateral"
                ]
            }
        ],
        "deliveryOptions": [
            {
                "id": "2d4227a5-eebc-4532-8e03-cf6f4b24427e"
            }
        ],
        "iconUrl": "https://api.seismic.com/icon-host/v1/content-icons/icon?format=pdf",
        "modifiedAt": "2018-03-13T15:45:07.667Z",
        "size": 316753,
        "urlObjectUrl": null
    }
]

{
    "applicationUrls": [
      {
        "name": "Default",
        "url": "https://quake.seismic.com/share/wwrgbX1WDE6biuIQI3dTsAD"
      }
    ],
    "createdAt": "2015-10-25T16:43:01.733Z",
    "createdBy": {
      "id": "5b6c0c7b-9f5e-49b4-8b03-fe711d3eec9a"
    },
    "deliveryOptions": [
      {
        "id": "d8b1d28e-51e3-4b98-92d2-4e35841243ad"
      },
      {
        "id": "41598e97-da18-4b4e-8791-6ff48fe77daf"
      }
    ],
    "format": "DOCX",
    "id": "z2d02a4b-0e29-4ef7-9f69-d6ff02618db9",
    "isContextualContent": false,
    "modifiedAt": "2015-10-26T16:43:01.733Z",
    "modifiedBy": {
      "id": "5b6c0c7b-9f5e-49b4-8b03-fe711d3eec9a"
    },
    "name": "Sample Docx File",
    "parentFolderId": "b2d02a4b-0e29-4ef7-9f69-d6ff02618db7",
    "repository": "workspace",
    "resourceUrl": "https://api.seismic.com/integration/v1/workspace/files/6de00ac3-567d-4e0c-9b8a-e210237753b0",
    "size": 151712,
    "type": "file",
    "versionId": "cbb03059-04e4-4647-b583-827db5f5de78",
    "iconUrl": "https://api.seismic.com/icon-host/v1/content-icons/icon?format=docx"
}

Design

❗️
CSS Changes Not Supported
Future versions of the content picker will support CSS overrides. We have not yet locked down our class structure, so modify the CSS at your own risk.

Demo

The following demos are live code samples in Codepen, you can click the JS and HTML buttons to see and the underlying code.
To see it in action, go grab a token here and paste it in to the options.token in the code.