> For the complete documentation index, see [llms.txt](https://eventx-hq.gitbook.io/knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eventx-hq.gitbook.io/knowledge-base/badge/badge-setup/badge-editor.md).

# Badge Editor

Use **Badge Editor** to create and update onsite check-in Badge Designs with **Design Mode** or **Code Mode**.

To access the editor:

1. Open the left sidebar and select **In-person Check-in**.
2. Select the **Name Badge** tab.
3. Select **Create Badge Design**, or select **Edit** beside an existing Badge Design.

Enter a recognizable **Badge Name** with no more than 80 characters. The name is used to identify the Badge Design in the Name Badge list, Badge Rules, and attendee details.

For instructions on creating multiple designs and assigning them to attendees, see [Manage Badge Designs and Badge Rules](/knowledge-base/badge/badge-setup/designing-a-name-badge-for-check-in.md).

![Badge Editor with Design Mode and Code Mode](/files/8vOIqBuLn6YHSbbOHe0s)

## How to Choose Design Mode or Code Mode

### Objective

Choose the correct editing mode for standard badge design or advanced JSON changes.

### Steps

1. Select **Design Mode** for drag-and-drop editing.
2. Select **Code Mode** for JSON editing.
3. Preview the badge before saving.
4. Save the Badge Design. After saving, you will return to the Name Badge list.

### Mode Reference

* **Design Mode**
  * Add, drag, resize, and style standard badge elements.
  * Use it for most badge layout changes.
* **Code Mode**
  * Edit the badge template JSON directly.
  * Use it for Epson colours, Brand elements, and advanced layout changes.

### Notes

* Invalid JSON in **Code Mode** will block saving.

## Limitations

### Objective

Understand current badge editor and printer limitations before creating a badge template.

### Limitation Reference

* **Epson platform support**
  * Epson badge printing is supported on iOS only.
* **Colour printing**
  * Only Epson supports colour printing.
  * Brother and Zebra do not support colour printing.
* **Epson setup**
  * Epson printers do not support client self-setup at this stage.
  * Contact your Project Manager or EventX support for setup assistance.
* **Epson colour picker**
  * The editor does not currently provide a full colour picker for Epson.
  * Add non-black/white colours in **Code Mode** with `style.color`.
* **Brand element**
  * Brand elements can currently be added only in **Code Mode**.
  * `titleMapping` currently supports ticket class and text custom field matching only.
  * The draggable editor preview displays `titleMapping[0]`.
  * The Check-in App renders the first matching `titleMapping` case.
* **Custom QR code**
  * Custom QR code elements only work after the QR code string has been imported.

## How to Add Badge Elements

### Objective

Add the correct badge elements for attendee information, images, QR codes, and visual layout.

### Steps

1. Select an element type from the editor toolbar.
2. Drag the element to the required position.
3. Resize the element box.
4. Update the element style.
5. Preview the badge before saving.
6. Save the badge template.

### Badge Element Reference

* **Attendee Info**
  * Adds attendee data to the badge.
  * Supports basic fields, custom fields, ticket fields, and tag fields.
  * Uses the `text` element type in **Code Mode**.
* **Text Field**
  * Adds custom static text.
  * Use it for labels, section titles, or fixed wording.
  * Uses `fieldType: "custom_text_field"` in **Code Mode**.
* **Image**
  * Adds the event logo, check-in/out QR code, custom QR code, or uploaded image.
  * Uploaded images have a maximum file size of **2MB**.
  * Uses the `image` element type in **Code Mode**.
* **Shape**
  * Adds a rectangle, triangle, or circle.
  * Use shapes for separators, highlights, and background blocks.
  * Uses the `shape` element type in **Code Mode**.
* **Brand**
  * Shows mapped title text with optional foreground colour, background colour, and shape styling.
  * Use it for category-based labels such as delegate type, role, or group.
  * Add it in **Code Mode** only.

### Common Style Options

* **Position:** `left`, `top` in px
* **Size:** `width`, `height` in px
* **Text:** `fontSize`, `fontWeight`, `fontFamily`, `lineHeight`, `textAlign`
* **Lines:** `numberOfLines`
* **Rotation:** `rotate`
* **Colour:** `color`, such as `#FF0000`. Printed colour applies to Epson only.

## How to Use Code Mode

### Objective

Edit a badge template directly with JSON while keeping the live badge preview valid.

### Prerequisites

* Basic understanding of JSON formatting.

### Steps

1. Select **Code Mode**.
2. Edit the JSON template.
3. Review the live preview after each valid change.
4. Keep the required root fields:
   * `width`
   * `height`
   * `printerType`
   * `elements`
5. Set `printerType` to one supported value:
   * `brother`
   * `zebra`
   * `epson`
6. Use px values for badge width, badge height, element position, and element dimensions.
7. Fix any validation message before saving.
8. Save the badge template.

### Example

```json
{
  "width": 288,
  "height": 192,
  "printerType": "brother",
  "elements": []
}
```

### Notes

* Code Mode uses px, not mm. Invalid JSON or missing required fields will block saving.

## How to Create an Epson Badge Template

### Objective

Create a badge template for Epson full-colour badge printing.

### Prerequisites

* Epson badge printing support enabled for the event.

### Steps

1. Select **Printer Type**.
2. Choose **Epson**.
3. Confirm the badge size is **152.4 x 101.6 mm**.
4. Add text fields, images, shapes, the event logo, or QR codes.
5. Preview the badge before saving.
6. Save the badge template.

## How to Add Epson Colours in Code Mode

### Objective

Add full-colour text or shapes to an Epson badge template with JSON.

### Prerequisites

* An Epson badge template.

### Steps

1. Select **Code Mode**.
2. Find the target element in `elements`.
3. Add `color` inside the element's `style`.
4. Enter a HEX colour value, such as `#E53935`.
5. Review the live preview.
6. Save the badge template.

### Example

```json
{
  "type": "text",
  "field": "Text",
  "fieldType": "custom_text_field",
  "style": {
    "left": 20,
    "top": 20,
    "width": 180,
    "height": 40,
    "fontSize": 24,
    "color": "#E53935"
  }
}
```

## How to Add a Brand Element in Code Mode

### Objective

Add a conditional brand label to a badge template with JSON.

### Prerequisites

* The custom field ID from **Manage Fields**, if mapping by custom field.

### Steps

1. Open **Manage Fields**.
2. Copy the custom field ID, if mapping by custom field.
3. Return to the **Name Badge** tab.
4. Select **Code Mode**.
5. Add a new object inside `elements`.
6. Set `type` to `brand`.
7. Set `style` for position, size, and text style.
8. Set `shapeType` to `rectangle`, `circle`, or `triangle`.
9. Add `titleProps.titleMapping`.
10. Add one or more mapping cases.
11. Use a supported mapping source.
12. Review the draggable preview.
13. Save the badge template.

### Brand Element Structure

* `type`: Use `brand`.
* `style`: Controls position, size, font, and line count.
* `shapeType`: Controls the brand block shape.
* `titleProps.titleMapping`: Defines the display cases.
* `field`: Sets the custom field ID to check.
* `fieldType`: Supports `ticket` or `custom_field`.
* `containValue`: Matches the ticket class name or custom field text value.
* `mappedValue`: Shows the label text on the badge.
* `color`: Sets the label text colour.
* `bgColor`: Sets the label background colour.

### Supported Mapping Sources

* **Ticket class**
  * Set `fieldType` to `ticket`.
  * Set `containValue` to part or all of the ticket class name.
  * Leave `field` empty.
* **Text custom field**
  * Set `fieldType` to `custom_field`.
  * Set `field` to the custom field ID from **Manage Fields**.
  * Set `containValue` to part or all of the custom field text value.

### Minimal Example

```json
{
  "type": "brand",
  "style": {
    "top": 516,
    "left": 10,
    "width": 374,
    "height": 52,
    "fontSize": 16,
    "fontWeight": "bold",
    "numberOfLines": 1
  },
  "shapeType": "rectangle",
  "titleProps": {
    "titleMapping": [
      {
        "color": "white",
        "bgColor": "black",
        "fieldType": "ticket",
        "mappedValue": "VIP",
        "containValue": "VIP"
      }
    ]
  }
}
```

### Full Example

```json
{
  "type": "brand",
  "style": {
    "top": 516,
    "left": 10,
    "width": 374,
    "height": 52,
    "fontSize": 16,
    "fontFamily": "Helvetica",
    "fontWeight": "bold",
    "numberOfLines": 1
  },
  "shapeType": "rectangle",
  "titleProps": {
    "titleMapping": [
      {
        "color": "blue",
        "field": "ea6732a7-bb5d-4b41-b850-b1fe7c646fe0",
        "bgColor": "red",
        "fieldType": "custom_field",
        "mappedValue": "VIP",
        "containValue": "Paid"
      },
      {
        "color": "white",
        "field": "ea6732a7-bb5d-4b41-b850-b1fe7c646fe0",
        "bgColor": "blue",
        "fieldType": "custom_field",
        "mappedValue": "Speaker",
        "containValue": "Speaker"
      },
      {
        "color": "white",
        "field": "ea6732a7-bb5d-4b41-b850-b1fe7c646fe0",
        "bgColor": "black",
        "fieldType": "custom_field",
        "mappedValue": "Delegate",
        "containValue": "Delegate"
      }
    ]
  }
}
```

### Preview Behaviour

![](/files/AWDwN9goxcU07OikI1wm)

***

## Frequently Asked Questions

### Q: What's the difference between Design Mode and Code Mode?

**A:** **Design Mode** provides drag-and-drop editing for standard badge layout changes. **Code Mode** lets you edit the badge template JSON directly — required for Epson colours, brand elements, and advanced layout. See [How to Choose Design Mode or Code Mode](#how-to-choose-design-mode-or-code-mode).

### Q: Can I print colour badges with Brother or Zebra printers?

**A:** No. Only **Epson** supports full-colour printing. Brother and Zebra print in black only. Use Epson if you need colour badges. See [Limitations](#limitations).

### Q: How do I add a "VIP" or "Speaker" label that changes based on ticket type?

**A:** Use a **Brand element** in **Code Mode**. Map `ticket` or `custom_field` values to display labels with custom colours. See [How to Add a Brand Element in Code Mode](#how-to-add-a-brand-element-in-code-mode).

### Q: What is the maximum image file size for badge uploads?

**A:** 2 MB per uploaded image. Images must be PNG or JPG format.

### Q: Can I use Code Mode if I don't know JSON?

**A:** Code Mode requires basic JSON understanding. If you're not comfortable with JSON, use **Design Mode** for most tasks and contact EventX support for advanced template changes.