Integration guide to add notification preference centre in Angular website.
**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.
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 listenerspreferences_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.
preference.component.ts
Copy
Ask AI
import { SuprsendService } from '../suprsend.service';@Component({...})export class PreferenceComponent implements OnInit { preferencesData: any = null; constructor(private router: Router, private ssService: SuprsendService) {} ngOnInit(): void { // before getting preferences make sure to call identify method this.ssService.ssClient.user.preferences.getPreferences().then((resp) => { if (resp.status === 'error') { console.log(resp.error); } else { this.preferencesData = resp.body; } }); // listen for update in preferences data this.ssService.ssClient.emitter.on( 'preferences_updated', (preferenceData) => { this.preferencesData = { ...preferenceData.body } } ); // listen for errors this.ssService.ssClient.emitter.on('preferences_error', (error) => { console.log('ERROR:', error); }); }}
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 the opt-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 the opt-out state.
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 to required 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.
