Viessmann Bell Notifications Module

This is a module to be used along with Viessmann Global Header module. Use it as in the same way as built-in components of the global header. Before following any of the Bell related instructions be sure to first follow all instructions in Global Header.

Preparation

Angular Library

Install the library with npm/yarn (or download it from here):

yarn add @vi/fe-bell

add the following to your NgModule

import { BellModule } from '@vi/fe-bell';
@NgModule({
  declarations: [...],
  imports: [
    ...
    BellModule.forRoot({
      // (environment.ts)
      baseUrl: 'https://api-integration.viessmann.com',
      accountAppUrl: 'https://account-integration.viessmann.com'
    })
  ],
  providers: [...]
})
export class MyModule

Since both GlobalHeaderModule and BellModule share the config, you can just reuse the same object.

Web Component

Add following code to your index.html header:

<head>
...

    <script defer src="https://fe-bell-integration.viessmann.com/elements.js"></script>
    <link rel="stylesheet" type="text/css" href="https://fe-bell-integration.viessmann.com/styles.css">

...
</head>

In Angular apps using the web component you need to add following code to the regarding module (this is NOT required if you use the angular library):

schemas: [CUSTOM_ELEMENTS_SCHEMA]

Example implementation:

@NgModule({
      declarations: [],
      imports: [],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SomeModule {}

Component usage

Regardless of whether you are using the web component or the angular library, you can now just add the components into your html template:

<vih-bell></vih-bell>

The component will work along with Global Header login services.

Handling event click

Anytime notification is clicked event `notificationClick` is emitted.
By default for each click automatically bell will open link form event ctaUrl in new browser tab.
To stop this behavior set in component property [handleClicks]=false or for web component usages: handle-clicks="false" Payload of this notification contain all details of emitted notification. You can explore content of payload in this demo page by clicking on some notification with open console. If component is integrated as angular, it can be integrated using angular output property with same name.
For web component based application it can be subscribed using addEventListener method.


<div class="navbar">
    <vih-login id="vihLogin"></vih-login>
</div>

<script>
    viBellElement = document.getElementById('viBell');

    viBellElement.addEventListener('notificationClick', (event) => {
        console.log('Notification clicked!', event.detail);
    });
</script>

If you wish to open link based on notification call-to-action url you can do that by setting your event handler to


window.open(event.detail.ctaUrl, '_blank');

Enable default behavior for this demo. (Define value for "handle-clicks")

Handling unread notification count event

Whenever:

bell module finish read data and there are unread notification for user
new notification is received
notification is marked as read

Event is emitted called unreadNotificationsCount.
This can be used for example to update page title. This demo page implement dynamic title change this way:


viBellElement = document.getElementById('viBell');
viBellElement.addEventListener('unreadNotificationsCount', ({ detail: notificationCount }) => {
    if (notificationCount) {
        document.title = `🚨 (${notificationCount}) Bell Module`;
    } else {
        document.title = `Bell Module`;
    }
});