Acoustic Content configuration

This topic covers the steps required to set up Acoustic Content as a content management system for Acoustic Personalization.

📘

Note

Rendering of the personalized content returned by Acoustic Personalization is the responsibility of the channel. This topic provides some examples illustrating how the channels can implement content rendering. These examples are only suggestive and the actual rendering technique should be determined by the channel developer.

Set up Acoustic Content

Steps to initialize and configure Acoustic Content for usage with Acoustic Personalization.

You can pull in the content to be personalized either from a content management system, such as Acoustic Content (CH), or from any publicly-accessible online source. This topic describes the steps to initialize and configure the Acoustic Content for usage as a content management system with Acoustic Personalization by creating content type and content in CH. This topic does not cover personalization using CH content, but you can use this procedure to show default content on your channel.

Create a content type in Acoustic Content.

1. Create a taxonomy for classification: Select Content > New > Taxonomies.
2. Create image profiles: Select Content > New > Image profiles.
3. Create code: Select Content > New > Content types.
4. Save the information.
   This procedure creates one content type. You can select as many or less things, as you want in your content type.

Create content in Acoustic Content

1. Go to Content library > My content and assets > Compose and select the content type from the drop down.
2. Provide the information required for the content, for example, the details for taxonomy, image profiles and code.
3. Save the information.
   The newly created content is seen in the "All contents" section.

Using the content from Acoustic Content

1. Go to Content library > All content and assets.
2. Select the content you want to use. A dialog window appears.
3. In the dialog window, select the Item ID and copy it.
4. Next, open the HTML page in which you want to use the CH content. Add the below code in the header tag of the HTML page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js">
  </script>
  <script src="./wch-renderer.js"></script>
  <script type="text/javascript">
    new WCHRenderer({ baseTenantURL: 'https://cdn-personalization-us-1.goacoustic.com/api'}).renderAll();
  </script>

5. Include the file wch-renderer.js in the current directory. This file is available in the Content Hub sample code repository.
6. Go to the HTML tag in which you want to use the CH content and surround that tag with the following code.

<script type="text/x-handlebars-template" data-wch-content-id="<<ItemID>>">
  <div id="outlet" class="banner-agile" style="background-image: url(elements.image.url);"> 
  <Your HTML tag>

</div>
</script>

In this code snippet:

• Replace ITEMID with the value of the Item ID that you copied in Step 3.

Also, make any necessary changes to the CSS stylesheet, or alternatively, you can replace the "banner-agile" class in the code with the CSS class of the outer tag.

To verify, open the HTML page in a web browser. It shows the content rendered from Acoustic Content.

Connect to Acoustic Content

To connect your Acoustic Content with Acoustic Personalization, you must get the API URL.

📘

Important

Ensure that the API URL that you register in Acoustic Personalization is the same that is used in your channel to create or update the content.

To get API URL for Acoustic Content, complete the following steps:

1. Log in to Acoustic Content.
2. Click User > Hub Information.
3. Copy the API link from the Hub information.
4. Log in to Acoustic Personalization and go to Settings.
5. In the Settings menu, click Content management and then Register a new CMS.
6. Type the name for the new CMS. CMS name should not have these characters: ~ ` ! @ # $ %^ & * ( ) + = < > , . \ / | { } [ ]
7. Select the source CMS as Acoustic Content from the list.
8. Paste the API URL in the API URL field. The API URL must begin with HTTPS. 
9. Click Validate URL to verify a successful connection with Acoustic Content.