Build And Import Customized, Personalized Content Into Communities

If you want to read visually stunning, personalized communities with Lightning Bolt, then first we need to understand “What is Community Theming?”.

Theming brings about a transformation in the look and feel of a Salesforce Community. It helps to bring a much deeper level of customization. In fact, theming may offer a hierarchical problem, as it becomes complex by using dynamic components,  components written by other users for the App Exchange – as well as page level variations.

So, the Lightning platform is taken as a groundwork for theming –

Something which the user was familiar with. In fact, it is a Lightning component like any other. The best part lies in the fact that these themes can be packaged and delivered on the AppExchange. So, any other theme that is used by another community, can be downloaded and used by you.

Now, we will have in-depth understanding of Community Theming, Audience platform and importing content into Salesforce Community with CMS Connect.

1. What is Community Theming?

The primary layout of a Community theme remains a constant. There are single themes with one option or multiple themes with one set of customization. However, the second option is what is preferred by the developers, as it offers better options for them. Now let us take an example of “How to Create a Community Theme?”.

How to Create a Community Theme?

First, we navigate to Community Builder->Settings->Theme tab. Let us explore what we want to do, if we want to change the theme in the home page. For this, the base structure of the theme is a Lightning component.

In the coding part, we make use of an interface named as ForceCommunity: theme layout that can be used in a theme. These Lightning components can be dragged and dropped in a place that is termed as Region.

This region is also a place where other developers can put their customized components. These regions are injected as part of the code. These customized components allow you to create reusable themes. This is where the theme layout comes into play.

These themes usually consist of a template – that constitute of a body and a sidebar. This is a constant – as you use it in different pages. However, the content keeps on changing from page to page.

The theme also comes with a theme API. It has a CSS file and a Design file. It is in this design file that enables the developer to understand the properties that need to be changed here for a specific Lightning component.

The users will be able to use drop downs and check boxes here. We need to speak here about the components properties – to be displayed in the theme settings. However, all these have one thing in common – allowing people to customize with themes.

Now, we will draw your attention towards the concept of dynamic theming. Here we will introduce you to the concept of audience platform.

2. What is Audience Platform?

Audience platform is a powerful tool in the hands of a developer. It allows the developers to create multiple branding sets and not just a single branding set – for a particular community.

So, each of these branding sets is used for targeted audience for a particular site. It also manages page and theme properties. The page properties include page access rights, page titles as well as SEO properties.

The latest is that of component level variation – change in the component attributes based on the targeted audience.

The audience platform has the following parameters:

Geolocation

Geolocation is about providing a theme for a localized theme.

User Profile

This is the licenses and the user authentication. 

Domain

This is about custom domains for the community – based on target audience.

User Object

The entire experience can be changed based on a field in the user object.

We have already spoken about multiple Branding Sets for various targeted audiences.  “How to create multiple branding sets?”.

2.1 How to Create Multiple Branding Sets?

We click on Branding Properties->Manage Branding Sets to create multiple branding sets. These branding sets can be used for various sub brands – falling under the primary brand for a different set of target audiences.

In the assign audience section, you need to assign different domains that will ensure different experiences for same community but with different domain sets.

3. Importing Content with CMS Connect.

There is an option to import content with CMS (Content Management System) Connect into Salesforce Communities. You can get content in the form of header and footer of your website. This will retain the branding and the look and feel of the website. It saves development time and cost to a considerable extent and is an easier way of doing things.

There are two types of CMS Connects:

• CMS Connect HTML
• CMS Connect JSON

CMS Connect HTML can be used for bringing existing web content into Communities. Since content is sent using URL, so any this can be brought real-time into communities.

The architecture remains generic here, not dependent on any of the providers. It is also possible to bring personalized content from Adobe Experience Manager(AEM). Client context is what is exchanged between Salesforce and AEM. Then exchequer call is made to get the content.

CMS Connect JSON brings external content through JSON API. However, the type of content that is brought is articles, blogs and news etc.  In CMS settings we provide with the information on the public CMS server. Prebuilt layouts are used for communities. This is what provides best-in-class capabilities for building the User Interface. ‘

How to use CMS for a Community ?

As I have explained earlier that CMS Connect will be used to render the same look and feel of the client but for the Salesforce Community.

We all know that there are headers, footers as well as banners for any website.

Let us find out what are some of the simple steps to be followed for using the CMS Connect HTML product.

These are the steps:

Setting Up of CMS Connect  HTML

• • In the Community workspace, a new CMS Connect section is added. This is for managing the CMS connections.

• • Next, you need to create a new connection on the concerned website say with Adobe.

• • You need to choose other as the CMS source if any other provider not mentioned in the list.

• • The host name of the CMS provider is mentioned in the server URL. Here only https servers are supported for security reasons.

• • The route path will have the directory name where the CMS Server components are stored.

• • External Javascript and stylesheets an also be provided here for HTML components. All this is done in the CSS URLs by adding CSS. It can be noted here that this can be used with LockerService for security reasons. The script URL is provided here.  

• It is also possible to offer localization of the website hereby mapping the Salesforce language with the CMS language.

Read Also: Salesforce Lightning Communities

Branding and Personalization of the Community

We need to go to the Community Builder for the branding and personalization effect to the Community. Make a note of the following:

• • There are three areas on the Community template page where the CMS Connect HTML can be used. These are the header, footer, and the Lightning component.  

• • Go to the Community Builder settings and choose the CMS Connect node and then select the CMS source. A header and footer path is also provided. This way the content is displayed as the header and footer of the Community.

• • Moreover, the load order optimization can also be used for loading say the header and footer sections.

• • There is a component panel from where the CMS Connect can be dragged and dropped in the chosen content area.

• It is possible to bring content from any client site – dynamic and real-time. Here CMS Source is selected and the path for that HTML is given. And here you have the banner that was existing in a part of the website – now displayed in your Community.

Blogs or article contents can be brought into Communities. The reason behind is higher engagement and sharing the content. We will use the CMS Connect JSON connector – for this purpose for bringing this content into communities. Let us find more details on CMS Connect JSON.

CMS Connect JSON

There are 2 types of layouts in CMS Connect JSON Connector – content items and lists. The content list supports pagination support and multiple blogs for the items part the read more option of a single blog can be used as an example. We also have an option for SEO friendly navigation with the list.

Let us find further steps for:

Setting up a CMS Connect JSON Connector:

Following are the steps:

• • Go to CMS Connect in Community workspace and define a connection.

• • Inside the connection, the CMS source is selected say WordPress

• • In the JSON section, add JSON and provide a name.

• • The type of content is chosen as a content list or content item.

• The JSON path is provided.

Next, we navigate to the builder, where

• CMS Connect (JSON) in the component section can be dragged and dropped on any part of the Community.

You also need to :

• • Select the CMS Source, JSON Content name as well as JSON expression for the starting node of the content list.

• The Lightning component attributes must be mapped with the JSON fields of the payload. Just go to the JSON Viewer and check the code to get the mapped title data.

Summary

Theming can transform the look and feel of a Salesforce Community. The best part about themes is that they can be downloaded and used by other Communities.

Audience platform is a tool in the hands of a developer where multiple branding sets can be used -each for a different targeted audience. Another tool is that of CMS Connect that can be used for importing content into a Community from a client website. JSON and HTML are two types of CMS Connect that can be used for this purpose.