<title>Notifuse Widget example</title>
<link id="favicon" rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<script src="https://notifuse.com/widget/widget2.min.js"></script>
<h1>Notifuse Widget example</h1>
<p style="text-align: right">
<span id="notifuse-bell">
<svg aria-hidden="true" style="cursor: pointer; width: 26px; height: 30px; color: #673AB7" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-bell fa-w-14 fa-fw fa-lg"><path fill="currentColor" d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z"></path></svg>
<script type="text/javascript">
// customize the projectId, userId and userHmac with
projectId: 'YOUR_PROJECT_ID',
userHmac: 'd1c9261eda09528b4d6bd73fe9c371b41989123a711de2a88c54e0a7dab16b70',
onClickMessage: (message) => {
console.log('got click on message', message);
switch (message.notificationId) {
console.log('notification not implemented', notificationId);
bellSelector: '#notifuse-bell',
faviconSelector: '#favicon',
container: "my-container-class"
markAllAsRead: "Tout marquer comme lu",
empty: "No more stuff..."