{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"settings":"","params":[]},"next":{"description":"","pages":[]},"title":"Adding Notification Buttons","type":"basic","slug":"adding-notification-buttons","excerpt":"A guide to adding buttons to your push notifications","body":"Adding buttons to push notifications is a great way to encourage users to engage with your messages by adding additional options that are relevant to the content being displayed. The Sailthru Mobile SDK automatically creates several default button options for you to choose from, as well as allowing you to specify custom buttons you have set up in your app.\n\nA guide to setting up custom buttons can be found [here](doc:interactive-notifications).\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note\",\n  \"body\": \"The default categories in the SDK are available from the following versions:\\niOS - 9.0.0\\nAndroid - 10.0.0\"\n}\n[/block]\n## Selecting Buttons\nYou can select which buttons when creating your notification by selecting the 'Buttons' option from the custom fields options.\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/225bc19-Screen_Shot_2019-12-05_at_8.53.45_AM.png\",\n        \"Screen Shot 2019-12-05 at 8.53.45 AM.png\",\n        2436,\n        1258,\n        \"#e4ecf4\"\n      ]\n    }\n  ]\n}\n[/block]\nYou can then select which buttons you want from the dropdown list.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/c329d5f-Screen_Shot_2019-12-05_at_8.55.21_AM.png\",\n        \"Screen Shot 2019-12-05 at 8.55.21 AM.png\",\n        2435,\n        1259,\n        \"#e4edf4\"\n      ]\n    }\n  ]\n}\n[/block]\nBy default positive actions will launch the app to the foreground, the same as tapping the main notification body. Negative actions will clear the notification without launching the app. Positive actions can also have a deeplink applied to them which will override the default behaviour. To add this, simply select the 'Deep link' radio button and enter the desired link.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/c8b7104-Screen_Shot_2019-12-05_at_8.54.46_AM.png\",\n        \"Screen Shot 2019-12-05 at 8.54.46 AM.png\",\n        2434,\n        1258,\n        \"#e4ecf4\"\n      ]\n    }\n  ]\n}\n[/block]\nCustom buttons can be used by selecting 'Custom' from the dropdown and entering the category name.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/6d5b8ec-Screen_Shot_2019-12-05_at_9.16.33_AM.png\",\n        \"Screen Shot 2019-12-05 at 9.16.33 AM.png\",\n        2433,\n        1258,\n        \"#e4ecf4\"\n      ]\n    }\n  ]\n}\n[/block]\n## Handling Actions\nIt's possible to add custom behaviour in your app when particular buttons are tapped.\n\n### iOS\nThe category and button selected will be passed back to the app in the `UNUserNotificationCenterDelegate` `userNotificationCenter:didReceiveNotificationResponse:withCompletionHandler:` method. You can retrieve them from the `UNNotificationResponse` `actionIdentifier` field. Sailthru Mobile default buttons are returned in the format `<category_name>&<button_title>`.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"- (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler {\\n    NSArray *components = [response.actionIdentifier componentsSeparatedByString::::at:::\\\"&\\\"];\\n    if ([components count] == 2) {\\n        NSString *category = [components objectAtIndex:0];\\n        NSString *title = [components objectAtIndex:1];\\n        \\n        // Handle button tapped\\n    }\\n}\",\n      \"language\": \"objectivec\"\n    },\n    {\n      \"code\": \"func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {\\n    let components = response.actionIdentifier.components(separatedBy:\\\"&\\\")\\n    if (components.count == 2) {\\n      let category = components[0]\\n      let title = components[1]\\n\\n      // Handle button tapped\\n    }\\n}\",\n      \"language\": \"swift\"\n    }\n  ]\n}\n[/block]\n### Android\nYou can add a `NotificationActionTappedListener` instance to the SDK which will be notified when the user taps an action.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"new SailthruMobile().addNotificationActionTappedListener(new NotificationActionTappedListener() {\\n    @Override\\n    public void onNotificationActionTapped(Context context, Bundle bundle, String title, String category, NotificationActionState actionState) {\\n      // handle button tapped\\n    }\\n});\",\n      \"language\": \"java\"\n    },\n    {\n      \"code\": \"SailthruMobile().addNotificationActionTappedListener { context, bundle, title, category, actionState ->  \\n    // handle button tapped\\n}\",\n      \"language\": \"kotlin\"\n    }\n  ]\n}\n[/block]\n## Default Categories\nFrom version 9.0.0 of the iOS SDK and version 10.0.0 of the Android SDK, the following categories will be automatically created in the SDK. You can use these by choosing them from the dropdown, if available, or you can just send the category name directly in the 'Custom' field.\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Category ID\",\n    \"h-1\": \"Positive Action\",\n    \"h-2\": \"Negative Action\",\n    \"0-0\": \"st_cat_yes_no\",\n    \"0-1\": \"Yes\",\n    \"0-2\": \"No\",\n    \"1-0\": \"st_cat_accept_decline\",\n    \"2-0\": \"st_cat_learn_more\",\n    \"3-0\": \"st_cat_next_step\",\n    \"4-0\": \"st_cat_view\",\n    \"5-0\": \"st_cat_shop_now\",\n    \"6-0\": \"st_cat_add\",\n    \"7-0\": \"st_cat_watch\",\n    \"8-0\": \"st_cat_subscribe\",\n    \"9-0\": \"st_cat_share\",\n    \"10-0\": \"st_cat_continue\",\n    \"1-1\": \"Accept\",\n    \"2-1\": \"Learn More\",\n    \"3-1\": \"Next Step\",\n    \"4-1\": \"View\",\n    \"5-1\": \"Shop Now\",\n    \"6-1\": \"Add\",\n    \"7-1\": \"Watch\",\n    \"8-1\": \"Subscribe\",\n    \"9-1\": \"Share\",\n    \"10-1\": \"Continue\",\n    \"1-2\": \"Decline\",\n    \"2-2\": \"-\",\n    \"3-2\": \"-\",\n    \"4-2\": \"-\",\n    \"5-2\": \"-\",\n    \"6-2\": \"-\",\n    \"7-2\": \"-\",\n    \"8-2\": \"-\",\n    \"9-2\": \"-\",\n    \"10-2\": \"-\"\n  },\n  \"cols\": 3,\n  \"rows\": 11\n}\n[/block]","updates":[],"order":2,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5e6156bf5e4a51006dcd818b","project":"55e67aaa9cc7c62b00c4a1ea","version":{"version":"1.5","version_clean":"1.5.0","codename":"ST Rebrand","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["5e6156bf5e4a51006dcd8120","5e6156bf5e4a51006dcd8121","5e6156bf5e4a51006dcd8122","5e6156bf5e4a51006dcd8123","5e6156bf5e4a51006dcd8124","561c61b4ad272c0d00a892df","586c014c0abf1d0f000d04d4","58991d2ad207df0f0002186b","5e6156bf5e4a51006dcd8125","5e6156bf5e4a51006dcd8126","5af0fe494ca2730003cbc98a","5af0fe55ec80af0003804ca2","5e69868cbd5dcb006b35867b","5e6986ca2c6652006791b6e8"],"_id":"5e6156bf5e4a51006dcd818c","project":"55e67aaa9cc7c62b00c4a1ea","__v":2,"forked_from":"5b720760c44b7600034b7a08","createdAt":"2015-09-02T04:27:23.612Z","releaseDate":"2015-09-02T04:27:23.612Z"},"category":{"sync":{"isSync":false,"url":""},"pages":["5e6156bf5e4a51006dcd8146","5e6156bf5e4a51006dcd8147","5e6156bf5e4a51006dcd8151"],"title":"Messaging your users","slug":"messaging-your-users","order":3,"from_sync":false,"reference":false,"_id":"5e6156bf5e4a51006dcd8123","project":"55e67aaa9cc7c62b00c4a1ea","version":"5e6156bf5e4a51006dcd818c","__v":3,"createdAt":"2015-09-02T04:54:07.577Z"},"user":"5b0b7a46a26e6400036604fd","createdAt":"2019-12-04T19:22:18.971Z","__v":0,"parentDoc":null}

Adding Notification Buttons

A guide to adding buttons to your push notifications

Adding buttons to push notifications is a great way to encourage users to engage with your messages by adding additional options that are relevant to the content being displayed. The Sailthru Mobile SDK automatically creates several default button options for you to choose from, as well as allowing you to specify custom buttons you have set up in your app. A guide to setting up custom buttons can be found [here](doc:interactive-notifications). [block:callout] { "type": "info", "title": "Note", "body": "The default categories in the SDK are available from the following versions:\niOS - 9.0.0\nAndroid - 10.0.0" } [/block] ## Selecting Buttons You can select which buttons when creating your notification by selecting the 'Buttons' option from the custom fields options. [block:image] { "images": [ { "image": [ "https://files.readme.io/225bc19-Screen_Shot_2019-12-05_at_8.53.45_AM.png", "Screen Shot 2019-12-05 at 8.53.45 AM.png", 2436, 1258, "#e4ecf4" ] } ] } [/block] You can then select which buttons you want from the dropdown list. [block:image] { "images": [ { "image": [ "https://files.readme.io/c329d5f-Screen_Shot_2019-12-05_at_8.55.21_AM.png", "Screen Shot 2019-12-05 at 8.55.21 AM.png", 2435, 1259, "#e4edf4" ] } ] } [/block] By default positive actions will launch the app to the foreground, the same as tapping the main notification body. Negative actions will clear the notification without launching the app. Positive actions can also have a deeplink applied to them which will override the default behaviour. To add this, simply select the 'Deep link' radio button and enter the desired link. [block:image] { "images": [ { "image": [ "https://files.readme.io/c8b7104-Screen_Shot_2019-12-05_at_8.54.46_AM.png", "Screen Shot 2019-12-05 at 8.54.46 AM.png", 2434, 1258, "#e4ecf4" ] } ] } [/block] Custom buttons can be used by selecting 'Custom' from the dropdown and entering the category name. [block:image] { "images": [ { "image": [ "https://files.readme.io/6d5b8ec-Screen_Shot_2019-12-05_at_9.16.33_AM.png", "Screen Shot 2019-12-05 at 9.16.33 AM.png", 2433, 1258, "#e4ecf4" ] } ] } [/block] ## Handling Actions It's possible to add custom behaviour in your app when particular buttons are tapped. ### iOS The category and button selected will be passed back to the app in the `UNUserNotificationCenterDelegate` `userNotificationCenter:didReceiveNotificationResponse:withCompletionHandler:` method. You can retrieve them from the `UNNotificationResponse` `actionIdentifier` field. Sailthru Mobile default buttons are returned in the format `<category_name>&<button_title>`. [block:code] { "codes": [ { "code": "- (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler {\n NSArray *components = [response.actionIdentifier componentsSeparatedByString:@\"&\"];\n if ([components count] == 2) {\n NSString *category = [components objectAtIndex:0];\n NSString *title = [components objectAtIndex:1];\n \n // Handle button tapped\n }\n}", "language": "objectivec" }, { "code": "func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {\n let components = response.actionIdentifier.components(separatedBy:\"&\")\n if (components.count == 2) {\n let category = components[0]\n let title = components[1]\n\n // Handle button tapped\n }\n}", "language": "swift" } ] } [/block] ### Android You can add a `NotificationActionTappedListener` instance to the SDK which will be notified when the user taps an action. [block:code] { "codes": [ { "code": "new SailthruMobile().addNotificationActionTappedListener(new NotificationActionTappedListener() {\n @Override\n public void onNotificationActionTapped(Context context, Bundle bundle, String title, String category, NotificationActionState actionState) {\n // handle button tapped\n }\n});", "language": "java" }, { "code": "SailthruMobile().addNotificationActionTappedListener { context, bundle, title, category, actionState -> \n // handle button tapped\n}", "language": "kotlin" } ] } [/block] ## Default Categories From version 9.0.0 of the iOS SDK and version 10.0.0 of the Android SDK, the following categories will be automatically created in the SDK. You can use these by choosing them from the dropdown, if available, or you can just send the category name directly in the 'Custom' field. [block:parameters] { "data": { "h-0": "Category ID", "h-1": "Positive Action", "h-2": "Negative Action", "0-0": "st_cat_yes_no", "0-1": "Yes", "0-2": "No", "1-0": "st_cat_accept_decline", "2-0": "st_cat_learn_more", "3-0": "st_cat_next_step", "4-0": "st_cat_view", "5-0": "st_cat_shop_now", "6-0": "st_cat_add", "7-0": "st_cat_watch", "8-0": "st_cat_subscribe", "9-0": "st_cat_share", "10-0": "st_cat_continue", "1-1": "Accept", "2-1": "Learn More", "3-1": "Next Step", "4-1": "View", "5-1": "Shop Now", "6-1": "Add", "7-1": "Watch", "8-1": "Subscribe", "9-1": "Share", "10-1": "Continue", "1-2": "Decline", "2-2": "-", "3-2": "-", "4-2": "-", "5-2": "-", "6-2": "-", "7-2": "-", "8-2": "-", "9-2": "-", "10-2": "-" }, "cols": 3, "rows": 11 } [/block]