# MFN Loader

## Description

The MFN Loader is a script that loads in the MFN news feed for a customer from our On-Demand API. It enables you to configure and easily customize the design of the news feed, and it has several filtering options, tags, locale/language support and built in pagination.

## Getting started

To quickly get started with the integration you can fetch our pre-made integration template here that already has a default CSS stylesheet setup which you can to start from:

{% hint style="info" %}
This can also be downloaded from the Integration PDF and will then contain FEED\_ID's automatically. 

Use the preview version from the PDF to decide witch theme to use.
{% endhint %}

{% hint style="info" %}
[mfn-loader.zip](https://widget.mfn.se/v1/serve/%3CFEED_ID%3E/mfn-loader.zip)
{% endhint %}

1. Download the zip package from the link above and extract the content 

* **assets** (Folder containing linkedin logo)
* **themes (**Folder containing CSS themes)
  * **default** (Folder)
  * **flat** (Folder)
  * **grid** (Folder)
* *disclaimer.html* (A customizable Disclaimer template)
* *list.html* (HTML template with configuration options for the news list)
* *list\_flat.html* (HTML template with configuration options for the news list)
* *list\_grid.html* (HTML template with configuration options for the news list)
* *list\_multi.html* (A template with multiple instances of a news list)
* *single.html* (HTML template with configuration options for a single news item)

2. Then edit both `list.html` and `single.html` and replace the text **\<FEED\_ID>** with your Feed ID which you received from us
3. Enter your own single\_view\_url (Path to the page where a single view version has been implemented) in list.html
4. Upload the files to your server (remote or locally)
5. Go `https://<your_server>/list.html` to view the example integration

Now you should see a list of the news items and can proceed with configuring, tailoring and styling the integration. The process is described in detail further down in this documentation.

## Usage

In order to use the loader you will need to implement and configure two HTML template files:

1. **list.html** (The file that handles configuration for the news feed list page and what information/elements will be rendered)
2. **single.html** (The file that handles configuration for a single news item

In the `list.html` template configuration (Which is the main file) you define the path to the HTML file of the single news item template, this would be 'single.html'.

Below we provide the HTML code to the files that implements the loader.

### list.html (Example)&#x20;

(HTML template for the list view)

```javascript
<!-- The container(s) where the content will end up -->
<div id="container"></div>

<script type="application/javascript">
    // Implements the MFN Loader javascript file
    if (!window._MFN) {
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = "https://widget.mfn.se/v1/serve/assets/js/mfn-loader-v0.3.3.js";
        s.async = true;
        document.getElementsByTagName("body")[0].appendChild(s);
    }

    window._MFN = {
        //See all available parameters
        //https://modfin.gitbook.io/mfn-integration-guide/-MbDBLBpI3LuyvwyWLVw/integration-methods/mfn-js-loader#list-options

        // Element where the news feed should end up
        outlet: '#container',

        // Default language of the news items shown
        lang: 'all',

        // Filter feed on type: "all",  "ir", "pr"
        type_filter: 'all',

        // 'selected' uses locale from lang, other options are 'en', 'sv' eg.
        // and so on
        l10nLang: 'en',

        // The type of view
        type: 'listview',

        // Feed ID, provided by MFN
        feed_id: '<FEED_ID>',

        // Path to the page where a single view version has been implemented
        single_view_url: 'single.html',

        // Enable if you want to activate a disclaimer page for news items
        // of a specific tag
        
        //disclaimer_redirect_tag: 'cus:disclaimer',
        //disclaimer_redirect_url: 'disclaimer.html',
        

        // Default limit of items shown
        limit: 10,

        // Adds a summary of the article
        show_summary: true,

        // Set preferred length of the summary, default: 250
        // summary_len: 100,

        // Cut length of summary to 'summary_len'
        // good if you want to prevent long text, eg Disclaimer
        summary_cut: true,

        // 'default' (:regulatory, sub:report:interim, sub:report:annual)
        // or add your own eg [{tag: ':regulatory'}]
        show_tags: [{tag: ':regulatory'},{tag: 'sub:report:interim'},{tag: 'sub:report:annual'}],

        // Show attachments
        show_attachments: true,

        // Enable clickable tags
        clickable_tags: true,

        // Query Param Prefix, to prevent 404 in for example wordpress that also uses 'year' for other purposes
        // query_param_prefix: 'mfn-',

        // Show additional filter info, default: false
        show_info: false,

        // Show not found element, default: false
        show_notfound: true,

        // Override default 'not found' element
        // notfound_tmpl: {
        //  en: '<div class="mfn-notfound"><span>Couldn\'t find any news articles.</span></div>',
        // },

        // Should most likely be true (Enables proxy attachments)
        use_proxied_attachment_urls: true,

        // Show current page in pagination
        show_current_page: true,

        // Show timestamp
        show_date: true,
        hide_date_field: false,
        hide_time_field: false,
        date_time_separator: '&nbsp;',

        // Show read more link
        show_read_more: true,

        // Toolbar
        // Note: you can hide the toolbar by uncommenting it, and instead perhaps use 'tags' below for a default filter
        toolbar: [
            {
                // show search
                item: 'search',
                // if true an Ajax search is added to the search bar
                live_search: true,
                // the debounce time for the ajax search if enabled
                live_search_delay: 300,
                // save space by combining search field, search button and clear button
                slim_mode: false,
                // auto hides the clear button
                auto_hide_clear_button: true
            },
            // 'default' or [{tag: ':regulatory'}, {type: 'pr'}] etc.
            {item: 'category', items: 'default'},
            // UK integration, if if these categories are used, translations must also be made. "l10n"
            //{item: 'category', items: [{tag: 'ext:nsm:acs'},{tag: 'ext:nsm:dsh'},{tag: 'ext:nsm:tvr'},{tag: 'ext:nsm:boa'},{tag: 'ext:nsm:hol'},{tag: ':regulatory'},{tag:'sub:ci:gm'},{tag: ':regulatory:mar'},{tag: 'sub:report:interim'},{tag:'ext:nsm:tst'}]},
            {item: 'year', start: 2015},
            // UK integration, the item: 'lang' row could be commented to remove the year selector in the toolbar
            {item: 'lang', languages: ['sv', 'en']},
            {item: 'clear'}
        ],

        // Shows for example 'All (Categories)' in select inputs (Default)
        show_select_info: true,

        // Filter feed by the following tags
        // Typical use cases:
        // * Setting the default filtering in the toolbar
        // * For custom 'listview' without a toolbar where you want to choose what to filter by in code
        // tags: [':regulatory'],

        // Your own local to override text selection or add for
        // other l10n languages (For the toolbar text and tags)
        l10n: {
            'Search': {
                sv: 'Sök',
                en: 'Search'
            },
            'Search placeholder': {
                sv: 'Sök',
                en: 'Search'
            },
        // UK integration uncomment this  
        //     'sub:ci:gm': {
        //        en: 'Shareholder Meetings'
        //    },
        //     ':regulatory:mar': {
        //        en: 'Contains inside information'
        //    },
        //     'sub:report:interim': {
        //        en: 'Results announcement'
        //    }    
        },
        

        //Configuring your own time and date:
        //https://modfin.gitbook.io/mfn-integration-guide/-MbDBLBpI3LuyvwyWLVw/integration-methods/mfn-js-loader#date-configuration

        // Example of implementing your own HTML for a news item
        // post_processor: function(current, item) {
        //  console.log(item);
        //     return '<div>' + item.content.title + '</div>';
        // }

    }
</script>
```

### single.html

(HTML template for single view)

```javascript
//Example CSS exists in zip in themes and can be added example in a <style> tag

<!-- The container where the content will end up -->
<div id="container"></div>


<script type="application/javascript">
    // Implements the MFN Loader javascript file
    if (!window._MFN) {
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = "https://widget.mfn.se/v1/serve/assets/js/mfn-loader-v0.3.3.js";
        s.async = true;
        document.getElementsByTagName("body")[0].appendChild(s);
    }

    window._MFN = {
        //See all available parameters
        //https://modfin.gitbook.io/mfn-integration-guide/-MbDBLBpI3LuyvwyWLVw/integration-methods/mfn-js-loader#single-options

        // The selector of the element where the content of the
        // single news item should end up
        outlet: '#container',

        // The type of view
        type: 'singleview',

        // Default language of the news item shown
        lang: 'all',

        // 'selected' uses locale from lang, other options are 'en', 'sv' eg.
        // and so on
        l10nLang: 'en',

        // Feed ID, provided by MFN
        feed_id: '<FEED_ID>',

        // Show timestamp and edit format
        show_date: true,
        hide_date_field: false,
        hide_time_field: false,
        date_time_separator: ' ',

        // Show primary image
        show_primary_image: true,

        // Optionally add a prefix to the tab title (Meta description)
        title_prefix: 'Press release / ',

        // 'default' or eg [{tag: ':regulatory'}]
        show_tags: [{tag: ':regulatory'}, {tag: 'sub:report:interim'}, {tag: 'sub:report:annual'}],

        // Should most likely be true
        use_proxied_attachment_urls: true,

        // Show attachments from API & hides attachments footer
        show_attachments: false,

        // if attachments should be displayed as thumbnails (Default as links)
        // (To ensure high quality thumbnails on high resolution devices, we recommend using max size using CSS)
        show_attachment_thumbnail: true,

        // configurating your own time and date:
        //https://modfin.gitbook.io/mfn-integration-guide/-MbDBLBpI3LuyvwyWLVw/integration-methods/mfn-js-loader#date-configuration

        // Example of implementing your own HTML for a news item
        // post_processor: function(current, item) {
        //  console.log(item)
        //     return '<div>' + item.content.title + '</div>'
        // },

        // Enable if you want block the 'singleview' and instead to forward to the 'disclaimer' page
        // when the user tries to visit the 'singleview' page without first approving the disclaimer
        //disclaimer_redirect_tag: 'cus:disclaimer',
        //disclaimer_redirect_url: 'disclaimer.html',

    }
</script>
```

```html
```

## Customization

The MFN Loader gives you a flexible way to implement your news feed into a div element on your page. There are many customization options available for you in order to setup the feed as you like. Below we list the different options available.

### List options

| Option                                                                                                        | Setting                                                                                          |
| ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| **outlet** (The selector of the element where the content of the news archive should end up)                  | eg. `#container`                                                                                 |
| **l10nLang** (The set language used by the loader itself)                                                     | eg. `selected` or `en`*,* `sv`                                                                   |
| **type** (The type of view)                                                                                   | eg `listview`                                                                                    |
| **baseUrl**(Define domain of feed request)                                                                    | eg. [`https://feed.mfn.se/compat/feed`](https://feed.mfn.modfin.se/compat/feed)                  |
| **feed\_id** (The Feed ID which we have provided)                                                             | eg. `c00f2147-e959-6d39-c36c-93f23051e24c`                                                       |
| **single\_view\_url** (Path to the page where a single view version has been implemented)                     | eg. `single-view.html`                                                                           |
| **disclaimer\_redirect\_tag** (Tag that triggers opening disclaimer template, when clicking on press release) | usually: `cus:disclaimer`                                                                        |
| **disclaimer\_redirect\_url** (The URL for the disclaimer template)                                           | eg. `disclaimer.html`                                                                            |
| **lang** (Default language of the news items shown)                                                           | eg. `sv`                                                                                         |
| **limit** (Default limit of amount of items shown)                                                            | eg. `20`                                                                                         |
| **show\_summary** (Shows a preamble/summary of the article)                                                   | `true` or `false`                                                                                |
| **summary\_len** (Set preferred length of the summary, default: 25&#x30;**)**                                 | eg. `100`                                                                                        |
| **summary\_cut** (Limit length of summary to 'summary\_len')                                                  | `true` or `false`                                                                                |
| **show\_tags** (Define which tags to be shown)                                                                | eg. `default` or `[{tag: ':regulatory'}]`                                                        |
| **tags** (Define which tags to be filtered on)                                                                | eg. `[':regulatory']`                                                                            |
| **show\_attachments** (Show attachments)                                                                      | `true` **or**  `false`                                                                           |
| **clickable\_tags** (If the tags in the list should be clickable)                                             | `true` or `false`                                                                                |
| **toolbar** (An array with objects of toolbar items)                                                          | See section ***Toolbar***                                                                        |
| **l10n** (Your own translations, to override text selection or add for other l10n languages)                  | eg. `{  'Search': { en: 'Search', sv: 'Sök' } }`                                                 |
| **show\_info** (Show additional filter info above the news list)                                              | `true` or `false`                                                                                |
| **show\_notfound** (Show 'not found' element if filter yield no results)                                      | `true` or `false`                                                                                |
| **notfound\_tmpl** (Override default 'not found' element)                                                     | eg. { en: `'<div class="mfn-notfound"></span>Couldn\'t find any news articles.</span></div>', }` |
| **use\_proxied\_attachment\_urls** (Enables proxy urls for attachment links, should most likely be *true*)    | `true` or `false`                                                                                |
| **show\_date** (Shows the date)                                                                               | `true` or `false`                                                                                |
| **show\_select\_info** (Shows for example 'All (Categories)' in select inputs)                                | `true` or `false`                                                                                |
| **date\_setting**                                                                                             | See section ***Date configuration***                                                             |
| **time\_setting**                                                                                             | See section ***Date configuration***                                                             |
| **show\_year\_headers** (Groups the items by year)                                                            | `true` or `false`                                                                                |
| **query\_param\_page\_name** (Changes the name of the query parameter used for pagination navigation)         | eg. `mfn_page` , default: `page`                                                                 |
| **show\_current\_page** (Show current page in the pagination)                                                 | `true` or `false`                                                                                |
| **hide\_date\_field** (Hide the date section of the date)                                                     | `true` or `false`                                                                                |
| **hide\_time\_field** (Hide the time section of the date)                                                     | `true` or `false`                                                                                |
| **date\_time\_separator** (Separator between date and time)                                                   | eg. `&nbslp;`                                                                                    |
| **type\_filter** (Filter feed by item type)                                                                   | eg. `"pr"` or `"ir"`                                                                             |
| **show\_read\_more** (Show read more link on default view items)                                              | `true` or `false`                                                                                |

### Single options

| Option                                                                                                                     | Setting                                                                                                                                                                 |
| -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **outlet** (The selector of the element where the content of the news archive should end up)                               | eg. `#container`                                                                                                                                                        |
| **type** (The type of view)                                                                                                | eg. `singleview`                                                                                                                                                        |
| **l10nLang** (The set language used by the loader itself)                                                                  | eg. `selected` or `en`, `sv`                                                                                                                                            |
| **feed\_id** (The Feed ID which we have provided)                                                                          | eg. `c00f2147-e959-6d39-c36c-93f23051e24c`                                                                                                                              |
| **lang** (Default language of the news items shown)                                                                        | eg. `sv`                                                                                                                                                                |
| **show\_tags** (Define which tags to be shown, default are: ":regulatory", "sub:report:annual" and "'sub:report:interim" ) | eg. `default` or `[{tag: ':regulatory'}]` See the detailed tag definition list [**here**](https://modfin.gitbook.io/mfn/-LRMjppiwci9_gPjsMUx/models/news-item#model-3). |
| **show\_attachment\_thumbnail** (If attachments should show as thumbnails instead of regular links)                        | `true` **or** `false`                                                                                                                                                   |
| **attachment\_thumbnail\_size** (Preferred attachment thumbnail size)                                                      | eg. `200`                                                                                                                                                               |
| **use\_proxied\_attachment\_urls** (Enables proxy urls for attachment links, should most likely be *true*)                 | `true` or `false`                                                                                                                                                       |
| **show\_date** (Shows the date)                                                                                            | `true` or `false`                                                                                                                                                       |
| **hide\_date\_field** (Hide the date section of the date)                                                                  | `true` or `false`                                                                                                                                                       |
| **hide\_time\_field** (Hide the time section of the date)                                                                  | `true` or `false`                                                                                                                                                       |
| **date\_time\_separator** (Separator between date and time)                                                                | `true` or `false`                                                                                                                                                       |
| **title\_prefix** (Optionally add a prefix to the tab title Meta description)                                              | eg. `'Press release / ',`                                                                                                                                               |
| **show\_primary\_image** (Shows a primary image)                                                                           | `true` or `false`                                                                                                                                                       |
| **show\_linkedin\_share** (Show a LinkedIn share icon)                                                                     | `true` or `false`                                                                                                                                                       |

### Toolbar options

The toolbar includes a few different items. By removing and adding items, you can decide what items it will include on the page.

* **search** (*Show search input field*,  enable search, set search debounce time/delay)
* **category** (*Show category/tags select dropdown*, use default tags or set specific categories/tags to be in the list)
* **year** (*Show year select dropdown*, set start year which will populate a list until the current year)
* **lang** (*Show language select dropdown*, define languages to be in the dropdown)
* **clear** (*Show clear button*)

### **Toolbar**

```javascript
        // Toolbar
        // Note: you can hide the toolbar by uncommenting it, and instead perhaps use 'tags' below for a default filter
        toolbar: [
            {
                // show search
                item: 'search',
                // if true an Ajax search is added to the search bar
                live_search: true,
                // the debounce time for the ajax search if enabled
                live_search_delay: 300,
                // save space by combining search field, search button and clear button
                slim_mode: false,
                // auto hides the clear button
                auto_hide_clear_button: true
            },
            // 'default' or [{tag: ':regulatory'},
            // {tag: 'sub:report:interim'}] etc.
            {item: 'category', items: 'default'},
            {item: 'year', start: 2010},
            {item: 'lang', languages: ['sv', 'en']},
            {item: 'clear'}
        ],
```

### Translations

You can create your own translations and add several languages for the labels of items in the toolbar, as shown in example below. If not set, it will use our default translations.

```javascript
// Your own locale to override text selection or add for other l10n languages
l10n: {
    'Search': {
            en: 'Search',
            sv: 'Sök',
    }
},
```

### Date configuration

You can configure locale and time zone for the date or add a custom date formatter, as in the below example.

```javascript
// Example of configuring locale and time zone
date_setting : {
    locale: 'en-GB', // eg. for US 'en-US'
    option: {
        month: 'short', // or 'long', 'short'
        year: 'numeric', // or '2-digit'
        day: 'numeric', // or '2-digit'
        timeZone: 'Europe/London' // eg. 'America/New_York'
    }
},
time_setting: {
    locale: 'en-GB',
    option: {
        hour: '2-digit',
        minute: '2-digit',
        hour12: false, // 12-hour clock format
        timeZone: 'Europe/London'
    }
},

// If you want to implement your own custom date formatter
// you can add your own function
format_date: function(date) {
    return date.toLocaleTimeString('en-GB', {
        month: 'long',
        year: 'numeric',
        day: 'numeric',
        timeZone: 'Europe/London'
    });
},
```

(Read the reference [**here**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) **\*\*to learn more about setting up** toLocaleTimeString\*\*)

### Post processing

If you would like to implement your own HTML for a news item into the DOM you can use the post processor as shown below.

```javascript
// Example of implementing your own html for a news item
post_processor: function(current, item){
    console.log(item)
    return '<div>' + item.content.title + '</div>'
}
```

The post processor can also be used for just reordering or modifying the already generated DOM for the item as shown in this example that simply swaps the order of the title and the date.

```javascript
post_processor: function(current, item) {
  var div = document.createElement('div');
  div.innerHTML = current;
  var d = div.querySelector('.mfn-date');
  var t = div.querySelector('.mfn-title');
  div.firstElementChild.prepend(d);
  div.firstElementChild.prepend(t);
  return div.innerHTML;
}
```

## Styling / Themes

As all elements has classes with name convention starting with 'mfn-', it is easy to add your own CSS to change the look of the news list and a single news item, to match your current website theme and design.

Example:

```css
/* Content */
.mfn-loader-list-container .mfn-content {
    font-family: Inter, sans-serif;
}

.mfn-loader-list-container .mfn-preamble {
    font-size: 14px;
    font-weight: 300;
    line-height: 19px;
    padding-right: 5%;
    margin-top: 2px;
}

.mfn-loader-list-container .mfn-tags-list {
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    margin: 2px 0 2px 0;
}

...
```

We also provide a couple of CSS themes for the List template, to make it easier to choose the right direction style-wise when integrating the MFN Loader:

* Default (is used in **list.html**)
* Flat (Theme which is optimised for minimalistic design which is content focused, is used in **list\_flat.html**)
* Grid (Theme which is optimised for a PR-view with images, is used in **list\_grid.html**)

{% hint style="info" %}
Feel free to use our styling, but don't forget to add the company's graphical profile!
{% endhint %}

## Pagination

The loader has a built-in pagination, and 'Previous' and 'Next' buttons are visible depending on the amount of items in the list shown, which is determined by the 'limit' value. You can customize the button design with CSS by targeting the classes `mfn-prev` and `mfn-next`

## Disclaimer

This section goes through how you enable a Disclaimer-functionality in the MFN Loader.

#### Disclaimer config

To make it possible to prevent direct accessing a specific press release and instead redirect to a "Disclaimer wall" before being able to view it, we've built in some extra functionality and added a couple of additional options to the config:

```
disclaimer_redirect_tag: 'cus:disclaimer',
disclaimer_redirect_url: 'disclaimer.html',
```

The first, `disclaimer_redirect_tag` is to specify the tag which will trigger the redirect to the Disclaimer wall. The tag "cus:disclaimer" is a custom tag that's included in certain press releases that should be behind a disclaimer.

The second, `disclaimer_redirect_url` is which URL/html-page it will redirect to.

{% hint style="info" %}
It is important to add these config options both to the list.html and single.html-template in order to prevent direct access to the single release.
{% endhint %}

#### Disclaimer-form template

We provide a sample Disclaimer-form template `disclaimer.html` to simplify adding a "disclaimer wall" to a particular release in the press releases list. The disclaimer.html-file is a modified single.html-template that has some additional javascript code and example HTML in it to handle the logic of going to the next steps and handles redirecting you back to the press release when done.

It consists of two parts. The first is a placeholder div for the introduction text and has a dropdown for selecting the country the user resides in together with a continue button. If a country is selected that is not included in the array of allowed countries it will show a div with an error. Else it will continue to the second part.

The second part shows a placeholder for a complete legality text and has a container which renders two radio buttons, to either confirm or deny the terms. If you deny you cannot proceed to the next page, if you accept it will proceed to show the single press release.

## Example IPO page behind disclaimer

If a disclaimer wall is required to be added to a specific page, for example related to an IPO, inspiration can be taken from the basic and plain javascript implementation below. It covers the important parts regarding a disclaimer wall.

```javascript
/**
 * Below is a variable list with corresponding examples from the basic 
 MFN-loader setup
 * <single-page-item-path>: slug
 * <item-disclaimer-tag>: cus:disclaimer
 * <disclaimer-page>: disclaimer.html
 * <single-page>: single.html
 * <list-page>: list.html
 * <disclaimer-accept-button-id>: id of your disclaimer accept button
 * <disclaimer-disclaimer-button-id>: id of your disclaimer decline button
 */
```

{% code overflow="wrap" lineNumbers="true" %}

```javascript
function disclaimer_check() {
  var disclaimerAccepted = localStorage.getItem("disclaimer-ipo-page")

  if (!disclaimerAccepted) {
    window.location.href = "mock-ipo-disclaimer.html"
  }
}
```

{% endcode %}

{% code overflow="wrap" lineNumbers="true" %}

```javascript
function disclaimer_approve() {
    document.getElementById("mfn-accept-disclaimer-button").addEventListener("click", () => {
      localStorage.setItem("disclaimer-ipo-page", "accepted")
      window.location.href = "mock-ipo-page.html"
    })

    document.getElementById("mfn-decline-disclaimer-button").addEventListener("click", () => {
      localStorage.removeItem("disclaimer-ipo-page")
      // note that this is not part of the example, but should route to some place where the user should end up if the disclaimer is denied
      window.location.href = "landing-page.html"
    })
}
```

{% endcode %}

The **disclaimer\_check()** function should be inserted on your sensitive page in a way that it always runs on load and before the information is shown. \
The **disclaimer\_approve()** function should be inserted into your disclaimer html so that the click listeners correctly attach to whatever element handles the accept/decline actions.

To further illustrate the implementation, we have provided a very minimal mock of a sensitive page together with a disclaimer page.

### Disclaimer page <a href="#page-behind-disclaimer" id="page-behind-disclaimer"></a>

{% code title="mock-disclaimer.html" overflow="wrap" lineNumbers="true" %}

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Disclaimer page</title>
</head>
<body>
<div id="disclaimer-step-one">
    <h1>Disclaimer</h1>
    <p>Your disclaimer text goes here</p>
    <select id="disclaimer-country">
        <option selected="" disabled="" value="">Choose</option>
        <option value="AU">Australia</option>
        <option value="CA">Canada</option>
        <option value="NZ">New Zealand</option>
        <option value="EEAQI">EEA (Qualified Investor)</option>
        <option value="EEANQI">EEA (not a Qualified Investor)</option>
        <option value="HK">Hong Kong</option>
        <option value="JP">Japan</option>
        <option value="UKQIRP">United Kingdom (Qualified Investor and Relevant Person)</option>
        <option value="UKNQIRP">United Kingdom (not a Qualified Investor or not a Relevant Person)</option>
        <option value="US">United States of America</option>
        <option value="SE">Sweden</option>
        <option value="OTHER">Other countries</option>
    </select>
    <button id="mfn-submit-step-one" type="submit" disabled>Continue</button>
</div>
<div id="disclaimer-step-error" style="display: none">
    <h1>Disclaimer – Important</h1>
    <p>Due to applicable legal restrictions, the information contained in this section of the website is restricted and is not for release,
        publication or distribution, directly or indirectly, in whole or in part, in or into the United States of America
        (including its territories and possessions, any state of the United States and the District of Columbia), Australia,
        Canada, New Zealand, Hong Kong or Japan, or any other jurisdiction in which such release, publication or distribution might constitute
        a violation of the local securities laws or regulations of such jurisdiction.</p>
</div>
<div id="disclaimer-step-two" style="display: none">
    <h1>Disclaimer part 2</h1>
    <p>Your disclaimer text goes here</p>
    <div id="wrapper">
        <!-- The container where the content will end up -->
        <button id="mfn-accept-disclaimer-button">Accept</button>
        <button id="mfn-decline-disclaimer-button">Decline</button>
    </div>
</div>
</body>
<script type="application/javascript">
  var country = document.getElementById("disclaimer-country");
  var btn1 = document.getElementById("mfn-submit-step-one");
  country.addEventListener('click', () => {
    if (country.value !== "") {
      btn1.removeAttribute('disabled')
    }
  })

  function disclaimer_approve() {
    document.getElementById("mfn-accept-disclaimer-button").addEventListener("click", () => {
      localStorage.setItem("disclaimer-ipo-page", "accepted")
      window.location.href = "mock-ipo-page.html"
    })

    document.getElementById("mfn-decline-disclaimer-button").addEventListener("click", () => {
      localStorage.removeItem("mock-ipo-page.html")
      // note that this is not part of the example, but should route to some place where the user should end up if the disclaimer is denied
      window.location.href = "landing-page.html"
    })
  }

  btn1.onclick = function() {
    if (["US","AU","CA","HK","JP","NZ","EEANQI","UKNQIRP"].filter(function (x) {return x === country.value}).length === 0) {
      document.getElementById("disclaimer-step-one").style.display = 'none';
      document.getElementById("disclaimer-step-two").style.display = 'block';
      disclaimer_approve()
    } else {
      document.getElementById("disclaimer-step-one").style.display = 'none';
      document.getElementById("disclaimer-step-error").style.display = 'block';
    }
  };

</script>
</html>
```

{% endcode %}

### Page behind disclaimer <a href="#page-behind-disclaimer" id="page-behind-disclaimer"></a>

{% code title="mock-ipo-page.html" overflow="wrap" lineNumbers="true" %}

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IPO Information</title>
</head>
<body>

<div>
    <h3 id="ipo-title"></h3>
    <p id="ipo-info"></p>
</div>

<script>
  function check_disclaimer() {
    var disclaimerAccepted = localStorage.getItem("disclaimer-ipo-page")

    if (!disclaimerAccepted) {
      window.location.href = "mock-disclaimer.html"
    }
  }

  check_disclaimer()

  // mock fetching content here
  const contentFromServer = {
    title: "IPO information page",
    info: "Sensitive information that must be behind disclaimer wall"
  }
  document.getElementById("ipo-title").innerHTML = contentFromServer.title
  document.getElementById("ipo-info").innerHTML = contentFromServer.info

</script>

</body>
</html>
```

{% endcode %}