Universal Content Picker

The Seismic Content Picker control allows developers to add support for choosing files and folders from Workspace or DocCenter from any web application. The picker handles all communication with the Seismic APIs and returns information about the files selected to the containing application via a JavaScript callback.

799799

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://smc-prod-cdn.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://smc-prod-cdn.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("[email protected]", {
    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

799799

❗️

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.