Angular
This section describes how to integrate user preferences functionality in Angular Applications.
**Preferences changes in @suprsend/web-sdk
version >=2.0.0
In @suprsend/web-sdk@2.0.0
we have revamped SDK. The whole structure of preferences have been changed from SDK side. Please upgrade to newer versions. Old version of documentation for preference is available here.
Pre-requisites
- Integrate Javascript SDK
- Identify user on login and reset on logout to ensure that preference changes are tagged to the correct user
- Configure notification categories on SuprSend dashboard
- Understanding of the preference data structure and methods
Example Implementation
Github Repository for this example implementation can be found here: (“https://github.com/suprsend/angular-example”)
Integration
There will be 3 components in example implementation:
- preference
- channel-level-preferences
- category-level-preferences
Preference component setup
preference will be the main component and inside it, there will be a property (preferencesData) that contains full user preference data. Whenever there’s an update we will update the latest preference data in the preferencesData so that component to rerender. We already created SuprSend service to access SuprSend client everywhere in the application which is used to call methods.
Call getPreferences method to get the preferences data for the already identified user. This method is used to get full user preferences data from the SuprSend. This method should be called first before any update methods. Calling this method will make an API call and returns a preference response, which you can store in your instance property preferenceData if there is no error.
After that we configure 2 event listeners preferences_updated
and preferences_error
to listen to updates in preference data and errors.
Our Main component preference has 2 child components one for Category-level preference section and other for Overall Channel-level preference section.
Category level Preference section
In category-level preferences, you’ll have to fetch the data from 3 parts:
- Section - to show sections like “Product Updates” in below example
- Category - to show categories and their overall status like “Refunds” in below example
- CategoryChannel - to show communication channels inside the category and their status
Below are the steps to render category preference UI:
- Loop through the property preferenceData.sections for showing sections, show sub-categories inside each section, and show subcategory’s channels inside each sub-category.
- Add a switch button next to each sub-category for opting in and out of the category. Add checkbox components in sub-category channels for opting in and out of category-channel. You can use any third-party npm package to import these components or design your own component.
- To update category preference on the click of the switch button, call updateCategoryPreference method and if no error is received in response, update the latest data in the instance property. For preference state
opt-in
set the switch state as on and off for theopt-out
state.
- To update category-channel preference on the click of checkbox next to each channel, call the updateChannelPreferenceInCategory method. Update the latest data in the instance property if no error is received in response. For preference state
opt-in
set the checkbox state as checked and unchecked for theopt-out
state.
Channel level Preference section
Below are the steps to render channel preference UI:
- Loop through the property preferenceData.channel_preferences for showing channels and for every channel item we will show an option to select preference using radio buttons.
- Add a radio button next, against channel level options for switching from
all
torequired
preference in channel. - To update channel preference on the click of the radio button, call updateOverallChannelPreference method, and if no error is received in response, update the latest data in the state.