Badge du participant
      Revenir à l'accueil
      1. Centre d'aide
      2. Evènements
      3. Badge du participant

      Éditeur avancé de création de badges et de billets

      Pour les badges/billets, inwink propose une galerie de modèles standards utilisable d'un simple clic.
      Dans ces templates, si l'on souhaite modifier la taille du texte, son positionnement, ainsi que les champs affichés, il st nécessaire d'utiliser l'éditeur avancé.

      Accéder à l'éditeur avancé de badge/billet

      Depuis le back-office, dans ONSITE > Templates de badge/billet

      Editez le bagde/billet à modifier et cliquez sur sur le bouton :
                                                    "Modifier le contenu du template"


      Une fenêtre d'édition au format JSON s'ouvre, vous permettant de modifier le template de votre badge/billet.

       

      Explication du contenu JSON

      Le template des badge/billet est géré au format JSON.

      Il existe une hiérarchie entre chaque élément, que l'on nommera propriété.

      1. PREMIER NIVEAU DE PROPRIÉTÉS

      Ce premier niveau regroupe les propriétés suivantes, chacune séparée par une virgule :

      • "sourcefile" : le fichier source correspondant au template de badge/billet que vous avez sélectionné. Ne pas y toucher.
      • "width" : la largeur en pixels de votre badge/billet. Ne pas y toucher.
      • "height" : la hauteur en pixels de votre badge/billet. Ne pas y toucher.
      • "backgroundColor" : si votre fond de badge/billet contient des éléments transparents, la couleur qui s'affichera sous ces éléments transparents sera celle paramétrées ici. A renseigner en hexadécimal.
      • "elements" : contient l'ensemble des éléments de votre badge/billet : image de fond, informations du participant, QR code, etc. C'est ici que vous serez le plus amené à modifier le template du badge/billet/billet.
      • "images" : il s'agit d'une propriété utilisée par inwink pour stocker l'image de fond. Ne pas y toucher.
      • "parentId" : il s'agit d'une propriété utilisée par inwink. Ne pas y toucher.

      Exemple :

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

      Important
      Il existe 2 autres propriétés que l'on peut ajouter à ce niveau, toutes deux nécessaires si vous souhaitez utiliser des informations issues d'une SelectList / MultiSelectList dans votre badge/billet :

      • "lang" : permet de spécifier la langue à utiliser dans le badge/billet (exemple : "lang": "en", ou "lang": "fr")
      • "template": permet de spécifier le template de l'entité participant de votre événement, et ainsi de renseigner, notamment, les valeurs des SelectLists / MultiSelectLists disponibles. Demandez à votre CSM de vous montrer comment obtenir le contenu de cette propriété.

      Exemple :


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

      2. LA PROPRIÉTÉ ÉLÉMENTS

      C'est dans cette propriété que devront se situer l'ensemble des champs que vous allez afficher, regroupés dans des objets.

      Cette propriété contient un ensemble d'objets qui lui sont propres :

      • image : permet d'appeler l'image de fond que vous avez chargée dans votre template de badge/billet au template. Ne pas y toucher.
          Exemple:
      {
      	"type": "image",
      	"x": 0,
      	"y": 0,
      	"width": 2480,
      	"height": 3508,
      	"assetKey": "bg"
      }
      • group : cet objet est un groupe d'objets, tels que vos champs, votre QR code, etc. Il possède sa position propre, sa taille propre, et même son propre identifiant permettant ensuite de le dupliquer ailleurs sur le badge/billet. Un badge/billet contenant les informations du participant en miroir sur deux faces du badge/billet contiendra deux objets group au sein d'élément. Voici les propriétés de group:
        • "type": permet de spécifier que le type d'objet est un groupe ("type": "group")
        • "id" : permet de spécifier l'id unique du groupe
          • "id": "personbloc" est l'id généralement utilisé pour le groupe contenant les informations du participant
        • "x" : permet de positionner le groupe dans la page, en pixels par rapport à la partie gauche du badge/billet. Généralement, la valeur spécifiée est 0.
        • "y" : permet de positionner le groupe dans la page, en pixels par rapport à la partie haute du badge/billet. La valeur dépend de l'endroit où vous souhaitez positionner votre groupe de champs par rapport au haut du badge/billet. Sur un badge/billet A4, elle doit être comprise entre 0 (haut du badge/billet) et 3508 (bas de badge/billet).
        • "width" : permet de définir la largeur maximale du groupe sur le badge/billet. Généralement, la valeur est égale à la largeur totale du badge/billet divisée par deux s'il s'agit d'un badge/billet à plier en deux / quatre.
        • "height" : permet de définir la hauteur maximale du groupe sur le badge/billet. Généralement, la valeur est égale à la hauteur totale du badge/billet divisée par deux, à laquelle on retranche la valeur spécifiée dans x plus haut.
        • "elements" : contient l'ensemble des champs du participant que le groupe doit contenir.
        • "clonefrom" : permet de spécifier que ce groupe est une copie du groupe dont l'id est renseigné dans la propriété. Ne pas utiliser width, height, elements si cette propriété est utilisée
          Exemple :
      {
      	"type": "group",
      	"id": "personbloc",
      	"x": -60,
      	"y": 480,
      	"width": 1000,
      	"height": 1754,
      	"elements": [...
      			]
      }

      Exemple de groupe étant un clone du groupe précédent, mais placé ailleurs sur le badge/billet :

      {
      	"type": "group",
      	"clonefrom": "personbloc",
      	"x": -60,
      	"y": 480,
      }
      • text : ce type d'objet permet d'afficher du texte sur une ligne, que ce soit du texte statique ou un champ du participant. Attention, si le champ est susceptible de passer sur plusieurs ligne, utiliser smarttext, expliqué ci-dessous. Les propriétés de cet objet sont les suivantes :
        • "type": permet de spécifier que le type d'objet est une ligne de texte ("type": "text")
        • "x" : permet de positionner le bord gauche de la ligne de texte par rapport au bord gauche de l'élément qui contient l'objet text
        • "y" : permet de positionner le centre de la ligne de texte par rapport au bord haut de l'élément qui contient l'objet text
        • "width" : permet de définir la largeur maximale de l'élément
        • "height" : permet de définir la hauteur maximale de l'élément
        • "fontSize" : permet de définir en pixels la taille de la police utilisée
        • "fontFamily" : permet de définir la police utilisée. Ne pas modifier, laisser en Arial
        • "fontWeight" : permet d'indiquer l'épaisseur du texte (en valeur numériques de 100(thin) à 900(bold))
        • "fontColor" : permet de définir la couleur du texte, spécifiée en hexadécimal
        • "alignment" : permet de définir l'alignement du texte : "center", "left" ou "right"
        • "maxLength" : permet de définir la longueur maximale de texte à afficher en nombre de caractères.
          Attention, les caractères en majuscules prennent plus de place que les caractères en minuscule, pensez donc bien à spécifier une longueur maximale qui ne puisse contenir que des lettres en majuscules sans déborder sur les côtés.
        • "lineHeight" : permet de définir, en pixels, la hauteur de la ligne de texte. Doit être au moins égale à la taille de la police utilisée.
        • "isUpper" : permet de spécifier si le texte doit être entièrement affiché en majuscules. La valeur de la propriété doit alors être "isUpper": true.
        • "transform": permet de spécifier si le texte doit commencer par une majuscule, suivie de minuscules. La valeur de la propriété doit alors être "transform": "capitalize". Attention de ne pas l'utiliser cette propriété avec "isUpper".
        • "template" : contient un objet, dont les paramètres dépendent du type de texte à afficher :
            • S'il s'agit d'un texte statique (par exemple, le nom de l'événement) :
      "template": {
      		"text": "Mon texte"
      		}
          • S'il s'agit d'un texte affichant un champ dynamique du participant (par exemple, **firstname**): 
            "template": {
            		"text": "@@firstname@@",
            		"map": 
            			{
            			"firstname": "firstname"
            			}
            		}
      • smarttext : ce type d'objet permet d'afficher du texte sur plusieurs lignes, que ce soit du texte statique ou un champ du participant.
        • "type": permet de spécifier que le type d'objet est une ligne de texte ("type": "smarttext")
        • "x" : permet de positionner le bord gauche de la ligne de texte par rapport au bord gauche de l'élément qui contient l'objet smarttext
        • "y" : permet de positionner le centre de la ligne de texte par rapport au bord haut de l'élément qui contient l'objet smarttext
        • "width" : permet de définir la largeur maximale de l'élément
        • "height" : permet de définir la hauteur maximale de l'élément
        • "maxLine" : permet de préciser le nombre maximal de lignes que peut occuper le texte
        • "maxLineLength" : permet de définir le nombre maximal de caractères par ligne.
        • "items" : dans cette propriété, vous devez insérer l'objet "text" que vous voulez afficher sur plusieurs lignes, sur le modèle de ce qui a été vu précédemment.
            • Exemple
      {
      	"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

            • Le nombre maximal de caractères du champ qui peuvent être affichés est égal au nombre indiqué dans "maxLine" multiplié par le nombre indiqué dans "maxLineLength". Si un champ contient plus de caractères, il sera alors coupé par trois points de suspension.
            • Les propriétés "fontSize", "fontFamily", "fontWeight", "fontColor", "alignment", "isUpper", "transform" sont à préciser en propriétés de l'objet inclus dans item, comme dans l'exemple ci-dessus.

      Exemples de modifications courantes

      Vous ne devriez jamais construire un badge/billet à partir de 0, mais partir d'un template standard existant, et le modifier selon vos désirs à l'aide des propriétés précédemment exposées. Voici quelques exemples de modifications fréquentes.

      1. JE VEUX GROSSIR LE CHAMP SOCIÉTÉ DE MON BADGE/BILLET

      Dans le template JSON du badge/billet, je cherche l'objet affichant la société (le code technique du champ société est 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": "badge/billetId",
      			"eventId": "eventId"
      		}
      	},
      	"x": 470,
      	"y": 375,
      	"width": 300,
      	"height": 300,
      	"padding": 0,
      	"background": "#fff"
      }

      J'augmente la taille renseignée dans "fontSize" à 55.

      Comme la taille de la police passe à 55px, je dois augmenter la taille des lignes en conséquence. Je passe donc la propriété "lineHeight" à 55.

      De plus, comme la taille de l police augmente, la longueur maximale des lignes doit être réduite, afin de prendre en compte la largeur des lettres qui augmente. Ici, je passe "maxLineLength" à 25.

      Enfin, comme la taille des lignes a été augmentée de 10, je dois décaler tous les objets qui apparaissent en dessous de mon champ de minimum 30 (donc ajouter 30 à la valeur indiquée dans la propriété "y" des objets en-dessous de Société). Ici, le QR code de mon badge/billet apparaît en-dessous de mon bloc, je passe donc "y": 375, à "y": 405,.

      Voici le résultat :

      {
      	"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": "badge/billetId",
      			"eventId": "eventId"
      		}
      	},
      	"x": 470,
      	"y": 405,
      	"width": 300,
      	"height": 300,
      	"padding": 0,
      	"background": "#fff"
      }

      2. JE VEUX AFFICHER LE CHAMP FONCTION À LA PLACE DU CHAMP SOCIÉTÉ

      Dans le template JSON du badge/billet, je cherche l'objet affichant la société (le code technique du champ société est 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"
      		        }
      	             }
              }
      	]
      }

      Je change le code technique du champ Société, company, par le code technique du champ Fonction, jobTitle.

      Voici le résultat :

      {
      	"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. JE VEUX PASSER LE CHAMP NOM EN GRAS ET EN MAJUSCULES

      Dans le template JSON du badge/billet, je cherche l'objet affichant le nom de famille (le code technique du champ Nom est 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"
      		        }
      	             }
              }
      	]
      }

      J'ajoute les propriétés suivantes à l'objet :

      • "fontWeight": 900,
      • "isUpper": true,

      Voici le résultat :

      {
      	"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. JE VEUX UTILISER UNE INFORMATION ISSUE D'UNE SELECTLIST / MULITSELECTLIST DANS MON BADGE/BILLET

      Il est possible d'ajouter les informations d'un participant issues d'une SelectList.

      Pour cela, vous devez ajouter 2 propriétés au 1er niveau de la hiérarchie JSON de votre badge/billet:

      • "lang" : indiquer la langue à utiliser dans le badge/billet (exemple : "lang": "en", ou "lang": "fr")
      • "template": permet de spécifier le template de l'entité participant de votre événement, et ainsi de renseigner, notamment, les valeurs des SelectLists / MultiSelectLists disponibles. Il s'agit du JSON contenu dans l'écran Configurer de l'entité Participant. Demandez à votre CSM de vous montrer comment obtenir le contenu de cette propriété.

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

      Une fois cela fait, je n'ai plus qu'à ajouter un objet dans "elements" qui affichera mon champ SelectList.

      Par exemple, si je souhaite afficher le champ de type MultiSelectList Catégorie dont le code technique est kinds :

      Voici le résultat :

      {
      	"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"
      		        }
      	             }
              }
      	]
      }

      La propriété "meta" permet, si j'ajoute une MultiSelectList, de préciser le séparateur entre les valeurs multiples à afficher. Elle n'est pas nécessaire si le champ à afficher est une SelecList.

      4. JE VEUX PLACER CÔTE à CÔTE PRENOM et NOM du PARTICIPANT SUR MON BADGE/BILLET

      Il est possible d'ajouter les prénom et nom d'un participant côte à côte plutôt que l'un au dessus de l'autre sur un badge
      Afin de permettre cet affichage il faut, au niveau du bloc "template" du firstname :

      • Ajouter dans "text"  @@lastname@@ juste après @@firstname@@
      • Ajouter dans "map" une seconde ligne "lastname": "lastname" (bien séparer cette ligne de celle du dessus avec une virgule)
      {
      	"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": "@@firstname@@ @@lastname@@",
      		"map": {
      			"firstname": "firstname",
                              "lastname": "lastname"
      		        }
      	             }
              }
      	]
      }

      A noter, en cas de nom long, un ajustement est à prévoir afin de permettre le passage à la ligne. 

      Le paramètre "maxLine" définit le nombre maximum de lignes possibles, si le couple Prénom/Nom est particulièrement long,  il faut modifier le nombre de lignes pour éviter de couper une partie du nom affiché

      • Supprimer ensuite la propriété "Lastname" désormais présente dans le bloc du Firstname 
        (Voir ci-après comment supprimer une propriété)

      6. JE VEUX SUPPRIMER UNE PROPRIETE, par exemple, la Société du participant, que je n'ai pas besoin d'afficher DANS MON BADGE/BILLET

      Comme pour chaque exemple présenté ci-dessus, il est nécessaire de rester très prudent lorsque l'on modifie les propriétés d'un template.
      Il faut être encore plus attentifs en cas de suppression d'une propriété car cela peut impacter l'affichage global du modèle.
      Il est donc conseillé de :

      • Dupliquer le modèle de badge/Billet avant la modificaiton
      • Copier/coller le contenu à supprimer dans un éditeur de texte au préalable


      Les propriétés sont toutes crées sur le même format. Les informations se trouvant systématiquement entre une accolade ouvrante et une fermante. 

      Dans le corps de la propriété peuvent se retrouver d'autres accolades. Toute accolades ouvrantes aura une accolade fermante.

      Pour supprimer la propriété, on part de la première accolade placée juste avant le "type", puis on sélectionne, accolade y compris, ce qui se trouve en dessous jusqu'à l'accolade fermante (y compris la virgule si présente).  

      Dans le JSON, si on clique juste à côté d'une accolade ouvrante, on peut identifier quelle est son accolade fermante, qui sera alors sélectionnée et dans l'axe sur la même colonne. 


      {
      	"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"
      		        }
      	             }
              }
      	]
      },

       

      Vérifier les modifications apportées

      Une fois vos modifications faites dans l'édtieur avancé, cliquez sur ENREGISTRER en bas à droite de la fenêtre.

      Puis, dans l'éditeur de badge/billet, cliquez sur PREVISUALISER en bas à droite de la fenêtre:

      PrévisualiserPrévisualiser

       

      Vous pouvez alors vérifier l'apparence de votre badge/billet :

      • soit avec les informations réelles d'un des participants de votre événement
      • soit avec un participant fictif dont les informations ont été générées avec les intitulés les plus longs pour chaque champ Participant utilisé dans votre badge/billet

      Vérfiez notamment que les champs modifiés / ajoutés n'empiêtent pas sur d'autres champs du badge/billet quand les informations du participant sont longues :

      • que le prénom le plus long rentre bien dans le badge/billet
      • que le nom le plus long rentre bien dans le badge/billet
      • que la société la plus longue rentre bien dans le badge/billet
      • etc.