Registration

The Registration Widget enables integration of EventNX Registration system with your existing event registration form. This is the most important widget that ensures that the users are registered in EventNX as well as your system.

Below are the primary functions of this widget -

1. When a user is redirecting from LinkedIn or Facebook, we are able to autofill the user's First Name, Last Name, Email & Country in the form automatically.
2. You are able to set additional fields (up to 5) that you wish to pass to EventNX registration system
3. Submission of registration in parallel to your registration event.

Creating the Widget

To create the Registration Widget follow the steps as below -

1. Login to app.eventnx.com and navigate to Events from the Sidebar
2. Click on Edit from the Actions column in the Events list shown on the page, note - if you haven't already created your event then do that first.
3. On the Event Settings page from the Event Settings, navigate to the Widgets section

Once you are on the Widgets section, follow the below steps -

1. Click on Create Widget from the top right corner.
2. Click on Select next to the Registration widget under the Widget Options
3. Once selected, on the right side enter a name for your widget and choose or set a channel for the widget.

You can now start configuring the widget. Also, you can always change the widget name and channel for existing widgets by navigating to More > Edit from the Widgets section.

Configuring the Widget

Form or Button CSS Selector ⚠️

To load the Registration Widget, the script expects a FORM or a BUTTON already present on your page. If you have not already created the Form or the Button on your page then simply create as below

<form id="enx-registration-form" ...></form>

Or if you are using as Button

<button id="enx-registration-form" ...></form>

The default CSS Selector is #enx-registration-form, if you want it to load to another form or button element then set the respective element's CSS selector in this setting.

^{Note - This is an important setting to ensure the widget works correctly}

Form Fields Mapping ⚠️

To map your form fields with EventNX you need to configure the CSS Selectors on your form for fields shown in the table, for example

1. If your input has ID attribute as <input id="firstName">, please put #firstName as the selector.
2. If your input has Name attribute as <input name="firstName">, please put [name="firstName"] as the selector.

If you don't set any, than the system will automatically use the defaults as autofilled or shown in the placeholder. Please ensure that the First Name, Last Name and Email are set as they are minimum required fields.

Settings	Description	HTML
First Name	Mandatory, also to autofill from Social Registration	<input id="firstName" type="text"></input>
Last Name	Mandatory, also to autofill from Social Registration	<input id="lastName" type="text"></input>
Email	Mandatory, also to autofill from Social Registration	<input id="email" type="text"></input>
Company		<input id="companyName" type="text"></input>
Designation		<input id="desgination" type="text"></input>
Accept terms of service	Optional, to store if the user has accepted terms of service (Privacy feature)	<input id="chkbxAcceptTermsOfService" type="checkbox"></input>
Emails from event organizer	Optional, to store if the user has consented to receive emails from organizers(Privacy feature)	<input id="chkbxEmailsFromOrganizer" type="checkbox"></input>
Profile Picture	This can be optionally used to show and store the user's profile picture	<img id="profilePic" />

^{Note - This is an important setting to ensure the widget works correctly}

Additional Fields Mapping

EventNX lets you pass up to 5 additional fields to your forms, these fields can be dynamically configured on your form by following the below approach

1. EventNX expects that you have two elements on your form, one is a label for the additional field and the other is the corresponding input element
2. Set the CSS Selector of the label to Additional Field Label 1 and the CSS Selector of the input to Additional Field Value 1.

As an example, if your HTML for additional fields look like below

<label for="nationality">Nationality</label>

<input name="nationality" />

Your configuration in the Additional Fields Mapping should look like below

Form Field	Description
Additional Field Label 1	[for="nationality"]
Additional Field Value 1	[name="nationality"]

Once all the above settings are set press Save, you are now ready to install the widget on your page! 😇

Robust & Fail-proof

The EventNX Registration widget is designed in a way that if you follow the above steps, irrespective of any issues or errors with the widget your primary registration flow will never be broken.