Articles in this section
Category / Section

How to Build a Registration Page for a Virtual Event in Zuddl

Published:
22 mins read
Updated:

It is essential to have a well-designed registration page for your event to promote it to your audience and eventually increase website conversion. With the registration page builder, you can quickly create your registration page for registration without coding or manually designing it.

This guide walks you through the steps to create a registration page for your event. While the registration page builder can be used by anyone, folks with web designing experience can use this feature.


Steps:

To create a custom registration page,

  1. On your Zuddl organizer dashboard, go to Registration.
  2. Click on Create New Page. Multiple starter templates are available for you to start building your page. Each template has a specific style or theme, but you can fully customize any template.
  3. To get started, hover over any template you think would suit your website and click Use template. This takes you to the editor page.

    Screenshot 2025-03-27 at 3.03.04 PM


Editor overview

Getting acquainted with the editor layout is essential so you can quickly design your registration page. The table below enlists all the functions in the editor:

LocationFunctionDescription
TopbarPage switcherJump to the different pages of your site
TopbarDevice Layout optionsDesktop, Tablet, or Mobile
TopbarUndo and RedoUndo or redo actions
TopbarPreviewOpen a preview of your registration page
TopbarPublish/RepublishPublish or republish your site after you've made the changes.
TopbarHome buttonThis redirects you back to the Zuddl Registration page
TopbarInfo sectionShow the registration page URL and the status
SidebarGlobal designCustomize the design of your registration page
SidebarPagesAdd, move, or reorder pages
SidebarWidgetsDrag and drop widgets into your registration page
SidebarSEO & SettingsSEO and general site settings


In the middle, you have the content editor. You can edit everything that you see here. You drag and drop widgets or click on them to view the editing options.

Content Editor.png

The Home button in the upper bar takes you back to the organizer dashboard.


Edit page contents

It is essential to build a page that is responsive to all devices. Regardless of the template, your page is arranged into grids of rows and columns, which you can move around. The changes you make to any element on the page are applied only to that element.

To edit any element, click on the content that shows you the context menu to make changes.

  • On the top-left corner of any row, you can find the row options; you can
    • Move rows/columns
    • Add/delete rows and columns. You can add up to 4 columns per row.
    • Resize a row/column. To resize a row, click on the row/column separator between two rows/columns and drag to resize.
    • Edit the design of the row/column, such as background, layout, and spacing.


Edit theme settings

Using the theme settings, you can make design changes that apply to all page elements and override the settings made here by making edits to individual locations. You can edit the following:

  • Colors: The colors used in the page are shown here. You can add more colors to this section to reuse them as required.
  • Buttons: This option allows you to change button style, text, color, image, and other settings.
  • Text: This option allows you to change font style, color, size, format, and other settings for text, paragraphs, and up to 6 heading levels.
  • Images: set the image layout and a few other settings. You can override the global settings made here by editing individual images.
  • Rows & Columns: This option allows you to edit the default rows, columns, and background.
  • Backgrounds: This option allows you to set the background for all pages per page. You can also set the color and image.
  • Site Layout: This option allows you to set the site layout, such as Sidebar, Topbar, Mobile view, and more.

Screenshot 2025-03-27 at 3.10.39 PM

Add a page

The Pages option has two sub-options, Pages and Popups. Irrespective of the selected template, a few pages are shown by default. For a blank template, the following pages are shown:

  • Home
  • About
  • Service
  • Team
  • Contact

You can edit the existing pages or add a new page, as shown below:

Screenshot 2025-03-27 at 3.11.28 PM


Then there are Popups, which, as the name suggests, are interactive elements that pop over a page, which usually require the user to take action. You can view details about individual popups by hovering over them in the list.
Screenshot 2025-03-27 at 3.13.20 PM


Edit widgets

Widgets are your best friend when asking users to take action, especially on an event registration page. You can drag and drop a widget into the grids. To edit a widget, click a widget to open the edit option. You can:  

  • Edit the widget's content, such as button text, URL, etc.
  • Customize the design using background color, row spacing, and more.
  • Right-click to view more options, such as copy-paste alignment, and hide the widget by device.


Add a Flex widget

Add the Flex Registration widget to your page.
Screenshot 2025-03-27 at 3.15.32 PM

The flex widget shows your registration flow the way you designed it. Learn how to brand your registration flow.
To embed flex widgets on third-party pages, you can use the ‘data-zuddl-sticky-header-id attribute, which needs to be added to the flow embed code if your page has a fixed (sticky) header.


Add a ticketing widget

Using the editor, you can easily add a Ticketing widget to your registration page, which users can use to initiate the ticket purchase flow. However, there are some prerequisites for adding a ticketing widget:

The ticketing widget can be easily found in the list of widgets as shown below:

Ticketing Widget.png


On the registration page, the ticketing and registration widget appears as shown below.

Landing Page.png

For ongoing ticketed events, when a user clicks on the ticketing widget, a registration page with interactions is shown with the following options:

  • Already Registered? Login now -  redirects users to the login flow if they have already purchased tickets
  • Register - opens a full-page ticket purchase flow

When users click on the ticketing widget for upcoming events, they are redirected to the ticket purchase flow.


If you've enabled Helpdesk settings from your dashboard, you can add the Helpdesk widget on your custom registration pages as well. Learn how to enable and configure Helpdesk.


Add a schedule widget

To add a Schedule widget to your registration page, you need to first add sessions. Learn how to add sessions. After you've added sessions and set up your schedule,
  1. Go to the registration page editor and click Widgets on the left navigation.
  2. Search for Schedule from the list of widgets.

  3. Select/drag and position to show on your registration page. 
  4. Customize the widget settings as required. Learn more about the schedule widget settings.
  5. Click Publish.
Your schedule shows up on the registration page. 


Add a speaker widget

To add a Speakers widget to registration page, you must first add speakers. Learn how to add speakers. After you've added speakers,
  1. Go to the registration page editor and click Widgets on the left navigation.
  2. Search for Speakers from the list of widgets.

  3. Select/drag and position to show on your registration page.
  4. Customize the widget settings as required. Learn more about the speaker widget settings.
  5. Click Publish.
Your speaker page shows up on the registration page.

SEO & Settings

Settings relevant to your site include icons, domains, SSL, etc.

  • Site Icons: This option lets you add Favicon, home screen icon, and others
  • Site Domain: This setting allows you to change the default domain and add a custom domain of your choice.
  • Site SSL: You can also generate an SSL certificate for the custom domain
  • Google Analytics: Copy and paste your Google Analytics tracking code.
  • Head HTML: You can add custom HTML or JavaScript code in the body or head section of the HTML code.
  • Site Language:  This option lets you select the site's default language.
  • Privacy Settings: It provides opportunities such as Privacy page, cookie notifications, cookie tracking
  • 404 Page: This option allows you to customize the 404 page when a user accidentally lands on an incorrect URL.
  • Progressive Web App (PWA): This setting is specifically for mobile devices for instant loading of web pages even when offline. You can find relevant options under this menu.

SEO & Settings.png


Publishing a Site

At a time, we can only publish one registration page. If you have created a few registration page designs and wish to switch to a different site,

  1. Go to the site listing page and click the edit icon on the desired template.


    Publish a Site.png

  2. Inside the editor, click the Publish button.

Publish Option.png


You can publish the templates only from the editor. When you publish a new site, Zuddl unpublishes the current site and then prints the new location using the same URL. This means you don't have to worry about any 404 pages.


Published Site Messaging.png

You can also unpublish a site from within the editor. Go to Settings & SEO > Site Domain > Unpublish site.


To go to the published site click on the link icon on the top and select either the Attendee landing page or the Speaker landing page.

link.png


More options

On the template listing page, you can click on the three-dots button for any template to select the required options:

  • Unpublish: to unpublish a template.

    Unpublishing a template would not auto-publish any other template.

  • Rename: to rename a template.

    Not applicable for Sponsor and Basic templates

  • Save as template:  you can edit a default template and save it as a new template. It would take around 4-5 seconds to save the template.
  • Delete: to permanently delete a template.
  • Publish: to publish a template. Available only for Basic and Sponsor templates. For other sites, you would have to publish from inside the editor.

Save as Template.png

You can also click the arrow icon next to each template to preview the site on different devices.

Device Layouts.png


Log-in via SSO is not supported on custom registration pages created using the editor.

Was this article useful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied