Add Options for Badges in Wizard

[mariobehling]

Add options for badges in the event wizard after "Attendee Form".

Provide a button "Switch on/off".

Allow organiser to choose fields from a dropdown to show and no duplicates

• Name
• Organisation
• Position
• QR code (to show if option to be used for checkin and sharing of contact info is true)

When the user chooses "QR Code" also provide the option to include more info through a dropdown menu with tickboxes, e.g. if the user wants to include Email, Website, and Linkedin in the Barcode. On scan, .vcf contact file will be downloaded

Compare: https://help.eventnook.com/en/articles/6005872-how-to-customize-event-badge

In the badge template, there are essential options to customize:

• the Badge Size, Badge Orientation, and Badge Color.
• the fields inside the badge, such as the delegate's name, company, job title, category, QR Code
• the styling of the font such as Font Size, Alignment, Text Style (such as Upper Case, Lower Case, etc.)
• Custom paper sizes
• As the user designs the badge, they can preview the final result of the badge.

Finally provide a button below which lets the user download a sample PDF.

Download Example Badge

[marcoag]

There's https://github.com/fossasia/badgeyay which is also emberjs, code can be reused from that project for this.

[mariobehling]

From @lthanhhieu

I would like to share with you the attached image, which represents the UI Mockup for ticket #8683: Add Options for Badges in Wizard.

Could you please to review the image and provide any feedback or requirements you may have.

Apart from that, could you kindly tell me what happens next after the badge is created? We'll send it to attendees through email, make a link for them to download, or display it someplace on the front end so they may print the badge?

[cweitat]

@lthanhhieu the template is stored at backend and retrieved to generate and compile the data into PDF which is taken via API to print as mentioned here: fossasia/open-event-server#8955

Do add the following instructions at the arrow similar to this

Information about Badge Creator
This badge creator lets you position the data that is going to be printed on the badge. Do note that the image is for PREVIEW only and not going to be printed with the data.

• as a start, page size we can go with 4x3inch and 4x6inch (and also display in mm)
• Customisable margin top left right down for each field
• No rounded corner
• Font name and font colour can be excluded
• Text alignment can be set to center
• Maximum rows should tally with the number of fields available

Do factor in if the field overflows to another line as well

Upload of image is to preview of how the image looks like but is not going to be printed
Show Preview on click should download the preview in a PDF and opening it in a new tab

[cweitat]

Flow of map

[ghost]

Up date meeting note for this issue:

• Fields are missed when combine 2 ticket types  Show warning for Organizer to notify that the fields are not available. Warning sample: <field_name> is not available in ticket <ticket_name>
• Only text can be printed, the background only show for reviewing.
• Generate PDF at server and send the link for user to download. (Following the ticket: Return a PDF for badge printing from server #8955)
• If organizer chooses the QR code when create badge template, that will be always show when user print the badge.
• When user selects the fields to show, keep the field same position in template.
• Adding all options from screenshot for Font Setting.
  • Each language has at least 1 font supported.
  • At least 1 font supports all languages.

[ghost]

Hi @mariobehling @cweitat
New update for add row. We already added font and position.
Please let me know if you need to change any.

[mariobehling]

Thank you. Looks good.

[mariobehling]

1. About the QR code in badge, Do you want to add all fields from attendee form, including the custom questions? Or just the fields such as contact, name, address, link (facebook, github, linkedin, etc.) , job title, email? Please share me the list of data you want to add to QR code.

In regards to the QR code. The QR code should be in VCF card format and have the following fields

• Email
• All fields that the organizer decided to display on the badge
• Ticket ID in a custom form field
  • Form field should have key EVENTYAY

2. For manual check-in from Organizer, could you please share me how to organizer does the manual check-in? It's the same with check-in at kiosk?

Manual check in is same as kiosk just that organiser uses search function to find via name/email

[cweitat]

@lthanhhieu previous UI was missing upload image label. do remember to add that as well

[ghost]

@lthanhhieu previous UI was missing upload image label. do remember to add that as well
We also did it mr. @cweitat

[ghost]

From MR. @cweitat

in VCF, u can create custom fields
so there should be a field named "EVENTYAY" that returns the ticket id
that i can retrieve to do for scanning