Developers

Bring a Personas gallery to your site, utilize full CSS3 backgrounds support, and give your community something special.

Here's what you need to know:

Community Managers

Give your online audience an interactive browser theme - a fusion of design, content and functionality - for a persistent engagement with your users. Contact us and learn how easy it is.

More Themes

Explore our current work and see the great brands that will be moving to the Personas Interactive platform soon.

Creating a Personas Gallery

Overview

Personas are described in HTML by adding a snippet of JSON as an attribute to any HTML element. This element is usually a preview image. Then you use Javascript to indicate whether the item will preview or install a Persona.

Here's a very simple example:

<img alt="My Persona"
     data-browsertheme='{"id": "mypersona@mysure.com",
                         "name": "My Persona",
                         "headerURL": "colts/window-bg.png"}'
     src="mypersona.png"
     id="mypersona-preview" />

* Note that the JSON is surrounded by single quotes.


Here we have a preview image that contains the minimum amount of JSON to describe a Persona.

If we want to make the Persona have a preview associated with it, we use Javascript. In Firefox, there are custom DOM Events for previewing, resetting preview and installing. We need to associate those events with a particular action. Brand Thunder's made this convenient by creating a simple JavaScript library that performs the association. By calling "attachPersona" on a particular DOM node, all the work to connect with Firefox will be done for you.

personas.js (save link as...)

function attachPersona(node) {
    node.addEventListener("click", InstallBrowserTheme, false);
    node.addEventListener("mouseover", PreviewBrowserTheme, false);
    node.addEventListener("mouseout", ResetBrowserThemePreview, false); 
}

function dispatchPersonaEvent(node, action) {
    var event = document.createEvent("Events");
    event.initEvent(action, true, false);
    node.dispatchEvent(event);
}

function InstallBrowserTheme(event) {
    dispatchPersonaEvent(event.target, "InstallBrowserTheme");
}

function PreviewBrowserTheme(event) {
    dispatchPersonaEvent(event.target, "PreviewBrowserTheme");
}

function ResetBrowserThemePreview(event) {
    dispatchPersonaEvent(event.target, "ResetBrowserThemePreview");
}