Novu•3y ago

Issue with iFrame Notification Center's showUserPreferences Property

I am encountering an issue with the

showUserPreferences

showUserPreferences

showUserPreferences

showUserPreferences property in the iFrame notification center component.

Problem Description:

According to the release notes, the iFrame notification center component should support the showUserPreferences property as a boolean. However, when I attempt to use this property, it doesn't seem to work as expected.

Steps to Reproduce:

I have attached a snippet of my index.html file below, which includes the configuration for the iFrame notification center:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <title>iFrame Quickstart</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: top;
            min-height: 100vh;
        }

        .container {
            text-align: center;
            padding: 20px;
            border-radius: 10px;
            background-color: #ffffff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333333;
        }

        p {
            color: #666666;
            line-height: 1.6;
        }

        .fa {
            cursor: pointer;
        }

        .fa:hover {
            color: #0056b3;
        }
    </style>
</head>

<body>

    

    <div class="container">
        <h1>iFrame Notification Center Icon Bell</h1>
        <div id="notification-bell">
            <i class="fa fa-bell fa-2x"></i>
            <span id="unseen-badge"></span>
        </div>
        <p>Click on the notification bell to see the feed</p>
    </div>
    </div>

        <script>
  (function(n,o,t,i,f) {
    n[i] = {}; var m = ['init', 'on']; n[i]._c = [];m.forEach(me => n[i][me] = function() {n[i]._c.push([me, arguments])});
    var elt = o.createElement(f); elt.type = "text/javascript"; elt.async = true; elt.src = t;
    var before = o.getElementsByTagName(f)[0]; before.parentNode.insertBefore(elt, before);
  })(window, document, 'https://embed.novu.co/embed.umd.min.js', 'novu', 'script');

novu.init(
  '<APPLICATION_IDENTIFIRE>',
  {
    
    showUserPreferences: false,
    unseenBadgeSelector: '#unseen-badge',
    bellSelector: '#notification-bell',
    colorScheme: 'light',
  },
  {
    subscriberId: '<SUBSCRIBERID',
  }
);

</script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <title>iFrame Quickstart</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: top;
            min-height: 100vh;
        }

        .container {
            text-align: center;
            padding: 20px;
            border-radius: 10px;
            background-color: #ffffff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333333;
        }

        p {
            color: #666666;
            line-height: 1.6;
        }

        .fa {
            cursor: pointer;
        }

        .fa:hover {
            color: #0056b3;
        }
    </style>
</head>

<body>

    

    <div class="container">
        <h1>iFrame Notification Center Icon Bell</h1>
        <div id="notification-bell">
            <i class="fa fa-bell fa-2x"></i>
            <span id="unseen-badge"></span>
        </div>
        <p>Click on the notification bell to see the feed</p>
    </div>
    </div>

        <script>
  (function(n,o,t,i,f) {
    n[i] = {}; var m = ['init', 'on']; n[i]._c = [];m.forEach(me => n[i][me] = function() {n[i]._c.push([me, arguments])});
    var elt = o.createElement(f); elt.type = "text/javascript"; elt.async = true; elt.src = t;
    var before = o.getElementsByTagName(f)[0]; before.parentNode.insertBefore(elt, before);
  })(window, document, 'https://embed.novu.co/embed.umd.min.js', 'novu', 'script');

novu.init(
  '<APPLICATION_IDENTIFIRE>',
  {
    
    showUserPreferences: false,
    unseenBadgeSelector: '#unseen-badge',
    bellSelector: '#notification-bell',
    colorScheme: 'light',
  },
  {
    subscriberId: '<SUBSCRIBERID',
  }
);

</script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <title>iFrame Quickstart</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: top;
            min-height: 100vh;
        }

        .container {
            text-align: center;
            padding: 20px;
            border-radius: 10px;
            background-color: #ffffff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333333;
        }

        p {
            color: #666666;
            line-height: 1.6;
        }

        .fa {
            cursor: pointer;
        }

        .fa:hover {
            color: #0056b3;
        }
    </style>
</head>

<body>

    

    <div class="container">
        <h1>iFrame Notification Center Icon Bell</h1>
        <div id="notification-bell">
            <i class="fa fa-bell fa-2x"></i>
            <span id="unseen-badge"></span>
        </div>
        <p>Click on the notification bell to see the feed</p>
    </div>
    </div>

        <script>
  (function(n,o,t,i,f) {
    n[i] = {}; var m = ['init', 'on']; n[i]._c = [];m.forEach(me => n[i][me] = function() {n[i]._c.push([me, arguments])});
    var elt = o.createElement(f); elt.type = "text/javascript"; elt.async = true; elt.src = t;
    var before = o.getElementsByTagName(f)[0]; before.parentNode.insertBefore(elt, before);
  })(window, document, 'https://embed.novu.co/embed.umd.min.js', 'novu', 'script');

novu.init(
  '<APPLICATION_IDENTIFIRE>',
  {
    
    showUserPreferences: false,
    unseenBadgeSelector: '#unseen-badge',
    bellSelector: '#notification-bell',
    colorScheme: 'light',
  },
  {
    subscriberId: '<SUBSCRIBERID',
  }
);

</script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <title>iFrame Quickstart</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: top;
            min-height: 100vh;
        }

        .container {
            text-align: center;
            padding: 20px;
            border-radius: 10px;
            background-color: #ffffff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333333;
        }

        p {
            color: #666666;
            line-height: 1.6;
        }

        .fa {
            cursor: pointer;
        }

        .fa:hover {
            color: #0056b3;
        }
    </style>
</head>

<body>

    

    <div class="container">
        <h1>iFrame Notification Center Icon Bell</h1>
        <div id="notification-bell">
            <i class="fa fa-bell fa-2x"></i>
            <span id="unseen-badge"></span>
        </div>
        <p>Click on the notification bell to see the feed</p>
    </div>
    </div>

        <script>
  (function(n,o,t,i,f) {
    n[i] = {}; var m = ['init', 'on']; n[i]._c = [];m.forEach(me => n[i][me] = function() {n[i]._c.push([me, arguments])});
    var elt = o.createElement(f); elt.type = "text/javascript"; elt.async = true; elt.src = t;
    var before = o.getElementsByTagName(f)[0]; before.parentNode.insertBefore(elt, before);
  })(window, document, 'https://embed.novu.co/embed.umd.min.js', 'novu', 'script');

novu.init(
  '<APPLICATION_IDENTIFIRE>',
  {
    
    showUserPreferences: false,
    unseenBadgeSelector: '#unseen-badge',
    bellSelector: '#notification-bell',
    colorScheme: 'light',
  },
  {
    subscriberId: '<SUBSCRIBERID',
  }
);

</script>

</body>

</html>

As shown in the script section of the HTML file, I have initialized the iFrame notification center with the showUserPreferences property set to false. However, the property doesn't seem to be taking effect as intended.

Expected Outcome:

I expect that when the showUserPreferences property is set to false, the user preferences should not be displayed, but it doesn't work as expected.

Pawan Jain•12/22/23, 5:07 AM

@Emil looks like a bug

Issue with iFrame Notification Center's showUserPreferences Property

Problem Description:

Steps to Reproduce:

Expected Outcome:

Similar Threads

Similar Threads

Similar Threads