Hoe integreer je de nieuwe Eversports kalender-widget?

Wat is de kalender-widget?

Een widget is een onderdeel dat je kunt toevoegen aan je website, vaak afkomstig van een ander platform. In de context van Eversports dient een widget als brug tussen je website en de informatie van Eversports Manager.

Door een Eversports Manager-widget op je website te plaatsen, kunnen je klanten naadloos informatie bekijken, activiteiten boeken of producten kopen, rechtstreeks vanaf je site. Specifiek integreert deze widget je boekingskalender vanuit Eversports Manager, waardoor het makkelijk is voor klanten om met je schema te werken zonder je website te verlaten.

Wat is de nieuwe Kalender Widget?

De nieuwe Eversports kalender-widget biedt een uitgebreide weergave van al je activiteiten in een kalender. Deze vernieuwde widget bevat een verbeterde mobiele ervaring, waarbij het iframe is verwijderd. Dit verbetert de gebruiksvriendelijkheid en zorgt voor een betere beveiliging tegen toekomstige browserupdates.

De inhoud van deze widget is alleen de implementatie van de kalender. Omdat we geleidelijk de andere onderdelen van de widget lanceren (zoals prijzen, workshops of vouchers), is de kalender voorlopig het enige nieuwe aspect. 

 

Wat is NIET inbegrepen in de nieuwe Widgetkalender?

De volgende functies zitten niet in de nieuwe widget integratie, maar komen in de nabije toekomst:

• Prijzen
• Vouchers
• Workshops, evenementen, trainingen, retreats, cursussen, opleidingen
• Inloggen van gebruiker

 

Hoe vervang ik links voor subpagina's op de widget?

Als je voorheen vertrouwde op iframe navigatie voor pagina's zoals workshops, prijzen, cursussen, trainingen, vouchers, opnames en opleidingen, raden we je aan om individueel naar deze pagina's te linken binnen de navigatie van je website met behulp van de widget link die je kunt vinden in de manager. Vervolgens kun je ook specifieke subpagina-links in je site integreren. 

Om dit te doen, kopieer je de bestaande widget link die je kunt vinden in de manager en voeg je de volgende parameters toe aan het einde:

• Voor workshops: ?list=workshop 
• Voor groepslessen: ?list=class
• Voor cursussen: ?list=course
• Voor trainingen: ?list=training
• Voor vouchers: ?list=voucher
• Voor Prijzen: ?list=shop
• Voor de videotheek: ?list=recording
• Voor opleidingen: ?list=education

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

 

Waar is de log-in voor gebruikers nu?

De inlogfunctie voor gebruikers is verplaatst naar de pagina met activiteitsdetails, die gebruikers kunnen openen door op de kalenderkaarten te klikken. 

Als gebruikers al eerder waren ingelogd op Eversports, zijn ze al ingelogd op deze pagina.

Als gebruikers eenmaal zijn ingelogd, hoeven ze niet opnieuw in te loggen als ze door de verschillende lessen in de kalender navigeren, omdat ze bij elke les die ze openen al zijn ingelogd.

Hoe kan je de Widget stylen, configureren en integreren?

Hoe maak je een nieuwe Widget?
1. Ga naar Instellingen > Widgets [Beta].

 

Deze pagina dient als centraal punt voor al je widgets. Alle widgets die je in de toekomst maakt, worden hier opgeslagen, zodat je ze gemakkelijk kunt terugvinden en bewerken wanneer dat nodig is. Dit zorgt ervoor dat je volledige controle en flexibiliteit hebt over je widgetconfiguraties.

2. Klik op “Nieuwe widget maken”. 

Opmerking: Als je al een Eversports Widget hebt, dan heb je al een Widget die automatisch voor je werd geïmporteerd met je vorige instellingen. In dat geval kun je gewoon op de drie puntjes klikken en het bewerken. 

3. Selecteer welk widgettype je wilt integreren. 

Selecteer de widget “activiteitenschema” om te beginnen.  

 

4. Geef je Widget een naam 

Geef je widget een interne naam die je kunt gebruiken om hem te identificeren en te onderscheiden binnen je organisatie. Je klanten zullen deze naam niet zien, dus voel je vrij om iets te kiezen dat logisch is voor je interne organisatie en workflow.

 

5. Kies hoe je je Widget segmenteert 

Alle studio's hebben de optie om hun kalender vooraf te filteren om aparte roosters te maken voor specifieke docenten, sporten of activiteitengroepen. Als je bijvoorbeeld een specifieke voorgefilterde kalender per docent wilt, dan kun je één docent per widget selecteren. Als je gewoon al je activiteiten wilt laten zien, dan hoef je dit gedeelte niet te doen. 

Als je bedrijf meerdere studio's heeft en dus meerdere Eversports Managers, dan kun je eerst selecteren welke studio's je wilt weergeven in je agenda. Als je eenmaal de locaties hebt gekozen, dan heb je de optie om het rooster verder voor te filteren op specifieke criteria zoals docenten, activiteitengroepen of sporten.

6. Je Widget opmaken 

Pas je widget zo aan dat hij naadloos in het ontwerp van je website past. Hier zijn de aanpasbare onderdelen voor je specifieke widget:

• Achtergrondkleur: Stel de achtergrond van de widget in. We raden aan deze af te stemmen op de achtergrondkleur van je website voor een consistente uitstraling.
• Knopkleur: Pas de kleur van de knop aan die wordt gebruikt in de mobiele datumkiezer van je widget.
• Letterkleur: Pas de letterkleur aan voor de tekst die de datums en maanden weergeeft.
• Kaart Letterkleur: Pas de tekstkleur aan die wordt gebruikt op de activiteitentegels in de kalender. Omdat de tegelkleuren gebaseerd zijn op je activiteitengroepen, raden we aan een neutrale kleur te kiezen die de groepen die je hebt geselecteerd aanvult.

 

7. Bepaal welke informatie je wilt weergeven 

In de laatste stap kun je de informatie selecteren die je op de activiteitenkaarten wilt weergeven:

• Voornaam van de trainer: Geef de naam van de trainer weer op de kaart. In de mobiele weergave wordt ook de foto van de trainer getoond.
• Zaal / Baan: Geef de zaal of de baan aan waar de activiteit plaatsvindt.
• Resterende plaatsen: Toon het aantal resterende plekken in de activiteit.
• Activiteit niveau: Geef het niveau van de activiteit aan (Beginner, Intermediair, Gevorderd of Alle niveaus).
• Verdeel dagen in ochtend, middag en avond: Organiseer de roosterweergave door dagen in deze segmenten te verdelen.

 

8. Voorbeeld van de Widget:

 Als je een voorbeeld wilt zien van hoe dit eruit zou kunnen zien op je website, kun je de voorbeeldweergave op de configuratiepagina gebruiken. 

Zorg ervoor dat je de instellingen eerst opslaat om te zien hoe je styling eruitziet op de widget. 

Nadat je je instellingen hebt opgeslagen, klik je op de link om een voorbeeld te bekijken. 

De code van de Widget Kalender opvragen

Zodra je de styling en configuratie hebt voltooid, kun je de widget opslaan en de widgetcode kopiëren. 

Sla je laatste wijzigingen op en kopieer de widget code:  

Hoe integreer je de nieuwe Widget Kalender?

De kalender widget code kan worden toegevoegd aan een HTML element binnen je website editor. Volg deze stappen om de Eversports kalender-widget in je website te integreren:

➡️ Als je een enkele widget op een pagina wilt invoegen:

Kopieer de volledige code en voeg deze in een HTML-blok op je website in. 




➡️ Als je meerdere widgets op één pagina wilt invoegen:

1. Het script toevoegen: Zorg ervoor dat het Eversports script is opgenomen in je webpagina. Dit script is nodig om de widget correct te laten functioneren. 


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



2. De widgetcode toevoegen: Plaats de volgende code op de plek waar je de widget op je website wilt hebben:

<div data-eversports-widget-id="your-widget-id-here"></div>

Vervang "your-widget-id-here" door de actuele widget ID die je hebt gekregen. Als je widget-ID bijvoorbeeld "12345678-aaaa-bbbb-cccccc-1234567890ab" is, ziet de code er als volgt uit:

<div data-eversports-widget-id="12345678-aaaa-bbbb-cccc-1234567890ab"></div>



Dit element kan meerdere keren per pagina worden toegevoegd. 

Dit betekent dat als je 2 widgets per pagina wilt toevoegen (bijv. Aurélie's planningswidget en Camille's planningswidget hieronder), je het script + de codes op deze manier kunt toevoegen: 

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

Heb je momenteel de iFrame-integratie? 

Als je de widget iFrame gebruikt en deze wilt vervangen door de nieuwe kalenderwidget, 

1. Verwijder simpelweg de iframe code. Omdat we niet langer een iframe gebruiken, zijn alle specifieke secties voor iframes niet langer nodig.
2. Plak de nieuwe code in een HTML-module. 

Link je momenteel extern naar de widget of Marketplace? 

1. Maak een nieuwe pagina binnen je website en bepaal waar op deze pagina je de kalender wilt weergeven. Of voeg de kalender toe aan een bestaande pagina. 
2. Zorg ervoor dat het script op deze pagina wordt opgenomen en plaats het <div>-element op de plek waar je de kalender wilt weergeven.

Door deze stappen te volgen kun je de Eversports kalender-widget naadloos integreren in je website, voor een betere gebruikerservaring zorgen en de controle over de navigatie van je site behouden.

Hulp nodig bij de integratie? 

Als je hulp nodig hebt met deze integratie of je bent op zoek naar je widgetcode, neem dan contact op met jody.fennell@eversports.com (alleen in het Engels, in het Nederlands zoals gebruikelijk naar support@eversports.com).