cs-icon.svg

Audience Plugin Usage Guide

The Audience app allows you to customize the target viewers of your Custom and JSON Rich Text Editor field content.

Consider a scenario where you have to display different content on your university website for faculty members and students. Creating multiple entries with additional content for various audiences can be time-consuming.

In this case, through the Audience app, you can add the audience data to a content type and this value can be referred to in multiple content types to customize the audience who can view your content. This makes your content audience-centric and improves the reach of your content.

Prerequisites

Let's follow this step-by-step guide to install and configure the Audience app in your stack.

Steps for Execution

  1. Create a Content Type to Render your Audience
  2. Install and Configure the Audience app in Contentstack Marketplace
  3. Use the Audience app within your Stack Entry
  1. Create a Content Type to Render your Audience

    Let's create two content types named University and Institution for this use case.

    The University content type will contain the Faculty Members and Students information that can be referenced within the Custom field and JSON Rich Text Editor field in multiple content types to customize the audiences who can view your content. The content type from which you render your audience content must match the following structure:

    1-Audience-University-Content-Type

    Note: Your audience data content type must have a Title and Group field set to type multiple containing a Title field with the UID as title.

    Create an entry for this content type as given below:

    2-Audience-University-Entry

    You have created the content type with an entry from which you are rendering the target audience.

  2. Install and Configure the Audience app in Contentstack Marketplace

    Follow the steps given below to install the Audience app in Contentstack.

    1. Log in to your Contentstack account.
    2. From the left-hand side primary navigation, click the Marketplace icon to go to the Marketplace.Marketplace-Icon
    3. Click Apps from the left panel.
    4. Within the Marketplace, you can see all the available apps. Hover over the Audience app and click Install.3-Audience-App
    5. In the popup window, select the stack where you want to install the Audience app and click the Install button.4-Audience-App-Install
    6. On the Configuration screen, enter the following details:
      1. Enter the Content Type UID from which the target audience will be rendered, Field UID, and Group Title.
      2. New installations of the Audience App will not provide an option to enable Legacy Mode. However, if you are on a historical version of the application, you will see Legacy Mode enabled. When Legacy Mode is disabled, the audience app can support elements like lists, tables, and images.

        Warning: Before disabling Legacy Mode, we highly encourage you to ensure that your existing content is compatible with the new format.

      5-Audience-Configuration
    7. Click the Save button.
    8. On the UI Locations tab, you can see the predefined app locations. You can use the toggle button corresponding to each UI location to enable or disable it based on your requirements.6-Audience-UI-Locations

      Additional Resource: For more information on UI locations, please refer to the Installed Apps guide.

    9. Click Open Stack to start using the plugin within your stack.
  3. Use the Audience app within your Stack Entry

    To use the Audience app within an entry of your stack, follow the steps given below:

    1. Go to your stack and click the Content Models icon in the left navigation panel, and click the + New Content Type button.
    2. Create a content type, named Institution, by adding relevant details as displayed below:7-Audience-Institution-Content-Type

    There are two ways to use the Audience app in your entry:

    1. Custom Field
    2. JSON Rich Text Editor Field

    Steps to use the Audience App Using a Custom field

    1. In the Content Type Builder page, add a Custom field in your content type by clicking the Insert a field link represented by a + sign.
    2. Under Select Extension/App, select Audience, and click the Proceed button.8-Audience-Custom-Field-Add-App

      Change the Display Name of the custom field to your choice, for example, Audience Custom Field. Optionally, you can add Help Text and Instruction Value for your custom field.

      This adds the Audience app in the custom field.

      9-Audience-Custom-Field-Added-App
    3. After adding the app in a custom field, click Save or Save and Close to save your changes.
    4. To use the Audience app, create an entry for this newly created content type. To do this, in the left navigation panel, navigate to the Entries page, click + New Entry to create a new entry for the above content type, and then click Proceed. You can see the Audience app’s custom field on your entry page as shown below:10-Audience-Custom-Field-Sample-Entry
    5. Click the Add Audiences button.11-Audience-Custom-Field-Add-Audiences
    6. In the Select Audience modal, select the target audience for your content (Faculty Members/Students/All) and click Add Selected.12-n-18-Audience-Select-Audience-Modal
    7. The audiences you added get referenced within your entry.13-Audience-Custom-Field-Audience-Added
    8. After adding the audience data, Save and Publish your entry.

    Steps to use the Audience App Using a JSON Rich Text Editor field

    1. In the Content Type Builder page, add a JSON Rich Text Editor field in your content type by clicking the Insert a field link represented by a + sign.
    2. Under Select JSON RTE Plugin(s), select Audience, and then click Add Plugin(s).14-Audience-JSONRTE-Field-Add-App

      This adds Audience in the JSON Rich Text Editor field.

      15-Audience-JSONRTE-Field-Added-App
    3. After adding the app in a JSON Rich Text Editor field, click Save or Save and Close to save your changes.
    4. To use the Audience app as a JSON RTE plugin, create an entry for the content type. You will see the Audience app icon inside the JSON RTE field in your entry page as shown below:16-Audience-JSONRTE-Field-Sample-Entry
    5. Within the JSON Rich Text Editor, add your content and click the Audience app icon to customize which target audience can view the specific content.17-Audience-JSONRTE-Field-Click-App-Icon
    6. In the Select Audience modal, select the target audience for your content (Faculty Members/Students/All) and click Add Selected.12-n-18-Audience-Select-Audience-Modal

      Now, the content you add would be visible to the Faculty Members, Students, or both. You need not create separate entries to add different content. You can use the Audience app and customize your content as per your target audience.

      When Legacy Mode is enabled for existing users in Step 2, you will see the content in Inline format:

      18-Audience-JSONRTE-Field-Inline-Format

      If Legacy Mode is disabled or you are on a new version of the app (see Step 2), you will see the content in Block format and added support for lists, images and tables:

      19-Audience-JSONRTE-Field-Block-Format-With-Table-And-Image
    7. After adding the audience data, Save and Publish your entry.
Was this article helpful?
^