{"id":5868,"date":"2026-07-02T03:28:46","date_gmt":"2026-07-02T10:28:46","guid":{"rendered":"https:\/\/clone.surecookie.com\/docs\/frontend-javascript-api-events-surecookiemanager\/"},"modified":"2026-07-12T20:27:00","modified_gmt":"2026-07-13T03:27:00","slug":"frontend-javascript-api-events","status":"publish","type":"docs","link":"https:\/\/clone.surecookie.com\/de\/docs\/frontend-javascript-api-events\/","title":{"rendered":"Frontend JavaScript API & Events (surecookieManager)"},"content":{"rendered":"

If you write your own frontend code, a custom widget, a map, a tracking snippet, it should respect your visitors’ consent just like the plugins SureCookie manages. For that, SureCookie exposes a small JavaScript API on every page where the banner is active: the window.surecookieManager<\/code> object for reading consent state, and a set of events for reacting when it changes.<\/p>\n\n\n\n

This reference covers that supported surface, reading state, listening for changes, and opening the preferences UI.<\/p>\n\n\n\n

\n

Note:<\/strong> The manager object contains other methods used internally by the banner itself. Those are implementation details, they can change between releases, and they aren’t supported for external use. Stick to what’s on this page.<\/p>\n<\/blockquote>\n\n\n\n

Before You Start<\/h2>\n\n\n\n

SureCookie’s script loads in the footer, so guard your code against running too early. The simplest pattern:<\/p>\n\n\n\n

window.addEventListener( 'load', () => {\n\tif ( ! window.surecookieManager ) {\n\t\treturn; \/\/ Banner disabled or SureCookie not active.\n\t}\n\t\/\/ Your code here.\n} );\n<\/code><\/pre>\n\n\n\n
Reading Consent State<\/h2>\n\n\n\n
isAllowed( category )<\/h3>\n\n\n\n
The method you’ll use most. Returns true<\/code> when the given category ('essential'<\/code>, 'functional'<\/code>, 'analytics'<\/code>, 'marketing'<\/code>, or a custom category ID) is currently allowed. It handles the defaults correctly: before a visitor chooses, only essential is allowed under opt-in, while everything is allowed under opt-out.<\/p>\n\n\n\n
if ( window.surecookieManager.isAllowed( 'functional' ) ) {\n\tinitMyMapWidget();\n}\n<\/code><\/pre>\n\n\n\n
hasConsent()<\/h3>\n\n\n\n
Returns true<\/code> once the visitor has made a choice, and false<\/code> while they haven’t responded yet.<\/p>\n\n\n\n
getConsent()<\/h3>\n\n\n\n
Returns the stored consent object, with the visitor’s per-category preferences<\/code>, the action<\/code> they took, and a timestamp<\/code>, or null<\/code> before any choice.<\/p>\n\n\n\n
getConsentSummary()<\/h3>\n\n\n\n
A convenience for debugging: returns an object with the action<\/code>, timestamp<\/code>, and the list of allowed<\/code> categories, or the string 'No consent given'<\/code> when there’s no choice yet.<\/p>\n\n\n\n
Events<\/h2>\n\n\n\n
SureCookie dispatches these as CustomEvent<\/code>s on window<\/code>:<\/p>\n\n\n\n
Event<\/th>Fires when<\/th>event.detail<\/code><\/th><\/tr><\/thead>
surecookie_changed<\/code><\/td>The visitor makes or changes their choice<\/td>The consent data<\/td><\/tr>
surecookie_applied<\/code><\/td>The current consent state has been applied to the page, on load and after every change<\/td>The consent data<\/td><\/tr>
surecookie_gcm_updated<\/code><\/td>Consent signals have been pushed to Google Consent Mode<\/td>The updated signals<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Use surecookie_changed<\/code> to react to decisions, and surecookie_applied<\/code> when you also want to run for returning visitors whose stored consent is applied on page load:<\/p>\n\n\n\n
window.addEventListener( 'surecookie_applied', () => {\n\tif ( window.surecookieManager.isAllowed( 'analytics' ) ) {\n\t\tstartMyCustomAnalytics();\n\t} else {\n\t\tstopMyCustomAnalytics();\n\t}\n} );\n<\/code><\/pre>\n\n\n\n
This pattern covers every case with one listener: first-time choices, changed preferences, and returning visitors.<\/p>\n\n\n\n
Opening the Preferences UI<\/h2>\n\n\n\n
To let visitors reopen their cookie preferences from your own element, add the data-surecookie-reconsent<\/code> attribute to any link or button:<\/p>\n\n\n\n
<button data-surecookie-reconsent=\"true\">Cookie Preferences<\/button><\/code><\/pre>\n\n\n\n
This is the same mechanism the surecookie_reconsent_button<\/code> shortcode uses. See Shortcodes Reference (Re-consent, Policy Content)<\/em>.<\/p>\n\n\n\n
Don’t Set Consent Programmatically<\/h2>\n\n\n\n
The manager includes methods the banner itself uses to record, change, and clear consent. Don’t call them from your own code.<\/p>\n\n\n\n
\n
Important:<\/strong> Consent is only valid when it comes from the visitor’s own action on the banner. Recording or clearing consent programmatically undermines its validity and your compliance posture. If you need consent recorded differently, that’s a banner-configuration question, not a JavaScript one.<\/p>\n<\/blockquote>\n\n\n\n
For testing your integration as a fresh visitor, use a private browsing window instead of clearing consent in code.<\/p>\n\n\n\n
Good Practices<\/h2>\n\n\n\n
    \n
  • Gate your own scripts with isAllowed()<\/code> and re-check inside a surecookie_applied<\/code> listener, so they start and stop as consent changes.<\/li>\n\n\n\n
  • For a standardized, plugin-neutral way to check consent, the WP Consent API works alongside this API; SureCookie keeps it in sync. See WP Consent API Compatibility<\/em>.<\/li>\n\n\n\n
  • Server-side customization belongs in hooks, not JS. See Developer Reference: Hooks & Filters<\/em>.<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"
    SureCookie exposes a small frontend JavaScript API and a set of events, so your own scripts can check what a visitor has consented to, react when their choice changes, and open the preferences UI.<\/p>","protected":false},"author":32,"featured_media":0,"template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_pfd_related_docs_manual":[],"pfd_doc_title":"","spectra_gs_classes":"[\"\"]","footnotes":""},"docs_category":[44],"docs_tag":[],"class_list":["post-5868","docs","type-docs","status-publish","hentry","docs_category-developers"],"spectra_custom_meta":{"spectra_gs_classes":["[\"\"]"],"surerank_seo_checks":["a:13:{s:14:\"h2_subheadings\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:38:\"Page contains at least one subheading.\";s:4:\"type\";s:4:\"page\";}s:13:\"media_present\";a:3:{s:6:\"status\";s:7:\"warning\";s:7:\"message\";s:39:\"No images or videos found on this page.\";s:4:\"type\";s:4:\"page\";}s:13:\"links_present\";a:3:{s:6:\"status\";s:7:\"warning\";s:7:\"message\";s:27:\"No links found on the page.\";s:4:\"type\";s:4:\"page\";}s:10:\"url_length\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:35:\"Page URL is short and SEO-friendly.\";s:4:\"type\";s:4:\"page\";}s:19:\"search_engine_title\";a:3:{s:6:\"status\";s:7:\"warning\";s:7:\"message\";s:42:\"Search engine title exceeds 60 characters.\";s:4:\"type\";s:4:\"page\";}s:25:\"search_engine_description\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:62:\"Search engine description is present and under 160 characters.\";s:4:\"type\";s:4:\"page\";}s:13:\"canonical_url\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:37:\"Canonical tag is present on the page.\";s:4:\"type\";s:4:\"page\";}s:15:\"open_graph_tags\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:40:\"Open Graph tags are present on the page.\";s:4:\"type\";s:4:\"page\";}s:16:\"keyword_in_title\";a:3:{s:6:\"status\";s:10:\"suggestion\";s:7:\"message\";s:38:\"No focus keyword set to analyze title.\";s:4:\"type\";s:7:\"keyword\";}s:22:\"keyword_in_description\";a:3:{s:6:\"status\";s:10:\"suggestion\";s:7:\"message\";s:49:\"No focus keyword set to analyze meta description.\";s:4:\"type\";s:7:\"keyword\";}s:14:\"keyword_in_url\";a:3:{s:6:\"status\";s:10:\"suggestion\";s:7:\"message\";s:36:\"No focus keyword set to analyze URL.\";s:4:\"type\";s:7:\"keyword\";}s:18:\"keyword_in_content\";a:3:{s:6:\"status\";s:10:\"suggestion\";s:7:\"message\";s:40:\"No focus keyword set to analyze content.\";s:4:\"type\";s:7:\"keyword\";}s:12:\"broken_links\";a:3:{s:6:\"status\";s:7:\"success\";s:4:\"type\";s:4:\"page\";s:7:\"message\";s:34:\"No broken links found on the page.\";}}"],"surerank_seo_checks_last_updated":["1783913220"],"_edit_lock":["1783916909:39"],"views":["67"],"_uag_custom_page_level_css":[""],"site-sidebar-layout":["default"],"site-content-layout":[""],"ast-site-content-layout":["default"],"site-content-style":["default"],"site-sidebar-style":["default"],"ast-global-header-display":[""],"ast-banner-title-visibility":[""],"ast-main-header-display":[""],"ast-hfb-above-header-display":[""],"ast-hfb-below-header-display":[""],"ast-hfb-mobile-header-display":[""],"site-post-title":[""],"ast-breadcrumbs-content":[""],"ast-featured-img":[""],"footer-sml-layout":[""],"ast-disable-related-posts":[""],"theme-transparent-header-meta":[""],"adv-header-id-meta":[""],"stick-header-meta":[""],"header-above-stick-meta":[""],"header-main-stick-meta":[""],"header-below-stick-meta":[""],"astra-migrate-meta-layouts":["set"],"ast-page-background-enabled":["default"],"ast-page-background-meta":["a:3:{s:7:\"desktop\";a:12:{s:16:\"background-color\";s:25:\"var(--ast-global-color-4)\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}s:6:\"tablet\";a:12:{s:16:\"background-color\";s:0:\"\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}s:6:\"mobile\";a:12:{s:16:\"background-color\";s:0:\"\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}}"],"ast-content-background-meta":["a:3:{s:7:\"desktop\";a:12:{s:16:\"background-color\";s:25:\"var(--ast-global-color-5)\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}s:6:\"tablet\";a:12:{s:16:\"background-color\";s:25:\"var(--ast-global-color-5)\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}s:6:\"mobile\";a:12:{s:16:\"background-color\";s:25:\"var(--ast-global-color-5)\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}}"],"_pfd_related_docs_manual":["a:0:{}"],"pfd_doc_title":[""],"footnotes":[""],"_edit_last":["39"],"helpful":["0"],"unhelpful":["0"],"redirects":["0"],"_uag_page_assets":["a:9:{s:3:\"css\";s:263:\".uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media (max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media (max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}\n\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:15:{i:0;s:14:\"core\/paragraph\";i:1;s:10:\"core\/quote\";i:2;s:12:\"core\/heading\";i:3;s:9:\"core\/code\";i:4;s:10:\"core\/table\";i:5;s:9:\"core\/list\";i:6;s:14:\"core\/list-item\";i:7;s:11:\"core\/search\";i:8;s:10:\"core\/group\";i:9;s:17:\"core\/latest-posts\";i:10;s:20:\"core\/latest-comments\";i:11;s:13:\"core\/archives\";i:12;s:15:\"core\/categories\";i:13;s:10:\"core\/image\";i:14;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:0;s:11:\"uag_version\";s:10:\"1789562467\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"],"_uag_css_file_name":["uag-css-5868.css"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"navanath b","author_link":"https:\/\/clone.surecookie.com\/de\/author\/navanathbbsf-io\/"},"uagb_comment_info":0,"uagb_excerpt":"SureCookie exposes a small frontend JavaScript API and a set of events, so your own scripts can check what a visitor has consented to, react when their choice changes, and open the preferences UI.","_links":{"self":[{"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs\/5868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/users\/32"}],"version-history":[{"count":2,"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs\/5868\/revisions"}],"predecessor-version":[{"id":5870,"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs\/5868\/revisions\/5870"}],"wp:attachment":[{"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/media?parent=5868"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs_category?post=5868"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs_tag?post=5868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}