Customizing widgets

Customizing widgets

 Zooza offers an easy way to customize the widgets you have deployed on your website. You can customize each widget to suit your needs - you can filter the course offerings, set specific parameters or change the look and feel according to your site design.
Widget integration and configuration options:
  1. WordPress plugin – ideal solution if your website runs on the WordPress platform.
  2. Embed version (HTML code) –copy the generated HTML code directly into your page.
Types of widgets available:
  1. Registration form
  2. Calendar
  3. Profile
  4. Videos
  5. Product/Order form
  6. Map widget
Idea
TIP:  Think about the navigation on your site, it's best to place some of the subpages you create directly in the menu so that visitors can navigate as quickly as possible. We also recommend having your profile highlighted in the menu and it can be called anything you like - attendance, my profile, client profile.. for example like this:

Registration form

Info
In its basic form, the registration form is displayed on a page listing all the courses you have created and offered for online registration. The form contains basic fields to fill out and a preset display of information about each course. If you wish to customize your course selection, we recommend using the Embed version (HTML code). You can create your own specific settings in Zooza and use them to generate HTML code to embed on your page.

Basic form fields

In the form you will see the basic fields that your client must fill in when registering, which are:
  1. First name
  2. Surname
  3. E-mail
  4. PhoneNote
  1. You can modify their display in the registration form by overwriting the text. At the course level, click Online Registration – Edit.
  2. Scroll down to the Customize Registration Form section and enter new text in the field to change its display in the registration form. Save the change.

Registration form settings for the children’s course

  1. At the course level, in the Course Settings section, if you click the Edit
    button.
  1. Under Additional settings, tick the For children checkbox and Save the setting
  2. The registration form fields on your web page will automatically change from Name to Parent’s Name after this setting

Extra fields in the form for more information collection

You can enrich the form with so-called Extra fields. The setting is done at the course level. If you want detailed information about the use and purpose of extra fields, click here to read the manual.
After selecting a specific course, click the Edit button in the Extra Fields tile.
Click on Extend registration form with extra fields. After selecting a specific extra field you need to fill in its name, only after this setting the field will be displayed in the registration form. The field name is mandatory. Don’t forget to save your changes at the bottom of the page.

Notes
Note: Since the setting of the extra fields is done at the course level, you need to set the extra fields on all courses separately. Or create one course with all necessary settings and then Copy the course.

Modification of the published registration form

Customize the code to insert

If you have a variety of course offerings - for example, camps, children's courses, or one-off events - you can easily customize the HTML code of your registration form to suit your needs.
  1. In Zooza, go to the Publish section.
  2. Choose Embed code.
  3. This will open a window with the HTML code itself.
  4. Below the code, click Customize embed code

  5. Select which courses and which locations to display on the page in the registration form

  6. If you are collecting a larger amount of data or offering products for sale when you register, we recommend enabling the Multi-stage registration option. This feature breaks up the form into multiple clear steps, improving the user experience.
  7. Copy the code by clicking Copy and place it on your page.

Customizing the registration form

In the Publish section, you will also find additional options to customize the look and functionality of the registration form to suit your needs.
  1. In the Publish section, click Set up in the widgets menu under Customize.

  2.  This will open a configuration window where you can set the display of different parts of the form - from the fields to be displayed to the way the course is presented to the visitor.
IdeaNote: In order to see what display works best for you, we recommend that you try displaying them on the page and decide based on that.

Client Profile

Zooza allows you to create a customer profile on your website, to which the client can easily log in.
What the customer can see and do in the profile:
  1. List of ordered products and services
  2. Payment status - he can see if he has anything outstanding and can make a payment directly
  3. Within the courses he can:
    1. Cancel from a session
    2. Use make-up sessions
  4. Access purchased videos or other digital content in secure mode
Info
This form also offers various settings that you can customize to suit your needs. For example, you can turn on collecting reasons for cancelling from a course - see the separate manual for details on this functionality.

Calendar/Schedule

Allows you to display course and meeting offerings on your site in a clear calendar. The calendar will always be up to date according to the settings in Zooz. Visitors will thus be able to select from the current offer and make a registration for a course or meeting.

Calendar View

You can customize the calendar view according to your own preferences and needs. In the settings, you can choose what information to display for each date.
Calendar display options:
  1.  Number of slots available or just information that it is possible to apply
  2. Lecturer's name, location, time of the event - optional elements that you can turn on or hide
  3. Filter locations or exercise types - ideal if you offer multiple locations or different types of courses
The best way to customize your calendar is to try out the different settings - you can toggle the options on and off and immediately see how they appear on the page.Once you've adjusted the settings, be sure to click Save Changes and then refresh the calendar page (on Windows, press F5).


Editing a published calendar

As with the registration form, you have the option to display only some courses in one calendar - by customizing the HTML code of the calendar.
  1.  In Zooza, go to the Publish section.
  2.  Select the integration type: Embed code.
  3. This will open a window with the HTML code itself.
  4.  Below the code, click Customize embed code

  5. Select which courses and which locations to display on the page in the registration form

  6. Copy the code by clicking Copy and place it on your page.

Videos

Zooza is also unique in that it can mediate the video in security mode so that no one can access the video except by making it available to registrants (either by attribution or by sale). In order to play the video, you need to create a subpage where the videos will be displayed.
Alert
Note:  Deploying a widget to display videos also needs to be done if you put the video in a group/term to display in the client profile.

Order form

Allows you to collect orders for your digital products or other products. In the case of digital products, they will be directly accessible in the customer profile after payment.

Map widget

The map widget allows you to display your courses directly on a map on your website. With this clear view, clients can quickly select a course by location.
How it works:
  1. The client enters their postcode
  2. Selects the radius (e.g. 5, 10 or 20 km) within which they want to search for the nearest courses.
  3. Can select an age restriction - only courses that match the participant's specified age will be displayed.
  4. The system will automatically show him the nearest available groups:
    1. on a map - visually distributed by location
    2. in the list below the map - for quick overview and easy selection
  5. Clicking on a specific location takes the user directly to the registration form of that location.

Viewing the map widget





    • Related Articles

    • Deploying Zooza app on your website

      Integration into your website is simple. As soon as a new account is created in Zooza, there is nothing to prevent the individual forms from being deployed to your website. What's great about Zooza's forms is that your customer will never leave your ...