Zones
- 1 Overview
- 2 Setup
- 3 Zone Builder
- 3.1 Settings
- 3.2 Style
- 3.3 Components
- 3.4 Launch
- 3.5 Preview
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.
Click the Race to Win Zone below to open it in your browser and explore! Use the branded QR code below as one of the checkpoints (what we call a Waypoint).
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:
Attendee App #1 | Attendee App #2 |
---|---|
|
|
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: Lin