Skip to main content

Custom Website

Identifying pages to install the widgets#

Connect Widget: The Connect Widget needs to be installed on your registration landing page, where you can show the user different methods to register (via Social Buttons or via Email). The Connect Widget will redirect the user to the registration form.

Registration Widget: The Registration widget is installed on your registration form page to collect registration and also on your confirmation page to mark a registration in EventNX as complete. If you have multiple pages for your form then install on each form page, apart from the entry and the completion pages.

Who's Coming Widget: The Who's Coming widget is to be installed on your confirmation page once the user has finished his registration and it is considered as complete. The Who's Coming widget will automatically show who else is attending the event and provide sharing options to the user.

To mark the registrations as COMPLETED, add the Registration Widget Script in the <head> area of the confirmation page. In case, the same is not placed, registrations received will be shown as PARTIAL.

How to install the Widget on your page#

To install the Widget on your website, just follow the brief steps below

  1. On the Widgets section of your event, ensure your widget is Active using the toggle provided in the Active Column on the widget table.
  2. Click on More > Get Code from the Actions column
  3. Place the script inside the <head> section of your page.
  4. A sample HTML page with the script loaded is shown below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>EventNX Widgets</title>
<script src="https://widgets.eventnx.com/loader.js?w=664f7969-c82f-4af3-b28f-0c9fcb4b7511"></script>
</head>
<body>
...
</body>
</html>

Troubleshooting#

EventNX Widgets scripts have inbuilt debugging features that print logs to your browser console, this can be helpful to identify any configuration or setup related issues. To view the logs just follow the below instructions.

  1. Navigate to the page where you have the widget script installed from the previous step.
  2. Once the page is loaded, right click on any empty area on the screen and select Inspect Element from the context menu which will launch Developer Tools
  3. On the Developer Tools window, navigate to the Console tab to see the logs generated from the Widget
  4. Read through the logs printed on the Console to identify the errors with the script.

Frequently observed issues#

  1. The CSS Container is wrongly configured - You have a mistake in the CSS Selector you have configured for the widget, to debug this just try to run the below script on the Developer Console.
document.querySelector("__YOUR_SET_CONTAINER_SELECTOR__");

If the above prints an error that means that the CSS selector is wrongly configured or is not present on the page.

  1. Dynamically loaded container or forms - If your Container or Forms does not load with the page and is loaded dynamically via javascript then ensure that our Widget script is executed after your dynamic script is completely loaded.

  2. The Appearance is broken - This happens if you have existing CSS frameworks like Bootstrap that are conflicting with the widget styles. You can add more overrides to clear these styles or remove the generic css styles from your page.

  3. Using iframe based forms - The Registration Widget expects your <form> or your <button> is on the same page and not loaded within an iframe, we do not support <iframe> based forms on your page.

Multiple Widgets

EventNX lets you create multiple widgets for the same event, this can be useful when you are integrating EventNX on your website and also on partner websites. Each widget can be customized separately.

Edit this page