diff --git a/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js b/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js
new file mode 100644
index 0000000000..79a9dfef86
--- /dev/null
+++ b/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js
@@ -0,0 +1,42 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function SinglePageNotificationButton ($module) {
+    this.$module = $module
+    this.basePath = this.$module.querySelector('[name="base_path"]').value
+  }
+
+  SinglePageNotificationButton.prototype.init = function () {
+    var xhr = new XMLHttpRequest()
+    var url = '/api/personalisation/check-email-subscription?base_path=' + this.basePath
+    xhr.open('GET', url, true)
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState === 4 && xhr.status === 200) {
+        var responseText = xhr.responseText
+        // if response text exists and is JSON parse-able, parse the response and get the button html
+        if (responseText && this.responseIsJSON(responseText)) {
+          var newButton = JSON.parse(responseText).button_html
+          var html = document.createElement('div');
+          html.innerHTML = newButton
+          // test that the html returned contains the button component; if yes, swap the button for the updated version
+          var responseHasButton = html.querySelector(".gem-c-single-page-notification-button")
+          if (responseHasButton) {
+            this.$module.outerHTML = newButton
+          }
+        }
+      }
+    }.bind(this)
+    xhr.send()
+  }
+
+  SinglePageNotificationButton.prototype.responseIsJSON = function (string) {
+    try {
+      JSON.parse(string)
+    } catch (e) {
+      return false
+    }
+    return true
+  }
+  Modules.SinglePageNotificationButton = SinglePageNotificationButton
+})(window.GOVUK.Modules)
diff --git a/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb b/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb
index e143b289b1..31b0393f58 100644
--- a/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb
+++ b/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb
@@ -10,6 +10,7 @@
   wrapper_classes = %w(gem-c-single-page-notification-button govuk-!-display-none-print)
   wrapper_classes << shared_helper.get_margin_bottom
   classes = "govuk-body-s gem-c-single-page-notification-button__submit"
+  data_attributes[:module] = "single-page-notification-button"
 %>
 <% button_text = capture do %>
   <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><%= text %>