Overview

Zones are a flexible way of embedding various elements (leaderboards, activations, QR code scanner etc.) into an external application to drive engagement. Essentially, a Zone is a web page that can contain a library of gamification elements.

In the screenshots below two Zones are shown in a desktop browser. Notice how the contents of a Zone can be customized, along with the look and feel of the entire Zone and each element within the Zone.

Open

Zone #1 in a Desktop Browser

Zone #2 in a Desktop Browser

The two screenshots below show Zones integrated into two (2) different mobile attendee apps. Click on the image to play a video showing an overview of the Zone:

If the 3rd party can embed an external webpage into their mobile app, then Zones will work out of the box. However, to identify attendees that interact with your Zone to keep track of their progress via progress reports or assign points to individual or team leaderboards there are two ways to authenticate the individual:

• Single sign-on (SSO)

• Using query string parameters

Setup

Create your Zone by going to Events > Activations > Zones and click the NEW button:

A dialogue box will appear where you can provide the Name, Page Title, Header, Sub Header, and also select the View Type.

Name: Internal name of the Zone.

Page title: Title of the browser tab.

Header: Text that appears in the header of the Zone.

Sub Header: Text that appears in the sub header of the Zone.

View Type: Select the layout of the Zone components. You can choose to display components as cards, vertical tabs, or horizontal tabs.

Zone Builder

Settings

Add or edit the Page title, Header, and Name information from here:

Style

Control the styling of your Zone from this section. Things you can customize include a banner image, tab text color, background color, font color, size, and much more.

Components

Add your components (or elements) to the Zone from this section. Here is a list of available components:

• Handoff: The handoff component allows one or more activations to be inserted dynamically into a Zone. This is accomplished by selecting the activations you want to handoff in the Activations to pass setting during the Launch step to produce a new Zone URL. See the video below for more information.
  
  

   

• HTML: Adds an HTML editor section where you can add any custom text, images, etc.

• Leaderboard: Links to any leaderboard in the system.

• Link: Adds a single external link to your zone.

• Links: Adds multiple external links to your zone.

• Multiple Activations: Adds a block that can contain more than one Activation.

• Progress Report: Adds a progress report for your selected goal(s).

• QR code scanner: Adds a scanner to scan QR codes and badges.

• Rewards: Links to the reward center.

• Single Activation: Adds any selected activation to the Zone.

• Web page: Opens a webpage inside the Zone.

Here’s how these components would display on the front end in card layout:

Launch

Launch your Zone using either the QR code or a direct URL.

Preview

You can always preview the zone to see any changes you’ve made in real time. Use the preview icon at the top here: