There are three sample applications provided in this repository that illustrate how to open the Acoustic Content (formerly Watson Content Hub) Palette from client JavaScript.
The first sample application contained within index-inline.html uses jQuery to login, open the Palette and choose an Asset. The second sample application contained within index.html extends this to also show how to customize which Assets are displayed.
These first two samples are built in JavaScript and HTML, and illustrate:
- Authenticating to Acoustic Content
- Launching the Acoustic Content Picker to view available assets.
- Returning the JSON definition of an asset from Acoustic Content
The third sample application contained within index-delivery-content.html combines three new modes of operation:
- Launching the Acoustic Content Palette to select Content
- Using the Acoustic Content Palette in ‘Delivery mode’ that doesn’t require authentication and only returns only published Assets and Content
- Using the Acoustic Content Palette in ‘Multi-select mode’ that allows more than one item to be selected at a time
The initial set of APIs provided by Acoustic Content are for Authoring services, which require authentication and are not optimized for retrieval by applications in production.
To call authenticated APIs, you need to first call the login service with the desired user name and password. This will return an authentication token cookie for use on subsequent calls. The browser will include the authentication token cookie in subsequent requests.
The Acoustic Content Palette can also be launched to use the Delivery APIs that do not require authentication simply by adding a query parameter that references your API URL. Your API URL can be obtained from from the ‘Hub information’ dialog in the Content UI. For example: https://content-us.goacoustic.com/content-picker/picker.html?apiUrl=https://content-us-2.content-cms.com/api/7b68b4ce-fb1c-4f33-bc5c-8b7881662107
By using the Palette in 'Delivery mode' you will benefit from using anonymous services that are also optimized for caching and performance. Note You will only see published Assets and Content returned.
For more information about using the Palette in ‘Delivery mode’, see https://developer.goacoustic.com/acoustic-content/docs/using-the-acoustic-content-palette-in-delivery-mode
You can now select more than one Content Item or Asset at a time by launching the Palette in ‘Multi-select' mode. Enabling multi-select mode is as simple as adding a ‘multiSelect=true’ query parameter when launching the Palette. For example: https://content-us.goacoustic.com/content-picker/picker.html?multiselect=true
Note Using 'Multiselect mode' returns a JSON array instead of a single JSON object.
| Name | Example | Description |
|---|---|---|
| carbon | true | Use latest look and feel while launching the palette. |
| source | wch | Parameter indicates the media backend that should be used to query asset details. For e.g. source=wch,shutterstock means query from both Acoustic Content (formally WCH) and Shutterstock. |
| multiselect | true | Enable multiple assets to be selected at the same time. |
| multiSelectLimit | 3 | Maximum number of elements that can be selected when multiselect=true. |
| isManaged | true | Parameter defines if managed assets (aka UI assets such as images, videos and files), unmanaged assets (aka web assets, such as HTML and JS files) or both needs to be displayed in the palette. Possible values are true, false or both. |
| assetUpload | true | Parameter determines whether the drag and drop asset upload box should be to displayed inside the palette. |
| downloadAsset | true | Parameter controls whether 3rd Party assets should be allowed to be downloaded into Content in the palette. |
| fq | assetType:video | The solr search filter query to use to display items in the palette. There can be many of these. See below for some examples. |
Accessing the unpublished Assets through the resource ID identifies a specific asset binary. This access point is provided by the authoring asset service API. Note: You must be authenticated to use the Authoring asset service APIs.
https://{tenant-host}/api/{tenant-id}/authoring/v1/resources/{resource-id}
https://content-us-1.content-cms.com/api/1234c-4567e-890a-000b/authoring/v1/resources/3b09333ceffee0001
The published versions of your Assets can be accessed from your delivery system through the following two entry points:
- Asset path
- Resource ID
Accessing the published asset through the asset path addresses your published resource as public static resource. The published asset is directly retrieved from the replicated storage infrastructure that is provided by Akamai. The published Assets get cached for one day on Akamai. This entry point provides the best performance for accessing your published assets.
https://{tenant-host}/{tenant-id}/{asset-path}
https://content-us-1.content-cms.com/1234c-4567e-890a-000b/delivery/v1/resources/3b09333ceffee0001
Accessing the published assets through the resource ID identifies a specific asset binary. This access point is provided by the delivery resource service API. You can find the corresponding API documentation in the Acoustic Content API documentation.
https://{tenant-host}/api/{tenant-id}/delivery/v1/resources/{resource-id}
https://content-us-1.content-cms.com/api/1234c-4567e-890a-000b/delivery/v1/resources/3b09333ceffee0001
Clone or download the repository folder into any folder on your workstation. (Use Clone or Download button on the Github repository home page).
This sample uses hard-coded user name, password, and baseTenantUrl values set in the pickerConsumer.js and pickerConsumerInline.js files in the public directory. Update the name and password values in those files. To avoid putting credentials in the source you could change the application to provide browser inputs for username and password.
The baseTenantUrl variables in pickerConsumer.js and pickerConsumerInline.js must also be set for your tenant. In the Acoustic Content user interface, click the "i" information icon at the top left of the screen next to where it says Acoustic Content. The pop-up window shows your host and tenant ID. Use this information to update the value of baseTenantUrl. For example it might look something like this:
const baseTenantUrl = "https://content-eu-4.content-cms.com/api/12345678-9abc-def0-1234-56789abcdef0";
For the 'Delivery mode' sample, you need to replace the {Host} and {Tenant ID} values in pickerConsumerDeliveryContent.js
You can do this right from the file system in Firefox, Chrome, or Safari browsers. Alternatively you can make the files available on any web server and open the html files in a browser using your web server URL.
The first sample (index.html) allows you to choose what type of assets to show (All / Images / Videos / Files) and then opens the Picker in a dialog.
The second sample (index-inline.html) opens the picker in the same window and shows the expanded layout.
In both cases choose an image by clicking on the 'Click to add content' button as shown in screenshot and the JSON for that asset is returned to the parent page.
The third sample (index-delivery-content.html) allows you to choose multiple published Content Items that are then displayed in a Bootstrap Carousel.
If you have updated the user credentials as described in the installation instructions then your assets are displayed.
Hover over an asset and an action bar appears allowing you to add your asset to the page:
When you choose an asset, the information about the asset is returned in JSON format. The delivery URL to that asset is also displayed. This URL is constructed using the x-base-tenant-url for the user and the path to the asset defined in the JSON.
A dropdown is shown which contains some options for customizing which items are displayed in the Picker.
All Assets: https://content-eu.goacoustic.com/content-picker/picker.html?*fq=classification:asset* or https://content-us.goacoustic.com/content-picker/picker.html?*fq=classification:asset*
Images: https://content-eu.goacoustic.com/content-picker/picker.html?fq=classification:asset&*fq=assetType:image* or https://content-us.goacoustic.com/content-picker/picker.html?fq=classification:asset&*fq=assetType:image*
Videos: https://content-eu.goacoustic.com/content-picker/picker.html?fq=classification:asset&*fq=assetType:video* or https://content-us.goacoustic.com/content-picker/picker.html?fq=classification:asset&*fq=assetType:video*
Files: https://content-eu.goacoustic.com/content-picker/picker.html?fq=classification:asset&*fq=assetType:file* or https://content-us.goacoustic.com/content-picker/picker.html?fq=classification:asset&*fq=assetType:file*
Images tagged with 'nature': https://content-eu.goacoustic.com/content-picker/picker.html?fq=classification:asset&*fq=assetType:image&fq=tags:(nature)* or https://content-us.goacoustic.com/content-picker/picker.html?fq=classification:asset&*fq=assetType:image&fq=tags:(nature)*
Images with media-type: https://content-eu.goacoustic.com/content-picker/picker.html?fq=classification:asset&*fq=assetType:image&fq=mediaType:(image/jpeg)* or https://content-us.goacoustic.com/content-picker/picker.html?fq=classification:asset&*fq=assetType:image&fq=mediaType:(image/jpeg)*
Choose an option and click Launch Picker button. The Picker will open in a popup dialog. If you have updated the user credentials as described in the installation instructions then your assets are displayed.
When you choose an asset, the information about the asset is returned in JSON format. The delivery URL to that asset is also displayed. This URL is constructed using the x-base-tenant-url for the user and the path to the asset defined in the JSON.
Launch the Palette in 'Delivery mode' and select multiple Content Items. The JSON array is parsed and a Bootstrap Carousel is created to render the selected Content Items.
Acoustic Content developer documentation: https://developer.goacoustic.com/acoustic-content/docs
Acoustic Content API reference documentation: https://developer.goacoustic.com/acoustic-content/reference
Acoustic Content Samples Gallery: https://content-samples.goacoustic.com/