How to integrate the new Eversports schedule widget?

This article explains the what the new Eversports Widgets are and how to integrate the new Schedule Widget.

What is a Widget?

A widget is a component you can add to your website, often sourced from another platform. In the context of Eversports, a widget serves as a bridge between your site and the Eversports Manager information.

By placing an Eversports Manager widget on your website, your customers can seamlessly view information, book activities, or purchase products directly from your site. Specifically, this widget integrates your booking calendar from Eversports Manager, making it easy for customers to interact with your schedule without leaving your website.

What is the new Schedule Widget?

The new Eversports schedule widget offers a comprehensive view of all your activities in a calendar display.

This updated widget includes an enhanced mobile experience, removing the iframe, which improves usability and ensures better security against upcoming browser updates.

The scope of this widget is only the schedule implementation.

As we are gradually releasing the other sections of the widget.

What is NOT Included in the New Widget Schedule but coming soon?

The following features are not in the new integration, but will be coming in the near future:

• Vouchers
• Videos
• User Login

How to Replace Links for the Subpages on the Widget?

If you previously relied on iframe navigation for pages such as workshops, pricing, courses, trainings, vouchers, recordings, and education, we recommend individually linking to these pages within your website's own navigation using the widget link you can find in the manager. Then, you can also integrate specific subpage links into your site. 

To do this, copy your existing widget link found in the manager and add the following parameters at the end:

• For workshops: ?list=workshop 
• For classes: ?list=class
• For courses: ?list=course
• For trainings: ?list=training
• For vouchers: ?list=voucher
• For the shop: ?list=shop
• For the video library: ?list=recording
• For educations: ?list=education

Example: https://www.eversports.com/widget/w/k2j2e0?list=workshop

Where is the User Login Now?

The user login functionality has been relocated to the activity details page, which users can access by clicking on the calendar cards. 

If users were already previously logged in on Eversports, they will already be logged into this page.

Furthermore, if the users log in once, they should not need to login again while navigating through different classes in the calendar, as every class they open they will already be logged in.

How to Style, Configure and Integrate the Widget?

How to Create a New Widget?

1. Navigate to the Settings > Widgets [NEW]

2. Enter Widget Overview

This page serves as the central hub for all your widgets. Any widgets you create in the future will be saved here, allowing you to easily return and edit them whenever necessary. This ensures that you have complete control and flexibility over your widget configurations.

3. Click on “Create new widget” 

Note: If you already have an Eversports Widget you will already have a Widget that was auto-migrated for you with you previous settings. In this case, you can just click the three dots and then edit it. 

4. Select which widget type you want to integrate. 

Select the “Schedule” widget to get started.  

5. Name your Widget 

Give your widget an internal name that you can use to identify and differentiate it within your organisation. Your customers will not see this name, so feel free to choose something that makes sense for your internal organisation and workflow.

6. Choose How to Segment Your Widget 

All studios have the option to pre-filter their calendar to create separate schedules for specific teachers, sports, or activity groups. For example, if you would like to have a specific pre-filtered calendar per teacher, you can then select one teacher per widget. If you just want all of your activities shown, then you don't need to do this section. 

If your company has multiple studios and therefore multiple Eversports Managers, you can first select which studios you want to display in your schedule. Once you've chosen the venues, you have the option to further pre-filter the schedule by specific criteria such as teachers, activity groups, or sports.

7. Style Your Widget 

Tailor your widget to seamlessly blend with your website design. Here are the customizable areas for your specific widget:

• Background (1): Set the background of the widget. We recommend matching it with your website's background color for a cohesive look.

• Text (2): Adjust the font color for the text displaying the dates and months.

• Primary (3): Customize the button color used in the mobile date picker of your widget.

• Card Text (4): Change the text color used on the activity tiles in the calendar. Since the tile colors are based on your activity groups, we suggest choosing a neutral color that complements the groupings you have selected.

 

8. Decide which information you wish to display 

In the final step, you can select the information you want to show on the activity cards:

• First Name of Trainer: Display the trainer's name on the card. In mobile view, it also shows the trainer's photo.

• Room / Court: Indicate the room or court where the activity takes place.

• Spots Remaining: Show the number of spots left in the activity.

• Activity Level: Specify the level of the activity (Beginner, Intermediate, Advanced, or All Levels).

• Divide Days into Morning, Afternoon, and Evening: Organize the schedule view by dividing days into these segments.

9. Preview the Widget: 

If you want to see a preview of how this could look on your website, you can use the preview in the configuration page. 

Make sure to save the settings first to see how your styling looks on the widget. 

After saving your settings, click on the link to preview. 

Getting the Schedule Widget Code

Once you have completed the styling and configuration, you can save the widget and copy the widget code. 

Save your latest changes: 

Copy the widget code: 

Integrating the Widget Code 

The Schedule widget code can be added to an HTML module within your website builder. 

Only integrating the schedule once per page? 

- Copy the widget code from the your widget configuration. 

- The add to an HTML module within your website builder where you want to place the code. 

Do you want to integrate the schedule more than once per page? 

1. Insert the Script: Ensure the Eversports script is included in your webpage. This script is necessary for the widget to function correctly. 

<script type="module" src="https://widget-static.eversports.io/loader.js" async defer></script>

2. Add the Widget Code: Place the following code snippet wherever you want the widget to appear on your website, for each schedule. 

<div data-eversports-widget-id="your-widget-id-here"></div>Do you currently have the iFrame Integration? 

If you are using the widget iFrame and wish to replace it with the new calendar widget, 

1. Simply delete the iframe code. Since we are no longer using an iframe, any specific sections designated for iFrames are no longer necessary.
2. Paste the new code into an HTML module. 

Do you currently link externally to the widget or Marketplace? 

1. Create a new page within your website and decide where on this page you want to display the schedule. Or add the schedule to an existing page. 
2. Ensure that the script is included on this page and place the <div> element where you would like the calendar to appear.

By following these steps, you can seamlessly integrate the Eversports calendar widget into your website, providing a better user experience and maintaining control over your site's navigation.