Customize Your WhatsNew Widget!

WhatsNew works out of the box but you can also customize it using our JS API

Using the Javascript API

When you copy the code from WhatsNew, the last section initializes the widget and passes it some options. This is where you can pass more options for customizations

window.whats_new('initialize', {
  feed_id: 1,
  // You can pass options here to customize the widget
  // Please see http://goo.gl/Vfpx4 for documentation
  height: '400px'
});

Customization Options

You can pass the following options to customize WhatsNew. Please note that some options over-ride the other ones. We have mentioned this in the documentation whenever this is the case

since

By default WhatsNew drops and uses a cookie to track the last visit time of a user. However if you store the last visit time in your database and prefer using that, you can pass us a unix timestamp.

unique_id

Without this parameter, we identify users based on the cookie. This has a few limitations.

  • If the same user logins in a different browser (or a different device like mobile phone), we might end up showing them the update again (though if you use since, this issue is taken care of).
  • If they unsubscribe, we won't know this on a different device. Only the browser/device they clicked unsubscribe on will remember this preference.

By passing a unique_id, you help us identify a user across devices and browsers. If they see a notification on one device, we will not show it to them on another device. Also, if they unsubscribe, we remember their preference and respect it on every device/browser they might use your site on.

You can pass the email or user_id or any other unique value for this parameter.

greeting

This replaces the 'Here's What's New since your last visit' with a greeting of your choice (or language!)

height

Adjust the height of the widget. If the content in the overlay is taller than the height, we will put a scrollbar in the overlay.

summary

By default we show a summary of the blog post under the title. Pass false to turn it off.

notification_style

Set it to bar to show a bar floating from the top with a summary of updates and a button to view more and a close button (shows up only when there are new updates). Clicking the view more button will open the overlay. Set it to auto or leave blank for show the overlay directly whenever there are updates.

bar_greeting

The message to display in the bar. Any occurence of {{count}} is replaced by the unread notifications count. This setting is valid only if notification_style is set to bar.

bar_read_more_label

The label for the view more button. Any occurence of {{count}} is replaced by the unread notifications count. This setting is valid only if notification_style is set to bar.

overlay_css_url

If you want to customize the overlay's css or the css of the bar (for contents see next section), pass a link to a css file in this parameter. Every css style must be suffixed by !important otherwise it won't be applied. We need to do this to create a clean slate for the widget using the Cleanslate CSS file.

body_css_url

If you want to customize the overlay's content (the actual notifications), pass a link to a css file in this parameter.

fb_like

Set to true if you want to show a facebook like button for each update

tweet_button

Set to true if you want to show a tweet button for each update

google_plus_button

Set to true if you want to show a google+ button for each update