Email Subscription Widget

Drop-in client-side implementation of the WebSub based email subscription API

The general purpose of the subscription widget is to provide a way for visitors to a company website to sign up for news emails from that particular company.

Under the hood, this subscription widget uses our WebSub functionality described under the API section of the documentation.

The script below will load the widget onto the website and hook up the functionality for subscribing to different types of Press Releases.

This widget is implemented as a Datablocks widget and uses the Datablocks JS-Loader to load the widget. Where <TOKEN> is a unique Datablocks widget token.

<div id="subscribe-module"></div>
<script>
   (function(widgets) {
        var url = "https://widget.datablocks.se/api/rose";
        if (!window._MF) {
            var b = document.createElement("script");
            b.type = "text/javascript";
            b.async = true;
            b.src = url + "/assets/js/loader-v5.js";
            document.getElementsByTagName("body")[0].appendChild(b);
            }
            window._MF = window._MF || {
            data: [],
            url: url,
            ready: !!0,
            render: function() { window._MF.ready = !0 },
            push: function(w) { window._MF.data.push(w) }
            };
            window._MF.push(widgets);
    })([{
        query: "#subscribe-module"
        ,widget: "subscribe-v2"
        ,locale: "en"
        ,token: "<TOKEN>"
    }]);
</script>

Testing

There are a few hidden fields that exist if a bad email is submitted or the GDPR box is not checked. Remember to test this out to style them accordingly.

Example

Below is an example where the customer has added styling

Example styling

Below is some example styling for the subscription widget. For a coherent look with the website, change dark blue to another color that matches the rest of the website.

CSS

/* remove list style and add padding */
.mfn-subscribe .mfn-list {
    list-style: none;
    padding-left: 15px;
}

/* style button when disabled */
.mfn-subscribe button:disabled {
    opacity: 0.5;
}

/* style for button */
.mfn-subscribe button.mfn-sub-submit {
  margin-top: 5px;
    font-weight: 500;
    padding: 10px 10px;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    background-color: darkblue;
    border: none;
}

/* color on checkbox */
.mfn-subscribe input[type="checkbox"] {
accent-color: darkblue;
}

/* font-family */
.mfn-subscribe{
  font-family: sans-serif; 
}

/* style for email input */
.mfn-subscribe .mfn-field-row input[type=text] {
    max-width: 400px;
    font-size: 16px;
    width: 90%;
    box-shadow: none;
    height: 40px;
    border-radius: 3px;
    padding-left: 6px;
}

/* style for p-tag */
.mfn-subscribe p{
 margin: 0;
}

Options

We provide a number of options configurable from our backend, such as:

• What checkboxes are available (IR, PR, reports, annual reports)

  • Which of these are checked by default

• Checkboxes to choose locale for the email subscription

• Ability to have the email subscription follow the locale of the widgets locale setting

  • For example, you can request to not have the checkboxes for locale with this enabled

There are a number of classes attached to the elements provided by the widget to be able to style the widget.

We recommend not hiding elements by the classes provided, but instead request configured email subscription widgets from our backend.