Experience Studio

Overview

Fundamentally a website builder, the Blue Bite Studio provides drag-and-drop tools to build mobile web pages that bring rich content directly to consumers when they tap or scan your objects.However, unlike other website builders, the Studio integrates object data from the Dashboard allowing you to create dynamic Experiences.

Experiences designed in the Studio are built from several Components and Wrappers that can be added, removed, duplicated, and reordered to your liking.

Accessing the Studio

While logged into the Dashboard, click on the Studio tab in the navigation bar.

Alternately, navigate directly to the Studio and use the same login credentials you use to access the Dashboard.

Create a New Experience

There is no limit to the number of Experiences that can be created in the Studio. Each new configuration is called a Studio file and will have its own Name, Description, and ID.

On the Studio homepage, select the New Experience button at the upper right corner of the page.

The new Studio file will open and you can begin configuring your mobile Experience.

You can quickly find your existing Studio files by entering either the Name or the ID into the search field in the Studio.

Configure a Studio File

The “Info” section is where you can name your Experience, locate the unique file ID and provide a brief description.

Just below, in the “Configure” section,  you can program the overall Experience style and add Google Analytics for the whole Studio file.

Experience Tab

Component Styling

Components can be styled to match your brand / style preferences.

  • Default: Will have a border around each Component (left)
  • None: Will have no borders (right)

Background Color & Image

Customize the Experience background with either an image or specific color. Click on “Select Image” in order to choose an image directly from your computer, or use Hex Color Codes to choose the perfect color to match your Experience look and feel:

Tip: If Component Style is set to “None”, the background will not show up unless the Experience does not fill the entire phone screen.

Analytics Tab

Tip: If Component Style is set to “None”, the background will not show up unless the Experience does not fill the entire phone screen.

Easily integrate the Studio with Google Analytics to provide a free and easy way to track actions within Experiences, such as Button clicks, Form submissions and more. Data such as unique users, time on page, and average session duration can also be tracked.

See Analytics & Reporting for more information on Google Analytics.

Static and Dynamic Configurations

Apart from the global settings of a Studio file, each Component has its own set of configurations (see a full list). These fall into two categories:

  • Static configurations: remain constant any time a particular Experience is rendered. The inputs are set within the Component's options.
  • Dynamic configurations: pull in content associated with the mTAG object.
Tip: See the Macros section for in-depth information on how to use dynamic configurations in your Studio file.

Duplicate, Drag and Drop

Easily duplicate entire Experiences to reuse your layout or logic for a new product.

Within a Studio file, duplicate individual Components and Wrappers for reuse while building your Experience.

These Experience building blocks can be moved around as needed or nested within Wrappers simply by dragging and dropping them into the desired location. Click and hold on any part of the Component (other than the Duplicate and Remove buttons) and drag it to the appropriate location. Not all pieces will be compatible together, and the Studio will move the piece back to its original location if it is not compatible.

Tip: See Components for comprehensive information on the types of content to add to your Experience.

Assocate a Studio File to an Object

Once a Studio file is created and configured, the next step is to assign it to an mTAG object.

  • Navigate to the mTAG tab in the Dashboard
  • Select desired mTAG object → Click the “Edit” button
  • Choose Experience Studio from the dropdown labeled Experience
  • Choose the Studio File Name from the dropdown labeled Studio Experience
  • Click the “Update” button
Tip: If an mTAG object is improperly configured or if there is no Studio file associated with it, it will display a fallback Experience.