[AEM Assets]{class="badge positive" title="Applies to AEM Assets)."}

Content Advisor installation and properties content-advisor-installation-properties

Content Advisor is also available for integration with non-Adobe (third-party) applications, extending intelligent asset discovery beyond Adobe applications. The same rich feature set, including AI-powered search, context-aware recommendations, campaign brief–based discovery, access to Dynamic Media renditions, Content Fragment discovery, filters, and asset metadata, is supported in third-party integrations.

Prerequisites prereqs

You must ensure the following communication methods:

Use the above prerequisites if you require the IMS authentication workflow of Content Advisor. Alternatively, if you are already authenticated with the IMS workflow, you can add the IMS information instead.

Installation content-advisor-installation

Content Advisor is available via both ESM CDN (For example, esm.sh/skypack) and UMD version.

In browsers using UMD version (recommended):

<script src="https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/assets-selectors.js"></script>

<script>
  const { renderAssetSelector } = PureJSSelectors;
</script>

In browsers with import maps support using ESM CDN version:

<script type="module">
  import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'
</script>

In Deno/Webpack Module Federation using ESM CDN version:

import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'

Content Advisor properties content-advisor-propertiess

You can use the Content Advisor properties to customize the way the Content Advisor is rendered. The following table lists the properties that you can use to customize and use Content Advisor.

handleSelection=(assets: Asset[])=> {…}

handleAssetSelection=(assets: Asset[])=> {…}

ImsAuthProps ims-auth-props

The ImsAuthProps properties define the authentication information and flow that the Content Advisor uses to obtain an imsToken. By setting these properties, you can control how the authentication flow should behave and register listeners for various authentication events.

ImsAuthService ims-auth-service

ImsAuthService class handles the authentication flow for the Content Advisor. It is responsible for obtaining an imsToken from the Adobe IMS authentication service. The imsToken is used to authenticate the user and authorize access to the Adobe Experience Manager as a Cloud Service Assets repository. ImsAuthService uses the ImsAuthProps properties to control the authentication flow and register listeners for various authentication events. You can use the convenient registerAssetsSelectorsAuthService function to register the ImsAuthService instance with the Content Advisor. The following functions are available on the ImsAuthService class. However, if you are using the registerAssetsSelectorsAuthService function, you do not need to call these functions directly.

contentFragmentSelectorProps content-fragment-selector-properties

contentFragmentSelectorProps allows you to configure how Content Fragments are accessed and displayed within the Content Advisor. By enabling the content-fragments feature in the featureSet and providing the required configuration, you can seamlessly integrate Content Fragment selection alongside assets. This enables users to browse, search, and select Content Fragments within the same unified interface, ensuring a consistent content selection experience across assets and structured content.

const assetSelectorProps = {
     featureSet: [
       'upload',            /* Include upload or other featureSet values to ensure no missing functionality */
       'content-fragments', /* Content Fragments pill will be shown */
     ],
     contentFragmentSelectorProps: {
       /* Configures the Content Fragments Pill experience */
       /* ...props @aem-sites/content-fragment-selector MFE supports */
    }
}

<AssetSelector {...assetSelectorProps} />

In contentFragmentSelectorProps, you can mention any of the properties available at Content Fragment Selector properties.

For information on how to integrate Content Advisor with Angular, React, and JavaScript applications, refer to Content Advisor integration examples.