Help center / On-site: check-in & badges

Build a badge in HTML mode

Hand-write a badge template when the visual designer cannot express the layout you need.

Who can do thisowneradmin

Most badges should be built in the visual designer. HTML mode exists for the few that genuinely cannot be — a complex multi-column layout, precise typographic control, or something your printer specified exactly.

This is the advanced route. A broken template prints broken badges, and there is no visual editor to fall back on once you switch. Do not do this for the first time in print week.

Steps

Open Badges and select the template.
Click Switch to HTML mode.
Badge designer with the switch to HTML mode control
Write your markup.
Save, then print a test badge.

What carries over

Merge tags work exactly the same — {{first_name}} and the rest, including your registration form answers. See Put attendee details on a badge.

Media settings still apply. Your width, height, bleed and safe margin from Media define the printable area. Design to those millimetre dimensions.

Practical notes

Work in millimetres, matching the media size.
Keep everything inside the safe margin — the same cutting tolerance applies.
Test QR code sizing by actually scanning a printed one.
Use a font that covers every script your attendees use. Arabic in a Latin-only font prints as empty boxes.
Assume no internet at print time. Anything loaded from an external URL may not be there.

Before you commit

Print tests with your genuinely worst-case attendees: longest name, an Arabic name, someone missing the optional fields, someone with no photo. HTML mode gives you no layout safety net, so those cases are yours to handle.

What happens next

The template behaves like any other: assign it to attendee types, print in a batch, or print from the kiosk. Nothing downstream cares that it was hand-written.

Common problems

Nothing prints. A markup error. Simplify to plain text and one merge tag, confirm that prints, then build back up.

It prints at the wrong size. Your markup dimensions do not match the media settings, or the print dialog is scaling. Set print scale to 100%.

Merge tags print literally. Misspelled, or that attendee has no value for the field.

You want to go back to the visual designer. Switching back does not reconstruct your hand-written layout into elements. Keep a copy of your HTML before switching, and expect to rebuild visually from scratch.

It looks right on screen and wrong on paper. Screen rendering and print rendering differ. Only the printed test tells you the truth.