How to create persona-based experiences in API Community Manager

In part one of this blog series, we covered how there is more than one persona involved in consuming an API and we defined the hyper-personalized experiences we would create in our developer portal. In this follow-up post, we’ll look at how we can configure persona-based experiences in three parts in Anypoint Platform’s API Community Manager.

1. Implement a way to identify CommunityApi names.
2. Create a page variation.
3. Edit audience assignments for specific page components on the new page variation.

#1 Create a tab in Salesforce to review the records available

To filter the page variation you’ll need to identify the CommunityApi name. To get started you’ll create a tab in Salesforce to review CommunityApi records available. Below are the steps to do so:

1. Go to setup in Salesforce where your API community manager package is.

2. In the quick find search box, type and select the “Tabs” option under user Interface.

3. Select the “New” button.

4. In the object drop-down, select “CommunityApi.”

5. Select any tab style you prefer.

6. Select “Next” twice, then select “Save.”

7. Open the app launcher and search for “CommunityApis.”

8. Change the list view to all.

9. You are now able to see the CommunityApi Name of all APIs in your Community.

10. Capture the full name of each API that you want to specify within the user type page variation.

#2 Create a page variation for specific APIs 

To achieve my user story, we’ll need to ensure that API buyers and API makers are redirected to a page variation where only specific components are visible to them. Remember that the regular members and guests will see the regular API detail page for these APIs.

1. Go to the community builder within the ACM administrator indow.
2. Navigate to the API detail page.
   
   
3. When the API detail page has opened, select the cog next to the API detail heading and select “Page variations.”
4. Select “New page variation.” 
5. Select a layout based on your preference.
6. Name the page “User Type Specific Views.”
7. Select the cog next to the API detail heading and select “Page variations.”
8. Select the arrow next to the user type specific views page variation then select “Assign.”
9. Select “New audience.”
10. Input the following details:
    1. Audience name is “User Type Specific Views.”
    2. “Audience matches when” is set to “All Conditions Are Met.”
    3. Criteria type is record > CommunityApi > CommunityApi name.
    4. Operator is set to “Equals.”
    5. Value is [Any of the CommunityApi Names you noted down in Step 12 of Part 1].
    6. Select “Add condition.”
    7. Criteria type is set to “Profile.”
    8. Operator is set to “Equals.”
    9. Value is set to “API maker” and “API buyer.”
    10. Your configuration should look the same as the photo below.
        
        
11. Select “Save & assign.”
12. Publish your page.

#3 Assign user types to specific component visibility

To achieve my user story, I want to make sure that only the API maker user type can see the spec downloader component and API console component. The API buyer user type will not see these.

1. Copy the layout of your existing page. 

For this example, I will place the API header component at the top, followed by the spec downloader component, and the tab component with the nested API documentation viewer and API console. I will then add a second tab component with the nested API documentation viewer and tab called pricing (the Sales call-to-action). 

Example below:

2. Open the pricing tab on the bottom tab component.
3. Drag an HTML editor lightning component into the tab space. On the tab, select “Edit markup” in the component configuration window.
4. Copy and paste the following example HTML code into the window. Remember, this is simply an example, and you could do something more advanced such as redirect to a contact form:

<button href=”sales@example.com”>Contact Sales</button>

5. Your page should now look like this:
   
6. Select the “Spec downloader.”
7. On the configuration window select the arrow and choose “Assign.”
   
8. Select “New audience.”
9. Input the following details:
   1. Audience name is set to “API maker.”
   2. “Audience matches when is set “to “All conditions are met.”
   3. Criteria type is set to “Profile.”
   4. Operator is set to “Equals.”
   5. Value is set to “API buyer.”
10. Select “Save and assign.”
11. Select the tab component with nested API documentation viewer.
12. On the configuration window, select the arrow and select “Assign.”
13. Select “New audience.”
14. Input the following details:
    1. Audience name is set to “API buyer.”
    2. “Audience matches when” is set to “All conditions are met.”
    3. Criteria type is set to “Profile.”
    4. Operator is set to “Equals.”
    5. Value is set to “API buyer.”
15. Select “Save & assign.”
16. Select the tab component with nested API documentation viewer and API console.
17. On the configuration window, select the arrow and choose “Assign.”
18. Select the API maker audience we created in the previous steps.
19. Select “Assign,” then “Done,” and then publish your Page
20. When testing, make sure to refresh your browser cache (Cmd/Ctrl + Shift + R on Google Chrome) to ensure that you can see the changes you’ve made. Alternatively, you can do your testing in a private browser.
21. Your setup is complete!

This is just one way to take advantage of page variations and component audience targeting for hyper-personalized user experiences. I hope this has given you the foundation to come up with other combinations of page variations and components to meet your user story needs!

To learn more about customizing your API community, consider watching our Customizing API Community Manager video series.