Issue with iFrame Notification Center's showUserPreferences Property

I am encountering an issue with the

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>

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.

Novu•3y ago•

1 reply

empe

Issue with iFrame Notification Center's showUserPreferences Property

I am encountering an issue with the

showUserPreferences

showUserPreferences

property in the iFrame notification center component.

Problem Description:

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>

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.

Issue with iFrame Notification Center's showUserPreferences Property

Problem Description:

Steps to Reproduce:

Expected Outcome:

Issue with iFrame Notification Center's showUserPreferences Property

Problem Description:

Steps to Reproduce:

Expected Outcome:

Similar Threads

Similar Threads

Similar Threads