If you thought the Onsite App was super customizable, then the badge design process is sure to impress. Whether you want a simple, one-size-fits-all badge, or a series of individually customized badges unique to various attendee types, we have you covered. The best part? With Socio Onsite's Badge Rules, the check-in experience is the same for everyone, no matter how their badge is customized.

This article guides you through each step of designing a badge in Socio Onsite. 🎨 Read on, or watch the video below for a demo!

⭐ Keep in mind, any change to a badge design after iPads have been set up at the venue requires that you publish your Onsite event again, and refresh the Onsite App on each of your check-in iPads.

Access the Badge page

From any page in your Onsite event, click the Badge tab. From here you can create new badges, manage existing ones, and edit Attendee Types.

Screenshot of the Badge page.

There's a Default Badge that's associated with all attendees and attendee types, so simply edit the default if you don't plan to tailor different badges to different attendee types. When you create new badges and assign them to attendee types, the attendees that belong to the assigned type(s) are no longer associated with the default badge. Everyone gets the right badge for them!

Before we start designing a badge, let's take a look at Attendee Types.

Edit Attendee Types

If you want to print different badges for different types of attendees, you can do so easily with Attendee Types! If you link Onsite to a Socio Registration event, each ticket translates to an Attendee Type.

Attendee Types added via attendee import into Socio Onsite or by manually adding a new attendee also appear here. For more on importing or adding attendees and Attendee Types, check this out.

Screenshot of the Badge page. The Attendee Types button is highlighted.

Click the Attendee Types button. In the modal that appears, you can edit the Printed Value on the Badge for each Attendee Type. Don't worry. If you don't want these printed on the badge, you can determine that while creating the badge. Click Save Changes when you're done.

Screenshot of the Attendee Types modal with Printed Value filled in.

Create a Badge

To make a new badge, click the New Badge button. In the modal that appears, enter a Badge Name that will help you and your staff understand who this badge is made for. If you've imported Attendee Types or they've been synced from Socio Registration, select one or more Attendee Types. Otherwise, you can leave it blank and add Attendee Type later.

⚠️ Caution! You may create badges and publish your event without selecting an Attendee Type, but badges won't print unless at least one Attendee Type is assigned to the Badge.

Screenshot of the Create new badge modal.

When you're ready, click Create. This takes you to the Edit Badge page.

Design considerations

Contrast and color

The ZD-620 printer only prints in black and white and shades of gray. You can upload color images to go on the badge, and the preview will show it in gray. It's best to upload black images for the best results, however.

If you're using badge stock that's been pre-printed with a color background, carefully consider how the elements you add to the badge will appear. Elements that are too light may be too faded to easily see against the background. In general, black is best.

Double-sided badges

If you turn on the Mirror Badge setting in the Layout tab, simply make adjustments to info, images, text, and shapes in the top portion of the Preview. The bottom portion will update automatically.

If you're using a double-sided badge, and you didn't turn on Mirror Badge, click the Back View tab. The Preview will invert, and you can adjust info, images, text, and shapes in the top portion of the Preview.

Designing a badge

The Edit Badge page consists of the Design Tools panel and the Badge Preview. The Design Tools panel is separated into 5 tabs. As you add user info, images, text, or shapes to the badge, you'll adjust their position on the badge in the Badge Preview panel. Click the grid button below the preview to toggle either a 1/2 inch or 1 inch grid overlay. This is especially useful to avoid positioning elements over pre-printed graphics on the badge.

Keep reading to see exactly how adding elements to the badge works. 📚

Layout

Screenshot of the Layout tab of the Design Tools.

This section of the badge designer determines the size, orientation, and type of your badge material. For more information on the types of badges available and printing methods, check this out.

  • Printer - So far, we only support the Zebra ZD620 to ensure consistent, high-quality printing. In the future, we'll likely add more printers and sizes to choose from.

  • Badge Size - This drop-down lets you select the size, orientation, and material of your badge. Your selection should match what you ordered with your Socio Onsite kit. If you have questions, please reach out to our awesome support team via email or chat.

  • Mirror Badge - If you selected a double-sided Badge Size, you can choose to mirror the badge, which means the same things will print on both sides of the badge. If you want unique information on each side of the badge, leave this toggle set to 'No'.

When you're done selecting Layout options, click the User Info tab.

User Info

The User Info tab lets you choose which attendee fields are printed on the badge. If your Onsite event is linked to Socio Registration, you'll see all the questions from your checkout forms listed as available fields, in addition to the basic fields such as First Name and Email.

To add a user info field to the badge, simply change its toggle to YES. The field appears in the Badge Preview on the right. Click and drag each field in the Badge Preview to adjust its position, and use the editing tools to rotate, layer, and center them.

Animated GIF showing a user adding and arranging fields on a badge.

When you're done adding and positioning user info fields, you've completed the minimum configuration needed to print badges, and you can Publish Onsite!

However, there's a TON more customization available with images, text, shapes, and visibility rules. Keep reading to learn more.

Images, Text, and Shapes

You don't have to add images, text, or shapes to publish and print your badge. If you need a higher level of customization based on attendee types and registration question answers, these options offer an incredible level of control and complexity.


When you add one of these elements to the badge, you can use the editing tools to rotate, layer, and center it. If you're setting up a badge that prints a different shape or logo depending on an attendee type, such as sponsor logos, and you need to stack similar elements in the same physical space on the badge, use the Bring Forward or Send Backward tools to adjust each element as needed.

Add Image

Adding an image to your badge can be a great way to dress up your badges or add distinction to different types of badges. For example, you could add logos for each of your sponsors, and then use visibility rules to print the right logo for sponsor personnel based on registration questions.

⭐️ Keep in mind, you can upload rectangular images, but you must choose a 1:1 aspect ratio section of the image. Make sure the part of the image you want to use can fit inside a square frame. If it doesn't, this article may be helpful.

Screenshot of the Add Image tab of the Design Tools.

To add an image to the badge, click the Add New Image button. In the modal that appears, follow the instructions to select an image file from your device, and then click Import.

After you import an image, it's automatically added to the Badge Preview. Click the Settings (⚙️) icon to rename or delete it. Click the Visibility option to create a rule that determines when the image should or shouldn't be printed on the badge. For a complete guide to creating rules and some practical examples, check this out.

Screenshot of the Add Image tab of the Design Tools. The Cisco company logo has been added.

Click and drag each image in the Preview to adjust its position, and use the editing tools to rotate, layer, and center it.

As you make changes, your progress is automatically saved. When you're done making adjustments to position and visibility, you can simply leave this tab.

Add Text

To add custom text to the badge, click the Add New Text button. Once you've typed your desired text into the text field and clicked Save, the text is automatically added to the Badge Preview.

Screenshot of the Add Text tab of the Design Tools.

Click the Settings (⚙️) icon to edit or delete text. Click the Visibility option to create a rule that determines when the text should or shouldn't be printed on the badge. For a complete guide to creating rules and some practical examples, check this out.

Click and drag each text box in the Preview to adjust its position, and use the editing tools to rotate, layer, and center it. The bar along the top of the Preview lets you control the font, size, alignment, and style of the text.

Animated GIF showing a user adding and adjusting a text field.

As you make changes, your progress is automatically saved. When you're done making adjustments to position and visibility, you can simply leave this tab.

Add Shape

To add a shape to the badge, click the Add New Shape button, and select your preferred shape from the drop-down. After you enter a name for the shape and click Save, the shape is automatically added to the Badge Preview.

Screenshot of the Add Shape tab of the Design Tools. A hexagon shape has been added.

Click the Settings (⚙️) icon to rename or delete a shape. Click the Visibility option to create a rule that determines when the shape should or shouldn't be printed on the badge. For a complete guide to creating rules and some practical examples, check this out.

Click and drag each shape in the Preview to adjust its position, and use the editing tools to rotate, layer, and center it.

Screenshot of the Add Shape tab of the Design Tools. A Rectangle has been added, and the shape's settings menu is expanded.

As you make changes, your progress is automatically saved. When you're done making adjustments to position and visibility, you can simply leave this tab.

Manage badges

After you've added some badges, you can manage them from the Badge page. Click the Settings (⚙️) icon next to a badge to edit the details (name and Attendee Types), edit the design, clone, or delete the badge.

Screenshot of the Badge page. The Settings menu for a badge is expanded.

Badges will show one of three statuses:

  • Needs Design - The badge has been created, and no information has been added to it yet.

  • Ready to Publish - The badge has at least one information field on it. Ready to Publish doesn't necessarily mean that the badge is print-ready. Carefully inspect each design before publishing to ensure it's ready for printing.

  • Published - You've clicked Publish, and the badge is now live!

⚠️ Caution! If you make changes to a badge design after setting up the check-in iPads at the venue, you must refresh each iPad by tapping the Refresh all onsite data button from the Onsite App's settings page.

Now that you've made your badges, you're ready to publish your Onsite Event!

Pro Tips! 😎

  • Add a QR code that opens your Event App's promo page to assist Event App adoption.

  • Consider ordering ribbon that matches your event colors to bring your badge design even closer to your brand.

Questions? Chat Us or Email [email protected]

Did this answer your question?