Setup and Print Visitor Badges

Pair LobbyConnect with a compatible wireless printer to enable visitors to print their own photo ID badges, which can be custom designed by your web developer.

In this article:

Pair LobbyConnect with a compatible wireless printer to enable visitors to print their own photo ID badges, which can be custom designed by your web developer.

Supported Label Printers and Badge Sizes for LobbyConnect

For badge printing, you will need to use a label printer that is supported by LobbyConnect. Due to the wireless nature of the LobbyConnect display, we can only support label printers with WiFi capability. Supported printers and badge sizes are listed below. If your preferred label printer is not supported, please contact us, as we may add support for additional label printers in the future.

Supported printers

  • Brother QL-710W
  • Brother QL-720NW

Supported Badge Sizes

  • 62mm x 100mm (recommended)
  • 62mm x 29mm
  • 52mm x 29mm
  • 39mm x 48mm
  • 38mm x 90mm
  • 29mm x 90mm
  • 29mm x 42mm
  • 23mm x 23mm
  • 17mm x 87mm
  • 17mm x 54mm

Connecting a Label Printer to LobbyConnect

Note: Before you begin, double check that the label printer and the iPad are on the same wireless network.

From the Launch Screen on LobbyConnect, tap the settings gear at the bottom left of the screen. This will launch the Settings Dialog.

LobbyConnect by Teem Visitor Management Setup

Under the Devices heading, tap Printers.

Visitor Management Visitor Badge Printing Settings

You will see a list of available printers under the Select Your Printer heading. Select the printer you intend to use for badge printing.


Automated Visitor Management Badge Printing

Once you select your printer, scroll down and select the paper size.

LobbyConnect by Teem preset label size printing

Navigate down, and tap Test Printer. The printer should print a label that says "LobbyConnect."

If you were successful in adding the printer, tap Save.

Once you have successfully paired LobbyConnect to your printer, you can return to the Launch Screen.

Next, you’ll need to set up badges. If you’ve already done that, you can skip to the Printing Test Badges section of this article.

Setting Up Badges

Visitor badges are HTML and CSS based, which allows you to create your own badges and upload them for use with LobbyConnect in your office.

To take advantage of this functionality, you’ll use an app called Badge Preview to create the badge, as well as to preview your badge in real-time as it’s built.

Downloading Badge Preview

Download Badge Preview here: http://enderlabs.github.io/cocoa-osx-badge_preview/

Currently Badge Preview is only available for devices running Apple's OS X software.

Supported Fields

The following fields are supported in badges:

Visitor Fields

  • visitor.photo The photograph of the visitor (taken on the iPad when the visitor checks in with LobbyConnect)
  • visitor.company The visitor's company (entered during visitor check in)
  • visitor.phone The phone number of the visitor (entered during visitor check in)
  • visitor.email The email address of the visitor (entered during visitor check in)
  • visitor.qrcode A QR code that returns the unique identifier of the visitor

Host Fields

  • host.photo The photograph of the host
  • host.name The name of the host

Company Fields

  • company.logo The logo of your company (if available)
  • company.name The name of your company

Information Fields

  • info.datetime The date and time when the badge gets printed (added by LobbyConnect during visitor check in)
  • info.date The date when the badge gets printed (added by LobbyConnect during visitor check in)
  • info.time The time when the badge gets printed (added by LobbyConnect during visitor check in)

The Fields Inspector

The fields inspector on the left of the Badge Preview window allows you to see what different values for different variables will look like in your badge.

Fields Inspector LobbyConnect

Simply change the values in the text and image fields and the badge preview will update automatically.

The checkboxes next to each variable simulates LobbyConnect providing or omitting a variable in the badge data. Turning a variable off causes the badge to render as it will if LobbyConnect does not provide that value.

The contents of visitor.photo can be replaced by dragging an image file from your desktop onto the visitor.photo pane in the fields inspector.

A field will not appear on a badge unless you have a template tag in the badge HTML that renders that field.

Editing the Badge File

For the most part, creating a badge is just like any other HTML/CSS/JS project. There are a few unique parts to it, however, and they manifest when you edit index.html

Scaling and Resizing

With your project open in Badge Preview, drag the slider in the lower-right corner. Or, if you open index.html in Safari or Chrome, resize the browser window. Note how the content scales based on the size of the web view. Instead of laying content out based on arbitrary widths and heights, badges are laid out according to aspect ratio. If your web view is wider than it is tall, your badge will be laid out as if it were 100 pixels tall. If it's taller than wide, your badge will be 100 "pixels" wide. A square badge will be 100x100 "pixels."

This scaling is achieved by applying a CSS transform to the contents of the div with the id "lib-badge-container". Because of this, your badge must have that div. The template that gets created for you puts content inside of that div, and marks the content area with "Content Goes Here" and "End of Content" HTML comments. You should not put content outside of that div.

If your badge will print on multiple sizes of paper, you may need to use responsive web design and media queries. However, instead of writing media queries based on page size, in a badge you will specify aspect ratio in your media queries. The queries built into css/badge.css give examples of this.

Template Tags

When LobbyConnect renders a badge for printing, it injects certain information into the page, such as the name of the visitor. To know where to inject this information, it processes template tags in the HTML. These template tags take the form of a variable name enclosed in curly brackets, for example:

<p>{{ visitor.name }}</p>

When a badge is processed, those template tags will be replaced with the corresponding value from the badge data.

The names of the available variables can be seen in the Badge Preview app. The inspector with three tabs on the left side of the window shows the names of all available variables.

Image Variables

There are a few special image variables available, such as visitor photo and company logo. You don't inject these using template tags. Instead, you use special data attributes on div tags. The available attributes are: `data-badge-visitor-photo`, `data-badge-host-photo`, `data-badge-company-logo`, and `data-badge-visitor-qrcode`.

To show an image in a div, include the corresponding data attribute on the div, and set its value to `true`. Example:

<div data-badge-visitor-photo="true" id="visitor-photo"></div>

Your div will not be resized to fit the image. Instead, the image will do an aspect-ratio fill in the background of the div, whatever its size. Because of this, you must explicitly set a size for the div.

Conditional Display

Your badge can mark DOM elements to only display if a variable is or is not present in a data set. For example: you might have a badge that says, "Hello, John Appleseed!" but you only want that text to appear if a visitor name is actually present in the badge data, to avoid your badge saying, "Hello, !"

You can mark DOM elements for conditional display with the data attributes `data-badge-if` and `data-badge-if-not`. So to support the example scenario, you could do this:

<p data-badge-if="visitor.name">Hello, {{ visitor.name }}!</p>

When the badge is processed, if the badge data does not have a value for "visitor.name", then the entire p tag will be hidden.

Packaging and Using Your Custom Badge

LobbyConnect cannot directly work with the badge project files that you edit to make the badge. Instead, your project needs to be compiled in a special package format (.badge) that LobbyConnect can read.

To do this, simply press the Package button on the toolbar. A new .badge file will be created in the same directory as your .badgeProject file. Compress that file into a .zip, email it to customersuccess@teem.com and we'll attach it to your account.

Editing Badge Project File

Badge Preview projects appear as files with a .badgeProject extension. These projects are actually a special kind of file in OS X known as a package. Packages are just folders, but OS X treats them as they it were files (i.e. double-clicking one launches Badge Preview, instead of opening the folder in Finder).

You can access the contents of a badge project by right-clicking (or control-clicking) it in Finder and choosing "Show Package Contents". Alternatively, with the project open in Badge Preview, choose "Open in Finder" from the toolbar. The "Open in Finder" button doesn't always open the package correctly; sometimes it merely selects the package in Finder. If that happens, simply use the aforementioned "Show Package Contents" technique to view its contents.

Badge Project Package Contents

Any web developer should immediately find the contents of a badge project package familiar: it's a collection of HTML, CSS and Javascript.

The index.html file is loaded and rendered by LobbyConnect to print a badge. Edit this file to define the main structure of your badge.

The css/badge.css file contains a standard CSS file that defines the default badge. Feel free to change anything in this file.

The js/badge.js file provides a starting point for any Javascript behavior you might want to provide. Since badges are not interactive, this Javascript is only useful for manipulating the DOM.

The contents of the sys directory are defined by the system and should not be modified for any reason. Future versions of LobbyConnect may override the contents of this directory, so if you make changes there is no guarantee that your modifications will actually work in LobbyConnect.

Printing Test Badges

Badge Preview allows you to see many different sizes and orientations for badges, but you may want to see your badge actually printed out on paper to really know how it'll look. Badge Preview can work with LobbyConnect to print a test badge with your design.

First, you must go to the printer management screen in LobbyConnect, where you pair LobbyConnect with a printer and select paper size. LobbyConnect must be running with this screen open in order to print a test badge.

Print Test Badges LobbyConnect

Next, in Badge Preview, press the Preview button in the toolbar. Your iPad should appear in the resulting list. If it doesn't, ensure that both your Mac and your iPad are on the same wifi network, and that your wifi settings don't block Bonjour discovery.

Once your iPad appears in the list, select it, and then press Test Print.

Select the Printer for Test Badge Printing LobbyConnect

We hope this helps! If you have any questions, please feel free to reach out to us by email or phone at: support@teem.com, 415-830-6989.


Can't Find What You're Looking For?

Our award-winning customer care team is here for you.

Contact Support