Customizing your Notification Feed widget

Introduction

Your Notification Feed can be customized to match the colors of your website or app.

To customize these settings, within your dashboard, go to the Notification Feed and click on Settings.

Once there, you will see preview of your notification widget on the left (on the desktop view) and on the right, a panel that looks like the following:

You can also use the JavaScript configuration block to add specific customizations in there, such as for localization.

Before you read on, please refer to our Setting up your Notification Feed article if you have not read that already.

Branding settings

Heading background color

The heading background color is the color that you see at the top of the notification feed. We recommend using a darker color here as the main body color will be a lighter color. This gives a nice contrast between the header and body section.

Header color

The header color is the color of the text within the heading. If you've set a darker background color, set this as a lighter color. If you've set a lighter background color in the header, set this as a dark color.

Body text color

Body text color is the color of the text in the body. A good choice will be a darker gray.

Link text color

The link text color is the colors for links.

Header label

Specify what label you want in the header. Good choices might be:

• What's New
• Changelog
• Updates

Close label

For slide-in style of Notification Feeds, a close icon or text will be displayed to allow users to close the panel.

You can choose if you want a dark or light colored icon (depending on whether you've set a dark or light color for the background color in the header), or you can display a text label.

The text label field will only show if you've selected text here.

Securing your widget

We recommend that you secure your Notification Feed widget so that it can only be loaded from domains you control.

To learn how to secure your widget, please refer the security section in our Setting up your Notification Feed guide.

JavaScript configuration

The Notification Feed widget can also be further customized using the JavaScript configuration option.

Here is the default configuration block that is given in the Setup page instructions:

<script>
window.eagerapp = (window.eagerapp || { queue: [], setup: function(x) { window.eagerapp.queue.push(x); } });  
window.eagerapp.setup({    
  "app": "notifications",    
  "id": "your-unique-code",    
  "config": {      
    "selector": "[data-eager-notifications]",      
    "type": "side-panel",    
  }  
});
</script>
<script src="https://cdn-widgets.eagerapp.net/widget/v1/loader.js" async></script>

Within the "config" block, you can specify additional options.

Element trigger

By default, the HTML element that "triggers" the showing of the Notification Feed widget must have the attribute of "data-eager-notifications".

This can be customized to whatever unique CSS selector you want.

Behind this, we use a document.querySelectorAll to find all elements on the page with the matching selector that you specify here.

For example, you might have a button trigger that looks like this:

<button id="notifications">See latest news</button>

In this case, for the "selector" value you can use "#notifications". When it is clicked, Eager's Notification Feed will be triggered and shown.

Important to note:

• We recommend that you do not attach JavaScript event handlers to elements that are specified to be triggers, in order to minimize any other libraries from interfering with our JavaScript code.

Localization

You can (optionally) define the text labels when the Notification Feed widget loads. Any values you declare here will override the ones that are set by default within our app, as well as the values you've set within the Notification Feed settings page.

This is useful for situations where you are dynamically generating the page and want to provide localization values (ie. languages).

To do this, set a "language" block like so:

window.eagerapp.setup({   
  "app": "notifications",
  "id": "your-unique-code",
  "config": {     
    "selector": "[data-eager-notifications]",     
    "type": "side-panel",    
    // NEW CODE HERE    
    "language": {      
      "close_label_text": "Close",      
      "no_notifications_label_text": "No notifications found",      
      "error_label_text": "Something went wrong",      
      "header_label_text": "Notifications"    
    }  
  } 
});

Replace the values for each label (eg. Close, No notifications found). Be careful to keep the "keys" the same as displayed in the code snippet above (eg. "close_label_text") as misnaming them will not override the app's internal values.

Single Page Apps

In certain cases, single page apps may "redraw" the triggering element for the Notification Widget, causing the triggering element to no longer open the widget.

In order to fix this, you can add the following into the widget's configuration snippet:

<script>
  window.eagerapp = (window.eagerapp || { queue: [], setup: function(x) { window.eagerapp.queue.push(x); } });
  window.eagerapp.setup({
  "app": "notifications",
  "id": "1-b34eb687-24e4-4da1-bd56-32cd1cae6944",
    "config": {
      "selector": "[data-eager-notifications]",
      "bind_to_document": true, // *** NEW LINE HERE ***
      "type": "side-panel",
    }
  });
</script>

The additional "bind_to_document" configuration and setting it as "true" will tell Eager's Notification Widget code to bind to the document element and to detect the triggering element instead.

If you are still having trouble, you can also manually trigger the widget instead. See below for instructions.

Manually trigger widget

In certain situations, you may wish to manually trigger your Notification Feed widget instead of having Eager bind to your page element.

This method may help to fix situations where the widget isn't triggered properly due to other page load factors.

To trigger a widget, you will need the "id" of your widget and call the following JavaScript code:

// eg. Let's say your widget has the "id" of "1-b34eb687-24e4-4da1-bd56-32cd1cae6944", you will then call:

<script>
  let widgetId = "1-b34eb687-24e4-4da1-bd56-32cd1cae6944";
  window.eagerapp.notificationFeedWidgetToggle(widgetId);
</script>

If the widget is already opened when you call this, calling it again will close it. Because of this reason, you should ensure that any custom events you bind to your trigger is properly bound so that it does not get called multiple times.

Note: If you're triggering the widget manually like this, it is also advisable to set your configuration block as such to ensure that Eager's JavaScript code does not automatically bind your element to trigger it:

<script>
  window.eagerapp = (window.eagerapp || { queue: [], setup: function(x) { window.eagerapp.queue.push(x); } });
  window.eagerapp.setup({
  "app": "notifications",
  "id": "1-b34eb687-24e4-4da1-bd56-32cd1cae6944",
    "config": {
      "selector": "[data-eager-notifications]",
      "manualTrigger": true, // *** NEW LINE HERE ***
      "type": "side-panel",
    }
  });
</script>