How do I create the bell icon for signed in users notifications?

6 Comentários

  • Ryan

    Hello all...

    I've been working on notifications for quite some time. You'll see me chiming in on threads here and there. I've done some code lurking and like as Nichole pointed out its an API pull that shows recent updates. Strangely, I always have six notifications and their are only one or two are for things I'm following. I'm assuming that the others are dictated by zendesk.

    In our case, we want to push out notifications for announcements and subscription activity. I have our dictated announcements working, but for the recent subscription activity, we've hit a wall with zendesk. Our user feedback has been that they don't subscribe to items because they get too many emails. Our natural thought was to create notifications, but apparently, there is no way (custom or otherwise) to prevent zendesk from sending emails based on your subscriptions. That makes the subscription notifications pointless for us. Our customers already don't like the email notifications so I don't want to bombard them with in-app notifications as well. 

    I'll try and lay out the code for our dictated notifications below. Basically, we add the tag "notify" to an article, use the API to pull any article with that tag and create a list. The list is checked against local storage data to see if the item has already been viewed by the user. If the item is on the list and the user has not viewed it, it will show up as a notification. If no notifications exist the notification icon is hidden.

    This is located in the header.hbs. It makes the API call, checks the data against the local storage and writes the data to your notification drop-down.

    <script>
    $.get( "/api/v2/help_center/articles.json?label_names=notify" ).done(function( data ) {
    $.each(data.articles, function(index,item) {
    var checkStat = item.id
    var notify1 = '<li id="'+ item.id + '"><p><a href="'+ item.html_url + '">' + item.title + '</a>' + '</p></li>'
    if (localStorage.getItem(checkStat) === null)
    $('.notify-dropdown-content ').append(notify1);
    if ($(".notify-dropdown-content").text().length > 0)
    $("#notify-status").removeClass("notify-empty");
    });
    });
    </script>

    Also in header.hbs this is the notification dropdown. Place it where you would like your notification dropdown to appear.

    <div id="notify-status" class="notify-empty">
    <div class="notify-dropdown">
    <button class="dropbtn"><i class="material-icons">notification_important</i></button>
    <ul class="notify-dropdown-content"> </ul>
    </div>
    </div>

    On the article_page.hbs this code adds a localstorage entry in the browser to prevent the notification from showing over and over after it has been viewed by the user. *Typically by the time the localstorage entry expires, the article has been archived or the tag has been removed.

    <script>
    var notif = "{{article.id}}";
    </script>
    {{#each article.labels}}
    {{#is identifier 'notify'}}
    <script>
    localStorage.setItem(notif, "true");
    </script>
    {{/is}}
    {{/each}}
    </script>

    Lastly, the style.css (kinda plain for the moment, but it gets the job done)

    .dropbtn {
    background-color: #2DC456;
    color: white;
    justify-content: center;
    font-size: 16px;
    border: none;
    cursor: pointer;
    height: 36px;
    }

    .notify-dropdown {
    display: inline-block;
    }

    .notify-dropdown-content {
    display: none;
    position: absolute;
    background-color: #2DC456;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    }

    .notify-dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: underline;
    display: block;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .notify-dropdown:hover .notify-dropdown-content {
    display: block;
    }

    .notify-dropdown:hover .dropbtn {
    background-color: #3e8e41;
    }

    .notify-empty {
    display: none;
    }



    I think thats all of it.. if you have any questions, I'm happy to answer them!

    ~Ryan~
     

    1
  • Jeremy Robinson

    Melody Quinn this is something that I was looking to do for our Zendesk Guide as well (before becoming a Moderator for Zendesk), and posted about a few months ago.

    It appears to be a custom-coded option, and not an OOTB (Out Of The Box) solution in Zendesk currently. Feel free to add additional comments and votes as desired:

    https://support.zendesk.com/hc/en-us/community/posts/360037094574-How-can-we-implement-the-Notifications-option-in-Guide-to-show-recent-activity-on-items-followed-etc-

    You may need to leverage some internal resources depending on your comfort level with the API and custom code to pull the details you wish to display in the Notifications and aligning it properly, or work with Zendesk's Services team to engage in discussions around custom-coded work.

    0
  • Nicole Saunders
    Zendesk Community Team

    Hi Melody and Jeremy - 

    Jumping in to confirm that the bell notification option is custom code. It leverages the API and pulls the 6 most recent updates for the user when they're logged in. 


    0
  • Ryan

    What the finished product looks like:

    0
  • Nicole Saunders
    Zendesk Community Team

    Thanks so much for sharing this, Ryan! It's great information. If you want to cross-post it to the User Tips & Tricks topic, we'll send you a Zendesk t-shirt! 

    Regarding the 6 notifications, I believe we have it set up to just pull the 6 most recent updates to posts you are following. Note that you are automatically subscribed to any post that you comment on, so you may be following some you didn't realize. 

    0
  • Melody Quinn

    Thank You, Ryan, we will definitely give this a try!

    0

Por favor, entrar para comentar.

Powered by Zendesk