Help center

Events

Participant badge

Advanced badge creation editor

inwink proposes a gallery of basic badges that can easily be used. In these templates of badges, it is not possible to edit the size of the text, its alignment, nor the fields shown on it.

Use the badges advanced editor to do so.

Access to the badges advances editor

Open the badge editor in INWINK ONSITE > Badges to modify a badge. Then, click on the following button:

MODIFY THE BADGE DEFINITION

The badge editing window opens:

Modify the badge definition

A badge editing window under the JSON format appears. This allows the modification of the badge’s template.

Explanation of the badge’s JSON

The badge’s template is under the JSON format. There is a hierarchy between each element of the badge that will be called property.

1. FIRST DEGREE OF PROPERTY

This first degree gathers the following proprieties. Each of them is separated by a comma:

“sourcefile”: the source file corresponding to the selected badge’s template. Do not change it.
“width”: the width of the badge in pixels. Do not change it.
“height”: the height of the badge in pixels. Do not change it.
“backgroundColor”: if the background of the badge contains transparent elements, the color that will appear under these elements will be edited here. Put it under hexadecimals.
“elements”: contains all the elements of the badge: background image, information on the participant, QR code, etc. This is where the badge’s template will be modified the most.
“images”: a property used by inwink in order to store the background image. Do not change it.
“parentId”: a property used by inwink. Do not change it.

Example:

{
	"sourcefile": "https://storageprdv2inwink...",
	"width": 2480,
	"height": 3508,
	"backgroundColor": "white",
	"elements": [...
		],
	"images": [...
	],
	"parentId": "c38c5ee9-3ad5-4749-9f3f-d81cf2420ed8"
}

Important

There are 2 other property that can be added at the level. To use some information coming from a SelectList / MultiSelectList in the badge, both of them are necessary:

“lang”: specifies the language to use on the badge (example: “lang”: “en”, or “lang”: ”fr”)
“template”: specifies the template of the entity participating to the event, and then to fill in, for example, available SelectLists / MultiSelectLists values. Ask the CSM in charge to show how to obtain the content of this property.

Example:

{
	"sourcefile": "https://storageprdv2inwink...",
	"lang": "en",
	"width": 2480,
	"height": 3508,
	"backgroundColor": "white",
	"template: [...
	],
	"elements": [...
		],
	"images": [...
	],
	"parentId": "c38c5ee9-3ad5-4749-9f3f-d81cf2420ed8"
}

2. THE ELEMENTS PROPERTY

All the fields to be displayed, gathered in objects, must be located under this property.

This property contains a group of objects dedicated ton it:

image: to put the background image uploaded in the badge’s template in the template. Do not change it.

Example:

{
	"type": "image",
	"x": 0,
	"y": 0,
	"width": 2480,
	"height": 3508,
	"assetKey": "bg"
}

group: this object is a group of objects, such as fields, QR code, etc. It has its own position, its own height, and even its own ID, which allows the duplication somewhere else on the badge. A badge containing the information of the participant in mirror symmetry on both the sides of it will contain two group objects under element. Here are the group properties:
- “type”: specifies that a group is an object type (“type”: “group”)
- “id”: specifies the unique ID of the group
  - “id”: “personbloc” is the ID generally used for a group containing information on a participant
- “x”: positions the group on the page, in pixels, regarding the left side of the badge. The specified value generally is 0.
- “y”: positions the group on the page, in pixels, regarding the upside of the badge. The value depends on the place where to put the group of fields regarding the upside of the badge. On a 14 badge, the value must be comprised between 0 (up of the badge) and 3508 (bottom of the badge).
- “width”: defines the maximal width of the group on the badge. Generally speaking, the value equals the total width of the badge divided by two if it is a badge that needs to be folded in two / four.
- “height”: defines the maximal height of the group on the badge. Generally speaking, the value equals the total height of the badge divided by two. The value specified in the “x” is then subtracted to it.
- “elements”: contains all the fields of the participant that a group must contain.
- “clonefrom”: specifies that this group is a clone of the group which ID is filled in the property. Do not use width, height, elements if this property is used.

Example :

{
	"type": "group",
	"id": "personbloc",
	"x": -60,
	"y": 480,
	"width": 1000,
	"height": 1754,
	"elements": [...
			]
}

Example of a clone group, placed elsewhere than the group cloned on the badge:

{
	"type": "group",
	"clonefrom": "personbloc",
	"x": -60,
	"y": 480,
}

“text”: this type of object allows to display some text on a line, whether it is a static text or a field of the participant. Be careful, if a field might be on several lines, use smarttext, as explained underneath. The proprieties of this object are the following:
- “type”: specifies that the type of object is a text line (“type”: “text”)
- “x”: positions the left side of the text line in regards to the top side of the element containing the text object
- “y”: positions the center of the text line in regards to the top side of the element containing the text object
- “width”: defines the maximal width of the element
- “height”: defines the maximal height of the element
- “fontSize”: defines the size of the font used in pixels
- “fontFamily”: defines the font used. Do not change it, let it in Arial
- “fontWeight”: indicates the weight of the font (numerical values from 100(hin) to 900 (bold))
- “fontColor”: defines the color of the text in hexadecimal
- “alignment”: defines the alignment of the text: “center”, “left” or “right”
- “maxLength”: defines the maximal length of the displayed text, in number of characters.
  Be careful, the uppercase characters take more room than lowercase characters. Please specify a maximal length which can only contain uppercase letters that does not overrun on the sides.
- “lineHeight”: defines the text line height in pixels. It must at least be equal to the font size used.
- “isUpper”: allows to specify if a text is entirely used in uppercases. The value of the property must be “isUpper”: true.
- “transform”: specifies if the text is must begin with a capital letter, followed by lower case letters. The value of the property must be “transform”: “capitalize”. Do not use this property with “isUpper”.
- “template”: contains an object which parameters are depending on the type of text to be displayed:

If this is a static text (for example, the name of the event):

"template": {
		"text": "Mon texte"
		}

If this is a text displaying a dynamic field of the participant (for example, firstname):

"template": {
		"text": "@@firstname@@",
		"map": 
			{
			"firstname": "firstname"
			}
		}

“smarttext”: this type of object allows to display some text on several lines, whether it is a static text or a field of the participant.
- “type”: specifies that the type of the object is a text line (“type”: “smarttext”)
- “x”: positions the left side of the text line compared to the left side of the element containing the smarttext object
- “y”: positions the center of the text line compared to the top side of the element containing the smarttext object
- “width”: defines the maximal width of the element
- “height”: defines the maximal height of the element
- “maxLine”: precises the maximal number of lines that can be dedicated to the text
- “maxLineLength”: defines the maximal number of characters per line.
- “items”: in this property, insert the “text” object to be displayed on several lines, as seen on the previous template.

Example

{
	"type": "smarttext",
	"x": 0,
	"y": 250,
	"width": 1240,
	"maxLineLength": 30,
	"maxLine": 3,
	"lineHeight": 45,
	"items": [
		{
		"type": "text",
		"width": 1240,
		"fontSize": 45,
		"fontFamily": "Segoe UI",
		"fontColor": "black",
		"alignment": "center",
		"template": {
		"text": "@@company@@",
		"map": {
			"company": "company"
			}
		}
}

Important

The field’s maximal number of characters that can be displayed equals the number indicated in “maxLine”, multiplied by the number indicated in “maxLineLength”. If a field contains more characters, it will be cut with an ellipsis.
The “fontSize”, “fontFamily”, “fontWeight”, “fontColor”, “alignment”, “isUpper" and “transform” properties must be precised as properties of the object include in the item, such as in the example above.

Example of common edits

It is better not to create a badge from scratch, but to create it from an existing standard template, and to modify it upon desire with the help of the proprieties described before. Here are some examples of common edits.

1. COMPANY FIELD MAGNIFICATION ON THE BADGE

On the JSON template of the badge, look for the object that shows the company (the technical code of the company is company).


{
	"type": "smarttext",
	"x": 0,
	"y": 250,
	"width": 1240,
	"maxLineLength": 30,
	"maxLine": 3,
	"lineHeight": 45,
	"items": [
	{
	"type": "text",
	"width": 1240,
	"fontSize": 45,
	"fontFamily": "Segoe UI",
	"fontColor": "black",
	"alignment": "center",
	"template": {
		"text": "@@company@@",
		"map": {
			"company": "company"
		        }
	             }
        }
	]
},
{
	"type": "qrcode",
	"template": {
		"text": "http://inw.ink/e/@@eventId@@/@@info@@",
		"map": {
			"info": "badgeId",
			"eventId": "eventId"
		}
	},
	"x": 470,
	"y": 375,
	"width": 300,
	"height": 300,
	"padding": 0,
	"background": "#fff"
}

Increase the size in “fontSize” to 55.

Since the font size is now of 55px, it is consequently necessary to increase the size of the lines. Increase the “lineHeight” property to 55.

Since the font size increases, the maximal length on the lines must be reduced in order to take into account that the width of the letters increases. Here, reduce the “maxLineLength” to 25.

Then, since the size of the lines was increased by 10, it is necessary to move all the objects located under the field by at least 30 (so, add 30 to the indicated value under the “y” property of the objects under Company). Here, the QR code of the badge appears underneath the block. So, “y” : 375 must change to “y”: 405.

Here is the result:

{
	"type": "smarttext",
	"x": 0,
	"y": 250,
	"width": 1240,
	"maxLineLength": 25,
	"maxLine": 3,
	"lineHeight": 55,
	"items": [
	{
	"type": "text",
	"width": 1240,
	"fontSize": 55,
	"fontFamily": "Segoe UI",
	"fontColor": "black",
	"alignment": "center",
	"template": {
		"text": "@@company@@",
		"map": {
			"company": "company"
		        }
	             }
        }
	]
},
{
	"type": "qrcode",
	"template": {
		"text": "http://inw.ink/e/@@eventId@@/@@info@@",
		"map": {
			"info": "badgeId",
			"eventId": "eventId"
		}
	},
	"x": 470,
	"y": 405,
	"width": 300,
	"height": 300,
	"padding": 0,
	"background": "#fff"
}

2. SHOWING THE PROFESSION FIELD INSTEAD OF THE COMPANY ONE

Look for the object showing the company in the JSON template of the badge (the technical code of the company field is company).


{
	"type": "smarttext",
	"x": 0,
	"y": 250,
	"width": 1240,
	"maxLineLength": 30,
	"maxLine": 3,
	"lineHeight": 45,
	"items": [
	{
	"type": "text",
	"width": 1240,
	"fontSize": 45,
	"fontFamily": "Segoe UI",
	"fontColor": "black",
	"alignment": "center",
	"template": {
		"text": "@@company@@",
		"map": {
			"company": "company"
		        }
	             }
        }
	]
}

Change the technical code of the Company field, company. Replace it with the technical code of the Profession field, jobTitle.

Here is the result:

{
	"type": "smarttext",
	"x": 0,
	"y": 250,
	"width": 1240,
	"maxLineLength": 30,
	"maxLine": 3,
	"lineHeight": 45,
	"items": [
	{
	"type": "text",
	"width": 1240,
	"fontSize": 45,
	"fontFamily": "Segoe UI",
	"fontColor": "black",
	"alignment": "center",
	"template": {
		"text": "@@jobTitle@@",
		"map": {
			"jobTitle": "jobTitle"
		        }
	             }
        }
	]
}

3. GETTING A BOLD AND IN UPPERCASES NAME FIELD

Look for the object showing the last name in the JSON template of the badge (the technical code of the Name field is lastName).


{
	"type": "smarttext",
	"x": 0,
	"y": 250,
	"width": 1240,
	"maxLineLength": 30,
	"maxLine": 3,
	"lineHeight": 45,
	"items": [
	{
	"type": "text",
	"width": 1240,
	"fontSize": 45,
	"fontFamily": "Segoe UI",
	"fontColor": "black",
	"alignment": "center",
	"template": {
		"text": "@@lastname@@",
		"map": {
			"lastname": "lastname"
		        }
	             }
        }
	]
}

Add the following features to the object:

“fontWeight”: 900,
“isUpper”: true,

Here is the result:

{
	"type": "smarttext",
	"x": 0,
	"y": 250,
	"width": 1240,
	"maxLineLength": 30,
	"maxLine": 3,
	"lineHeight": 45,
	"items": [
	{
	"type": "text",
	"width": 1240,
	"fontSize": 45,
	"fontFamily": "Segoe UI",
	"fontWeight":900,
	"isUpper": true,
	"fontColor": "black",
	"alignment": "center",
	"template": {
		"text": "@@lastname@@",
		"map": {
			"lastname": "lastname"
		        }
	             }
        }
	]
}

4. APPEARANCE OF AN INFORMATION FROM A SELECTLIST / MULTISELECTLIST ON THE BADGE

It is possible to add the information on a participant coming from a SelectList.

In order to do so, add 2 proprieties to the badge’s 1st level of JSON hierarchy:

“lang”: indicate the language of the badge (example: “lang”: “en”, or “lang”: “fr”)
“template”: specify the template of the event’s participant entity and then to fill in, for example, the SelectLists / MultiSelectLists values available. This is the JSON located on the Setup screen of the Participant entity. Ask the CSM to make a demonstration of how to get this property’s content.


{
	"sourcefile": "https://storageprdv2inwink...",
	"lang": "en",
	"width": 2480,
	"height": 3508,
	"backgroundColor": "white",
	"template: [...
	],
	"elements": [...
		],
	"images": [...
	],
	"parentId": "c38c5ee9-3ad5-4749-9f3f-d81cf2420ed8"
}

Once this is done, add an “elements” object that will appear in the SelectList field.

For example, to only display a MultiSelectList Category field which technical code is kinds:

Here is the result:

{
	"type": "smarttext",
	"x": 0,
	"y": 250,
	"width": 1240,
	"maxLineLength": 30,
	"maxLine": 3,
	"lineHeight": 45,
	"items": [
	{
	"type": "text",
	"width": 1240,
	"fontSize": 45,
	"fontFamily": "Segoe UI",
	"fontWeight": 900,
	"isUpper": true,
	"fontColor": "black",
	"alignment": "center",
	"template": {
		"text": "@@kinds@@",
		"meta": " ",
		"map": {
			"kinds": "kinds"
		        }
	             }
        }
	]
}

The “meta” property allows, when adding a MultiSelectList, to precise the separator between the multiple values to show. This property is not necessary when the field to show is a SelectList.

Check the edits

Once the edits in the advanced editor are made, click on SAVE at the bottom right of the window.

Then, click on PREVIEW at the bottom right of the window in the badge editor:

Preview Preview

It is then possible to check the appearance of the badge:

Whether with real information on one of the event’s participants
Or with a fake participant whose information is generated with the longest titles for every Participant field used in the badge

Please check that the modified / added fields don’t encroach on fields of the badge when the information on the participant are long:

That the longest first name fits in the badge
That the longest last name fits in the badge
That the longest Company fits in the badge
Etc.