Background

One of our larger customers wanted us to make a subscription management system that could be integrated into their own platform. We would have to monitor their feeds for new publications and send these out as emails to their subscribers. These subscribers would have to be able to subscribe to all kinds of newsletters and subjects while also specifying the frequency on which they would like to receive these publications: immediately, as a daily summary or as a weekly summary. The subscribers and their interests would then have to be used by our existing email software products to send out these mailings.

The customer however, had a large number of websites on their platform and they were going to add even more in the future. They wanted their subscribers to be able to manage their subscriptions for each of these websites. Because of the large amount of websites available, the customer requested an easy way to integrate the subscription management forms into their websites. Since the subscribers and interests were stored in the databases of our own products, we were responsible for the development of these forms.

Solution

De solution was to develop a JavaScript client that could easily be integrated into the customer's websites.

The client was built with the Vue.js framework and communicates with a custom made ASP.NET Web API that processes the form input.

Usage

The customer initializes the client on one of their websites and supplies the client with a context and additional parameters. The context specifies which form the user will see on the website. For a newsletter subscribe page for example, the associated context will be supplied with a parameter that specifies for which newsletter the subscription should happen. The client also allows a user to manage these subscriptions for the website they are on.

Communication between client and API

The forms and their HTML are included with the client itself. The content of these forms, such as the texts, which subscriptions the user has or which newsletter they are subscribing to, is supplied by the API. The forms are generated by the client and form validation is done both by the client and the API. The forms are processed by the API, which tells the client how to proceed. For example, it may tell the client to show a confirmation page or a different form. The API also checks if it is permitted to load the client on the current website, by checking if the website is known and has a valid configuration.

Multilingualism

The client also supports multiple languages. During initialization, the API supplies the client with the correct translation files for the language of the website where the client is being initialized. The customer does supply a fallback language to the client in case there is a problem with communicating with the API and an error message needs to be shown.