Preferences
Prerequisites
- Integration of Javascript SDK
- Configure notification categories on SuprSend dashboard
Understanding Preferences Structure
This is how a typical preference page will look like:
Preference Page contains 2 sections:
-
Category-level preference settings (Sections)
Preferences Data Structure
interface PreferenceData {
sections: Section[] | null;
channel_preferences: ChannelPreference[] | null;
}
interface ChannelPreference {
channel: string;
is_restricted: boolean;
}
interface Section {
name?: string | null;
description?: string | null;
subcategories?: Category[] | null;
}
interface Category {
name: string;
category: string;
description?: string | null;
preference: PreferenceOptions;
is_editable: boolean;
channels?: CategoryChannel[] | null;
}
interface CategoryChannel {
channel: string;
preference: PreferenceOptions;
is_editable: boolean;
}
enum PreferenceOptions {
OPT_IN = "opt_in",
OPT_OUT = "opt_out",
}
enum ChannelLevelPreferenceOptions {
ALL = "all",
REQUIRED = "required",
}
{
"sections": [
{
"name": null,
"subcategories": [
{
"name": "Payment and History",
"category": "payment-and-history",
"description": "Send updates related to my payment history.",
"preference": "opt_in",
"is_editable": false,
"channels": [
{
"channel": "androidpush",
"preference": "opt_in",
"is_editable": true
},
{
"channel": "email",
"preference": "opt_in",
"is_editable": false
}
]
}
]
},
{
"name": "Product Updates",
"description": "Non-marketing notifications related to authentication, activity updates, reminders etc.",
"subcategories": [
{
"name": "Newsletter",
"category": "newsletter",
"description": "Send updates on new feature in the product",
"preference": "opt_in",
"is_editable": true,
"channels": [
{
"channel": "androidpush",
"preference": "opt_in",
"is_editable": true
},
{
"channel": "email",
"preference": "opt_out",
"is_editable": false
}
]
}
]
}
],
"channel_preferences": [
{
"channel": "androidpush",
"is_restricted": false
},
{
"channel": "email",
"is_restricted": true
}
]
}
1.1 Sections
This contains the name, description, and subcategories. We have to loop through the sections list and for every section item if there is a name and description present, then show the heading, and if a subcategories list is present, loop through that subcategories list and show all subcategories under that section heading.
Subcategories can exist without sections as the section is an optional field. In that case, the section's name will not be available. For sections where the name is not present, you can directly show its subcategories list without showing Heading for the section in UI.
interface Section {
name?: string | null;
description?: string | null;
subcategories?: Category[] | null;
}
Property | Description |
---|---|
name | name of the section |
description | description of the section |
subcategories | data of all sub-categories to be shown inside the section |
1.2 Categories (sections -> sub-categories)
This is the place where the user sets his category-level preferences. While looping through the subcategories list for every subcategory item, show the name and description in UI.
interface Category {
name: string;
category: string;
description?: string | null;
preference: PreferenceOptions;
is_editable: boolean;
channels?: CategoryChannel[] | null;
}
Property | Description |
---|---|
category | This key is the id of the category which is used while updating the preference. |
name | name of the category to be shown on the UI |
description | description of the category to be shown on the UI |
preference | This key indicates if the category's preference switch is on or off. Get OPT_IN when the switch is on and OPT_OUT when the switch is off |
is_editable | Indicates if the preference switch button is disabled or not. If its value is false then the preference setting for that category can't be edited |
channels | data of all category channels to be shown below the sub-category. Loop through it to show checkboxes under every subcategory item. |
1.3 Category channels (sections -> sub-categories -> channels)
This contains a list of channels, channel preference status and whether it's editable or not. While looping through the subcategory list for every subcategory item we have to loop through its channels list and for every channel to show channel level checkbox.
interface CategoryChannel {
channel: string;
preference: PreferenceOptions;
is_editable: boolean;
}
Property | Description |
---|---|
channel | name of the channel to be shown on UI. The same key will be used as id of the channel while updating the preference. |
preference | This key indicates if the channel's preference switch is on or off. Get OPT_IN when the switch is on and OPT_OUT when the switch is off |
is_editable | Indicates if the preference checkbox is disabled or not. If its value is false then the preference setting for that channel can't be edited |
2. Overall Channel Preferences
It's a list of all channel-level preferences. We have to loop through the list and for each item, show the UI as given in the below image.
interface ChannelPreference {
channel: string;
is_restricted: boolean;
}
Property | Description |
---|---|
channel | name of the channel to be shown on UI. The same key will be used as id of the channel while updating the preference. |
is_restricted | This key indicates the restriction level of channel. If restricted, notification will only be sent in the category where this channel is added as mandatory in notification category settings. True means Required radio button is selected. False means All radio button is selected. |
Integration
Get Preferences Data
Use this method to get preferences data and create the preferences UI by following the above sections. This method should be called first before any update preference methods.
const preferencesResp = await suprSendClient.user.preferences.getPreferences(args?: {tenantId?: string});
Returns: Promise<ApiResponse>
Update Category Preference
Calling this method will opt-in/opt-out user from that category. When the category is editable and the switch is toggled you can call this method.
const updatedPreferencesResp = await suprSendClient.user.preferences.updateCategoryPreference(category: string, preference: PreferenceOptions, args?: { tenantId?: string });
enum PreferenceOptions {
OPT_IN = "opt_in",
OPT_OUT = "opt_out"
}
Returns: Promise<ApiResponse>
Update Channel Preference in Category
Calling this method will opt-in/opt-out users from that category-level channel. When the category's channel checkbox is editable and the user clicks on the checkbox you can call this method.
const updatedPreferencesResp = await suprSendClient.user.preferences.updateChannelPreferenceInCategory(channel: string, preference: PreferenceOptions, category: string, args?: { tenantId?: string });
enum PreferenceOptions {
OPT_IN = "opt_in",
OPT_OUT = "opt_out"
}
Returns: Promise<ApiResponse>
Update Overall Channel Preference
This method updated the channel-level preference of the user.
const updatedPreferencesResp = await suprSendClient.user.preferences.updateOverallChannelPreference(channel: string, preference: ChannelLevelPreferenceOptions);
enum ChannelLevelPreferenceOptions {
ALL = "all",
REQUIRED = "required"
}
Returns: Promise<ApiResponse>
Event Listeners
All preferences update api's are optimistic updates. Actual api call will happen in background with 1 second debounce. Since its a background task SDK provides event listeners to get updated preference data based on api call status. Listen to this event listeners and update the UI accordingly.
suprSendClient.emitter.on('preferences_updated', (preferenceDataResp: ApiResponse) => void);
suprSendClient.emitter.on('preferences_error', (errorResponse: ApiResponse) => void);
Example Usage:
For preferences_error event you could show error toast.
For preferences_updated event you could update UI with latest data returned in as param in callback function.
Updated 24 days ago