{"id":28,"date":"2026-01-27T06:18:48","date_gmt":"2026-01-27T06:18:48","guid":{"rendered":"https:\/\/npmstudio.io\/?page_id=28"},"modified":"2026-01-27T06:19:53","modified_gmt":"2026-01-27T06:19:53","slug":"sample-sms-email-mobile-app-consent-page","status":"publish","type":"page","link":"https:\/\/npmstudio.io\/?page_id=28","title":{"rendered":"Sample SMS Email Mobile App Consent Page"},"content":{"rendered":"\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)\">\n<h1 class=\"wp-block-heading\">Consent UI Preview<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">This screen shows how communication consent options will appear inside the NPM application. These visuals help users understand what a selected vs. unselected state looks like before making their choice.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The purpose of this screen is to clearly demonstrate the user experience and interaction model used in the app for consent-based preferences.<\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Selected state<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"471\" height=\"1024\" src=\"https:\/\/npmstudio.io\/wp-content\/uploads\/2026\/01\/Simulator-Screenshot-iPhone-17-Pro-2026-01-27-at-01.09.59-471x1024.png\" alt=\"selected\" class=\"wp-image-25\" srcset=\"https:\/\/npmstudio.io\/wp-content\/uploads\/2026\/01\/Simulator-Screenshot-iPhone-17-Pro-2026-01-27-at-01.09.59-471x1024.png 471w, https:\/\/npmstudio.io\/wp-content\/uploads\/2026\/01\/Simulator-Screenshot-iPhone-17-Pro-2026-01-27-at-01.09.59-138x300.png 138w, https:\/\/npmstudio.io\/wp-content\/uploads\/2026\/01\/Simulator-Screenshot-iPhone-17-Pro-2026-01-27-at-01.09.59-768x1670.png 768w, https:\/\/npmstudio.io\/wp-content\/uploads\/2026\/01\/Simulator-Screenshot-iPhone-17-Pro-2026-01-27-at-01.09.59-706x1536.png 706w, https:\/\/npmstudio.io\/wp-content\/uploads\/2026\/01\/Simulator-Screenshot-iPhone-17-Pro-2026-01-27-at-01.09.59-942x2048.png 942w, https:\/\/npmstudio.io\/wp-content\/uploads\/2026\/01\/Simulator-Screenshot-iPhone-17-Pro-2026-01-27-at-01.09.59-scaled.png 1177w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This represents an active selection. The user has opted in, and the option is visually confirmed as enabled.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Not selected state<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"471\" height=\"1024\" src=\"https:\/\/npmstudio.io\/wp-content\/uploads\/2026\/01\/Simulator-Screenshot-iPhone-17-Pro-2026-01-27-at-01.09.57-471x1024.png\" alt=\"not_selected\" class=\"wp-image-24\" srcset=\"https:\/\/npmstudio.io\/wp-content\/uploads\/2026\/01\/Simulator-Screenshot-iPhone-17-Pro-2026-01-27-at-01.09.57-471x1024.png 471w, https:\/\/npmstudio.io\/wp-content\/uploads\/2026\/01\/Simulator-Screenshot-iPhone-17-Pro-2026-01-27-at-01.09.57-138x300.png 138w, https:\/\/npmstudio.io\/wp-content\/uploads\/2026\/01\/Simulator-Screenshot-iPhone-17-Pro-2026-01-27-at-01.09.57-768x1670.png 768w, https:\/\/npmstudio.io\/wp-content\/uploads\/2026\/01\/Simulator-Screenshot-iPhone-17-Pro-2026-01-27-at-01.09.57-706x1536.png 706w, https:\/\/npmstudio.io\/wp-content\/uploads\/2026\/01\/Simulator-Screenshot-iPhone-17-Pro-2026-01-27-at-01.09.57-942x2048.png 942w, https:\/\/npmstudio.io\/wp-content\/uploads\/2026\/01\/Simulator-Screenshot-iPhone-17-Pro-2026-01-27-at-01.09.57-scaled.png 1177w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This represents an inactive selection. The user has not opted in, and the option is visually disabled or unselected.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"border-width:1px;border-radius:12px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<p class=\"wp-block-paragraph\"><strong>Why this matters<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This preview helps users visually understand consent before interacting with it in the app, reducing confusion and increasing trust, clarity, and usability.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Consent UI Preview This screen shows how communication consent options will appear inside the NPM application. These visuals help users understand what a selected vs. unselected state looks like before making their choice. The purpose of this screen is to clearly demonstrate the user experience and interaction model used in the app for consent-based preferences. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-28","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/npmstudio.io\/index.php?rest_route=\/wp\/v2\/pages\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/npmstudio.io\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/npmstudio.io\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/npmstudio.io\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/npmstudio.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=28"}],"version-history":[{"count":2,"href":"https:\/\/npmstudio.io\/index.php?rest_route=\/wp\/v2\/pages\/28\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/npmstudio.io\/index.php?rest_route=\/wp\/v2\/pages\/28\/revisions\/31"}],"wp:attachment":[{"href":"https:\/\/npmstudio.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}