How To Construct Pop-Up Modals In Salesforce Experience Cloud?

Pop-ups have such a bad reputation on the internet that we ignore the benefits of pop-ups to alert the user with some important information. Like any good feature in a system, the abuse or misuse of pop-ups by ads and spam has led to the need for pop-up blockers which the end user now has to manage. Needless to say, the security risks associated with pop-ups. But what if you really wanted to grab your user’s attention for a few seconds to show some important information or make an important announcement? These are valid use cases for a Salesforce Experience Cloud customer or partner community. Let us look at how Pop-Up Modals in Salesforce allows you to implement this functionality securely.

The attention-grabbing messaging on the site is called a Modal. Modals are used to display content in a layer above the existing page. Modal doesn’t create an external pop-up window but creates an overlay on top of existing content. They will have a button to close the box so that your user can dismiss it once they have seen the announcement. Let’s look at how to construct such a modal for a Salesforce Experience Cloud site.

Basic Modal

A simple modal blueprint is provided by Salesforce on the Salesforce Lightning Design System site. As you can see, the blueprint uses slds-modal and slds-fade-in-open classes. You can copy and paste the given code in the template tag of an LWC. Add the component on the homepage of your experience cloud site and your modal popup is ready.

Configurable Modal

The simple modal as described above will show the popup modal to all users. Rather than showing the same modal content for all community users, you can make it configurable by controlling when to show it, whom to show it to and what content to show in the pop-up. This can be achieved by configuring the various required criteria in a custom metadata. Custom metadata rows resemble custom object rows in structure and can be used to define configurations for such business rules. A configurable modal based on custom metadata can have multiple different pop-up modals configured to show to different users, at different times and can also show different content in the modal based on configuration.

Limiting # of Times the Modal Shows Up

The above-configured modal shows up on the homepage for the targeted users at the specified time. But it will show up every time the user comes to the home page. If your community users are frequent and active visitors, showing the pop-up modal on the homepage all the time can be annoying to them. In such a case, you can limit the number of times the modal shows up by using the sessionStorage property. sessionStorage property accesses a session Storage object for the current origin. Since the session lasts as long as the tab or the browser is open the property value is retained in the tab until session expiry or tab closure. A key/value can be stored in sessionStorage to identify that the modal has been shown or to store the number of times the modal is shown. You can then control how many times to show the modal to a user in a given session.

While this is a great feature, always remember to use it with the user experience in mind. Salesforce gives you the ability to control the timing and frequency of the modals. Use it to enhance the user experience which goes a long way to better adoption of your solution