Also Viewing

Advanced API Features

Also Viewing is awesome right out of the box. But, if you want to tweak things, we make that easy too.

  1. Custom CSS
    Style the default notification
  2. Custom HTML
    Change the notification HTML
  3. Custom Event Handlers
    Completely free-form notifications

Custom CSS

By default the styling for Also Viewing's notifications are minimal.

Below is the HTML that we insert when another user is detected on the same page. To the right of it is the standard appearance.

<div class="also-viewing-message">
    <strong>John Smith</strong>
    is also viewing this page.
</div>
John Smith is also viewing this page.

We keep the HTML simple, so you can style it easily.

.also-viewing-message {
	background-color: #333;
	color: #fff;
	font-family: Courier;
}
John Smith is also viewing this page.

Custom HTML

CSS changes can only go so far. If you want to customize even more, you can write your own HTML.

Our Javascript calls AlsoViewing.messageHTML to retrieve the HTML for our notification. You can easily replace it with your own function that returns a string of HTML.

<script type="text/javascript">
AlsoViewing.messageHTML = function (names) {
    return "<h4>"+names.length+" other viewers.</h4>"
}
</script>

4 other viewers.

Also Viewing doesn't have any dependencies, but it's easy to integrate whatever libraries you're already using. Here's an example that takes advantage of Underscore.js's template function.

var fancyTemplate =
  "<p>Other people on this page</p>" +
  "<ul>" +
  "<% _.each(names, function (name) { %>" +
  "<li><%= name %></li>" +
  "<% } %>" +
  "</ul>";

var tmpl = _.template(fancyTemplate);
AlsoViewing.messageHTML = function (names) {
    return tmpl({names: names});
};

Other people on this page:

  • John Smith
  • John Doe

Custom Event Handlers

The most flexible way to customize Also Viewing is to set the AlsoViewing.onupdate handler. This gives you complete control over how to present notifications to the user.

AlsoViewing.onupdate = function (names) {
    if (names.length === 0) {
        console.log("No one is here.");
        console.log("Edit without fear!");
    } else {
        console.log("Other people:", names);
    }
}
> Other people: ["John Smith", "Joe Smith"]
> Other people: ["John Smith"]
> No one is here.
> Edit without fear!