Also Viewing is awesome right out of the box. But, if you want to tweak things, we make that easy too.
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>
We keep the HTML simple, so you can style it easily.
.also-viewing-message {
background-color: #333;
color: #fff;
font-family: Courier;
}
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>
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});
};
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!