Integrate Content palette

Overview

Skill Level: Beginner

You can now use the Acoustic Content Palette in delivery mode. By using the Palette in delivery mode, you can now select content and assets without authentication. The palette in the delivery mode returns only the published assets and content. This tutorial shows you how to launch the Acoustic Content Palette in the delivery mode in your application.

Note:

Check out the Content Palette sample provided by Acoustic Content. Preview the sample.

Prerequisites

You must have an Acoustic Content tenant from which you want to select Content or Assets. If you do not already have an Acoustic Content tenant, you can sign up for free here: Acoustic Content

Step-by-step

1. Determine the API URL of your tenant

The client must specify the API URL when the Palette is launched. The tenant API URL is added as the apiUrl query parameter. For example:

https://content-eu.goacoustic.com/content-picker/picker.html**?apiUrl=https://content-XX-N.content-cms.com/api/7b68b4ce-fb1c-4f33-bc5c-8b7881662107**
or
https://content-us.goacoustic.com/content-picker/picker.html**?apiUrl=https://content-XX-N.content-cms.com/api/7b68b4ce-fb1c-4f33-bc5c-8b7881662107**

Obtain the API URL from the Hub information dialog in the Acoustic Content UI > About > Hub information.

2. Handling CORS

  • The Delivery Palette is only accessible through the Authoring host [https://content-eu.goacoustic.com/content-picker/picker.html .](https://content-eu.goacoustic.com/content-picker/picker.html ) or [https://content-us.goacoustic.com/content-picker/picker.html .](https://content-us.goacoustic.com/content-picker/picker.html )

  • Therefore, API requests are issued from the content-XX.goacoustic.com Authoring host but are made to the content-XX-N.content-cms.com Delivery host. Requests to the content-XX-N.content-cms.com Delivery host from other domains are blocked by default and you encounter a CORS exception. CORS or Cross-Origin Resource Sharing is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.

  • Therefore, it is necessary to add the https://content-eu.goacoustic.com or https://content-us.goacoustic.com Authoring host as a trusted domain for your tenant.

3. Access the Delivery Palette

Now that you know your API URL and enabled CORS for your tenant you can access the Acoustic Content Palette in delivery mode at the URL determined in step one:

https://content-eu.goacoustic.com/content-picker/picker.html**?apiUrl=https://content-XX-N.content-cms.com/api/7b68b4ce-fb1c-4f33-bc5c-8b7881662107**
or
https://content-us.goacoustic.com/content-picker/picker.html**?apiUrl=https://content-XX-N.content-cms.com/api/7b68b4ce-fb1c-4f33-bc5c-8b7881662107**

You can add further query parameters to launch the Palette in other modes too. For example:

1. Launch the Delivery Palette for Content Items only:

https://content-eu.goacoustic.com/content-picker/picker.html?apiUrl=https://content-XX-N.content-cms.com/api/7b68b4ce-fb1c-4f33-bc5c-8b7881662107&fq=classification:content

2. Launch the Delivery Palette for Assets only:

https://content-eu.goacoustic.com/content-picker/picker.html?apiUrl=https://content-XX-N.content-cms.com/api/7b68b4ce-fb1c-4f33-bc5c-8b7881662107&fq=classification:asset

3. Launch the Delivery Palette for Image Assets only:

https://content-eu.goacoustic.com/content-picker/picker.html?apiUrl=https://content-XX-N.content-cms.com/api/7b68b4ce-fb1c-4f33-bc5c-8b7881662107&fq=classification:asset&fq=assetType:image

4. Launch the Delivery Palette for Image Assets tagged with €˜nature€™ only:

https://content-eu.goacoustic.com/content-picker/picker.html?apiUrl=https://content-XX-N.content-cms.com/api/7b68b4ce-fb1c-4f33-bc5c-8b7881662107&fq=classification:asset&fq=assetType:image&fq=tags:nature

4. Accessing the Acoustic Content Palette sample page for your tenant

You can access the Delivery Palette through the Sample page: https://content-samples.goacoustic.com/sample-pages/sample-picker/index-delivery-content.html

Note

The sample page also includes Authoring launch modes that require you to be logged in to Acoustic Content and have the Acoustic Content cookies the delivery options are unauthenticated.

Expected outcome

You can now access all of the Content and Assets from your Acoustic Content tenant using the Acoustic Content Palette.

Updated 13 days ago


Integrate Content palette


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.