Implement personalized widgets

You can personalize any Sitefinity CMS MVC widget, so that you create different versions of the widget for different audience segments. To personalize a widget, simply make sure the widget’s controller implements the IPersonalizable interface and the Telerik.Sitefinity.Personalization library is added. This is just markup interface methods for you to implement.

Once you create a personalized version of a widget, you actually duplicate the widget, so both versions have exactly the same properties. The original widget has its IsPersonalized property set to true. The duplicated widget has the PersonalizationMasterId linking property set to the original widget and the PersonalizationSegmentId linking property set to the Id of the segment, for which you create the personalized version.that does not provide any

Throughout this article, you can refer to a code example of a personalized Card widget to get an understanding of how to personalize any other widget. For the full sample, see the GitHub repository.

When a page with personalized widgets on it is rendering, a wrapper control is included, so that it replaces the original control that takes care for rendering the proper widget version. The wrapper control is of PersonalizedViewWrapper type. All information needed to load the proper widget version is set to this wrapper control.

In addition, during page rendering, the PersonalizationManager JavaScript is included to the page. After the page is loaded, the manager takes care of loading the markup for each personalized widget and replacing the control wrapper with the proper markup. The markup for all the controls is loaded at once with a single service call. 

Once the personalization manager loads all the markup for the controls on the client, the onPersonalizedContentLoaded event is fired. The overall response of the service call is set to the arguments and is available in the event handlers. In the sample, provided above, you can see how to subscribe to the event.

The following example demonstrates how to enable personalization for List widgets, so that different versions of the widget are displayed to specific audience segments. You do this by adding the IPersonalizable interface to the List widget controller. Since the content of the personalized widget is loaded after a web service call, if you widget also has JavaScript code, you must execute it after the personalized content is loaded. You do this by placing the custom JavaScript code in the window.personalizationManager.addPersonalizedContentLoaded event.

To personalize the List widget, add the IPersonalizable interface: public class CustomController: Controller, IPersonalizable.

To execute the JavaScript code:

If the visitors browsing the page are associated with certain audience segments and in case the page has personalized versions of widgets created for these specific segments, the PersonalizedWidgetRenderEvent is fired. The event is fired for each of these widget with the following arguments:

• Segment name
• Widget ID
• Page URL
• Origin from where the event is fired

The call to the PersonalizationService that renders the markup of the personalized widgets is cached by the segment definition, in which the current website visitor is associated to.

NOTE: The visitor may be associated to more than one segment, so the markup may be cached by the combination of these segments.

In case there are other visitors who are associated with the same segment(s), the markup is returned from the cache. 

1. Personalized widgets are rendered on the client side, so they cannot register any scripts on the server side. This means that if your widget is registering any scripts on the server side, the scripts will not be loaded after the widget is marked as personalized.
2. In case the page has any JavaScript that manipulates the page markup on document ready, the JavaScripts may stop functioning. The reason is that personalized versions of the widgets are loaded on the client side and as a result the JavaScript scripts may stop working correctly. The scripts need to be modified, so that they wait for the client-side events of the personalization manager to be fired first.