# Badge Editor

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

To access this page, open the left sidebar, select **In-person Check-in**, then select the **Name Badge** tab.

![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 template.

### 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://eventx-hq.gitbook.io/knowledge-base/badge/badge-setup/badge-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.