Who can use this feature?

  • Administrators
  • FREE: link SportsNow page
  • Premium BASIC: SportsNow Widget, JavaScript and API

You can easily integrate SportsNow with your website, allowing your members to book your offers directly. The easiest way is to link your own SpotsNow page to your website. In addition, you can use the SportsNow widget to fully integrate your SportsNow page into your own website according to your individual wishes. Alternatively, there is also the possibility to load SportsNow data programmatically, via API or JavaScript, into your own website. The latter three options allow you to display your timetable as well as your SportsNow passes and prices directly on your website. This way, your website is always up-to-date. The integration allows you to create a better visitor experience on your website. 


Good to know

  • SportsNow is an online booking platform and is not installed as standalone software.
  • You can find some customer examples of what a website integration might look like in our blog post: Great Websites. Integrated with SportsNow.
  • Integration via iFrame is not recommended, as this method can lead to browser-specific problems when logging in or making online payments. It is therefore recommended to link the own SportsNow page directly or to implement an integration via Widget, JavaScript or API.

Link your SportsNow page

The easiest way is to link your SportsNow page directly. You can find the link to your SportsNow page in your admin area. To get you started right away, we have prepared a SportsNow button with the link to your SportsNow page. Your own SportsNow button can be used in different sizes and languages. It can be integrated into any website with a simple HTML code. A click on the button will bring your members directly to your SportsNow page. 

  •  You can find the HTML Code in your admin area under «Apps & Integrations» - «SportsNow Button».
  • The link to your own SportsNow page is visible in the admin area and is www.sportsnow.ch/go/<your studio name>.
    For example, for the YogaNow studio: www.sportsnow.ch/go/yoganow.

SportsNow Widget

A widget is a small computer program that is integrated into another program. The widget works for all websites without any restrictions. The widget allows you to fully integrate your SportsNow page into your own website according to your individual wishes. This way you can book and pay subscriptions directly on your website without leaving it. The video portal and the news page can also be integrated directly. Your website will always be up-to-date automatically, thanks to the data management on SportsNow.


  • We recommend integrating the widget on a separate page on your website (e.g. "Timetable" page). For optimal display, the full width of the page should be used for the widget.
  • To avoid problems, the HTML code or the widget should not be applied more than once on the same page.
  • Responsive design: The widget has a responsive design by default, so it automatically adapts to the screen size or is optimized for viewing on the computer as well as on the smartphone.
  • Design and colors: By default, the widget automatically adopts the design (CSS) of the website. This means that the widget can be customized by adjusting your own CSS. In addition, the studio colors defined in SportsNow are automatically applied to certain elements in the widget, such as buttons and text, and the color of the classes is adopted in the class settings.
  • To give you a concrete idea of the SportsNow widget, we have created a demo website: https://demo.sportsnow.ch/


Additional settings
The widget allows you to make further settings directly in the code. To do this, you can insert the parameters below into the <sportsnow-app> tag.

  • defaultClassFilter: Set the filter “Class” in the live calendar, class schedule or workshop view to a predefined value so that initially only the filtered classes are displayed.
    Example: <sportsnow-app defaultClassFilter="Pilates Mat Class 2" ...>
  • defaultTeamFilter: Set the “Team” filter in the live calendar, class schedule or workshop view to a predefined value so that initially only the filtered team member's classes are displayed.
    Example: <sportsnow-app defaultTeamFilter="Anna Moser" ...>
  • defaultLiveStreamFilter: Initially set the “Livestream” filter in the live calendar, class schedule or workshop view to “Livestream” so that initially only livestream classes are displayed.
    Example: <sportsnow-app defaultLiveStreamFilter="livestream_only" ...>


Step-by-step instructions

On the web

  • Click in your admin area on «Apps & Integrations» - «SportsNow Widget» 
  • You can configure the widget according to your individual needs.
  • «1. Select the desired areas to be displayed in the widget»: Here you have the option to show and hide individual areas of the SportsNow page. Check the boxes for the areas you want to be displayed in the widget.
    Note: If only one area is selected, then no tabs will be shown. This can be useful if you want to put the widget on different pages on your website, for example if you want to show a separate timetable, workshop or video page.
  • «2. Select the desired style of the live calendar»: Furthermore, SportsNow allows you to configure the style of your live calendar, i.e. in which style the live calendar should be displayed.
    Note: This option only appears if you have selected the display of the «Live calendar», «Workshops» or «Individual appointments» in the step above.
  • «3. Paste the code below on your website where you want the widget to appear»: After you have finished configuring your widget, you can copy the HTML code for your website directly from this page. You can then add this HTML code to your website where you want the widget to appear.
    Note: If this default code does not work, you can directly paste the code that is visible below the default code. For Jimdo websites, the alternative code and not the default code must be used for the widget to work as desired.

Integration with JavaScript

SportsNow offers you the possibility to program your timetable, passes and prices directly into your website. Here you can find step-by-step instructions for Wix- and WordPress. Basically, the programming works the same for all systems. For the integration with JavaScript, programming skills are required. Of course, you can extend and modify the JavaScript code as you like, for example, you can hide columns you don't need.


Step-by-step instructions for WIX

  • Add a «HTML code». This also allows you to add your own JavaScript and CSS code to your pages.
  • Click on the HTML code that you have just inserted and click on «Edit HTML-Code». The settings mask will open.
  • Select as Mode: «HTML-Code».
  • In the editor, you must now insert the following HTML code:
    <h2>Live-Kalender</h2>
<div id="calendar-container"></div>

<h2>Stunden / Kurse</h2>
<div id="schedule-container"></div>

<h2>Workshops / Events</h2>
<div id="events-container"></div>

<h2>Preise</h2>
<div id="pricing-container"></div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script>
jQuery(document).ready(function () {
jQuery("#calendar-container").load("https://www.sportsnow.ch/providers/yoganow/calendar?locale=de");
jQuery("#schedule-container").load("https://www.sportsnow.ch/providers/yoganow/schedule?locale=de");
jQuery("#events-container").load("https://www.sportsnow.ch/providers/yoganow/events?locale=de");
jQuery("#pricing-container").load("https://www.sportsnow.ch/providers/yoganow/pricing?locale=de");
});
</script>
  • This code still needs a little adjustment to make it load your own data. At the moment, this code loads the data of the studio «YogaNow». To do this, you need to replace the word «yoganow» with your own URL everywhere in the code above. You can find this out by going to www.sportsnow.ch and calling up your own page: https://www.sportsnow.ch/go/<Your-URL>
  • You can also change the language of the data. If you prefer the data in English, French or Italian, you have to replace "locale=de" with "locale=en", locale=fr or locale=it everywhere in the code above.
  • If you use a multilingual plug-in that allows you to change the language per page, use the following code with automatic language detection instead:
    var locale = 'en';
var pathNameParts = window.location.pathname.split('/');
switch (pathNameParts[1]) {
    case 'de':
        locale = 'de';
        break;
    case 'fr':
        locale = 'fr';
        break;
    case 'it':
        locale = 'it';
        break;
}
jQuery(document).ready(function () {
    jQuery("#calendar-container").load("https://www.sportsnow.ch/providers/yoganow/calendar?locale=" + locale);
    jQuery("#schedule-container").load("https://www.sportsnow.ch/providers/yoganow/schedule?locale=" + locale);
    jQuery("#events-container").load("https://www.sportsnow.ch/providers/yoganow/events?locale=" + locale);
    jQuery("#pricing-container").load("https://www.sportsnow.ch/providers/yoganow/pricing?locale=" + locale);
});
  • A change in the colors of the links we show you using the example above. For this, we have used the following CSS code:
    .button {
     color: red;
}
  • With the help of CSS, individual columns of tables can be hidden so that the tables are displayed in a responsive manner, i.e. adapted to different screen sizes.
  • With CSS, the integration can be graphically customised and the design can be created in such a way that it corresponds exactly to your needs. However, appropriate programming knowledge is required for this implementation.
  • When you are finished, click on «Refresh». Your SportsNow data will now be loaded in the HTML code areas.


Step-by-step instructions for WordPress

  • Install the «Script n Styles» plugin, so that the plugin allows us to insert your own JavaScript and CSS code into your pages.
  • Load the jQuery script. Using jQuery we will load the data from SportsNow into WordPress.
  • Create a new page where you want to integrate your SportsNow data. For example, name it «Our timetable».
  • First the «Scripts n Styles» plugin has to be activated with «Customize View» and then the editor has to be switched to the «Text» mode (marked red in the image).
  • In the editor, you must now insert the following HTML code:
    <h2>Live-Kalender</h2>
<div id="calendar-container"></div>
<h2>Stunden / Kurse</h2>
<div id="schedule-container"></div>
<h2>Workshops / Events</h2>
<div id="events-container"></div>
<h2>Preise</h2>
<div id="pricing-container"></div>

  • Now insert the JavaScript code. Scroll down a little and enter the following code:
    jQuery(document).ready(function () {
    jQuery("#calendar-container").load("https://www.sportsnow.ch/providers/yoganow/calendar?locale=de");
    jQuery("#schedule-container").load("https://www.sportsnow.ch/providers/yoganow/schedule?locale=de");
    jQuery("#events-container").load("https://www.sportsnow.ch/providers/yoganow/events?locale=de");
    jQuery("#pricing-container").load("https://www.sportsnow.ch/providers/yoganow/pricing?locale=de");
});

  • This code still needs a little adjustment to make it load your own data. At the moment, this code loads the data of the studio «YogaNow». To do this, you need to replace the word «yoganow» with your own URL everywhere in the code above. You can find this out by going to www.sportsnow.ch and calling up your own page: https://www.sportsnow.ch/go/<Your-URL>
  • You can also change the language of the data. If you prefer the data in English, French or Italian, you have to replace "locale=de" with "locale=en", locale=fr or locale=it everywhere in the code above.
  • If you use a multilingual plug-in that allows you to change the language per page, use the following code with automatic language detection instead:
    var locale = 'en';
var pathNameParts = window.location.pathname.split('/');
switch (pathNameParts[1]) {
    case 'de':
        locale = 'de';
        break;
    case 'fr':
        locale = 'fr';
        break;
    case 'it':
        locale = 'it';
        break;
}
jQuery(document).ready(function () {
    jQuery("#calendar-container").load("https://www.sportsnow.ch/providers/yoganow/calendar?locale=" + locale);
    jQuery("#schedule-container").load("https://www.sportsnow.ch/providers/yoganow/schedule?locale=" + locale);
    jQuery("#events-container").load("https://www.sportsnow.ch/providers/yoganow/events?locale=" + locale);
    jQuery("#pricing-container").load("https://www.sportsnow.ch/providers/yoganow/pricing?locale=" + locale);
});
  • A change in the colors of the links we show you using the example above. For this, we have used the following CSS code:
    .button {
     color: red;
}

  • Thanks to CSS, individual columns of tables can be hidden so that the tables are displayed in a responsive manner, i.e. adapted to different screen sizes.
  • With CSS, the integration can be graphically customized, and the design can be created in such a way that it corresponds exactly to your needs. However, appropriate programming knowledge is required for this implementation.

Finally, you can save your page. You have successfully completed your programming!


CSS Template

The following CSS template can be used as a base and customized to fit the layout to your own needs. The template defines some table spacing, font sizes and makes sure that the integration looks good on mobile devices (smartphones and tablets).

/* SportsNow CSS Template */
/* Basic table styles */
 table {
     text-align: left;
     width: 100%;
}
 table td, table th {
     border: 1px solid #cccccc;
     font-weight: 300;
     font-size: 16px;
     padding: 5px;
}
 table th {
     font-size: 16px;
     font-weight: 400;
     text-transform: uppercase;
}
 table tr:nth-child(even), table thead tr {
     background: #e3e3e3;
}
 table td[colspan] {
     font-weight: 500;
     background-color: #efefef;
     text-transform: uppercase;
}
 .button {
     color: red;
}
/* Responsiveness */
 @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
     .calendar-container th:nth-of-type(3) {
         display: none;
    }
     .calendar-container td:nth-of-type(3) {
         display: none;
    }
     .calendar-container th:nth-of-type(4) {
         display: none;
    }
     .calendar-container td:nth-of-type(4) {
         display: none;
    }
     .calendar-container th:nth-of-type(5) {
         display: none;
    }
     .calendar-container td:nth-of-type(5) {
         display: none;
    }
     .schedule-container td:nth-of-type(3) {
         display: none;
    }
     .schedule-container th:nth-of-type(3) {
         display: none;
    }
     .schedule-container th:nth-of-type(4) {
         display: none;
    }
     .schedule-container td:nth-of-type(4) {
         display: none;
    }
     .schedule-container th:nth-of-type(5) {
         display: none;
    }
     .schedule-container td:nth-of-type(5) {
         display: none;
    }
     .events-container td:nth-of-type(4) {
         display: none;
    }
     .events-container td:nth-of-type(5) {
         display: none;
    }
     .events-container th:nth-of-type(4) {
         display: none;
    }
     .events-container th:nth-of-type(5) {
         display: none;
    }
}


Integration via SportsNow interface (API)

SportsNow offers you the possibility to load your timetable data programmatically via an interface (API) and display it individually on your website. We offer the data via a RESTful web service in JSON format. For the integration via SportsNow interface (API) programming skills are required.


Requirements

  • provider_id: The ID of your studio. You can request it from our support.
  • Premium BASIC or higher.
  • No authentication required.
  • Each HTTP header must include the following: Accept: application/json


Simple test

All endpoints can be tested in a terminal simply by using curl. Example:


curl -X POST -H 'Content-Type: application/json' -d '{
  "date": "2022-10-15",
  "start_at_beginning_of_week": false
}' -v -i 'https://www.sportsnow.ch/platform/api/v1/public/provider/<providerID>/live_calendar'


API endpoints

The following API endpoints are available:


Fetch live calendar


POST https://www.sportsnow.ch/platform/api/v1/public/provider/{provider_id}/live_calendar

The action loads your studio's weekly live calendar.


Parameter


  • provider_id: string (path), required
  • date: string (query), optional
    The desired start date of the live calendar.
    Format: YYYY-MM-DD. 
    Example: "2022-01-31" for the 31. January 2022
  • start_at_beginning_of_week: boolean (query), optional
    If false, then the live calendar does not start at the beginning of the week (monday).
    Default is true.
  • locale: string (query), optional
    The desired language of the data.
    Options: de, en, fr, it
    Default: de


Responses

  • 200: Response OK.

    Example response:
    [
  {
    "name": "Yoga",
    "date": "2022-27-12",
    "time_begin": "18:00",
    "time_end": "19:00",
    "team": "John",
    "location_name": "Yoga Room",
    "book_now_link": "https://www.sportsnow.ch/de/providers/yoganow/service_sessions/5131/bookings/new?date=2017-12-27",
    "level": "service_session_level_all, service_session_level_basic, service_session_level_intermediate or service_session_level_advanced"
  }
]


  • 400: Invalid parameters or no premium activated.


Fetch schedule


POST https://www.sportsnow.ch/platform/api/v1/public/provider/{provider_id}/schedule

The action loads your studio's schedule.


Parameter


  • provider_id: string (path), required
  • locale: string (query), optional
    The desired language of the data.
    Options: de, en, fr, it
    Default: de


Responses

  • 200: Response OK.

    Example response:
[
  {
    "name": "Yoga",
    "weekday": 1,
    "localized_weekday": "Monday",
    "time_begin": "18:00",
    "time_end": "19:00",
    "team": "John",
    "location_name": "Yoga Room",
    "book_now_link": "https://www.sportsnow.ch/de/providers/yoganow/service_sessions/5131/bookings/new?date=2022-12-27",
    "level": "service_session_level_all, service_session_level_basic, service_session_level_intermediate or service_session_level_advanced"
  }
]
  • 400: Invalid parameters or no premium activated.


Fetch workshops 


POST https://www.sportsnow.ch/platform/api/v1/public/provider/{provider_id}/events

The action loads your studio's workshops.


Parameter


  • provider_id: string (path), required
  • locale: string (query), optional
    The desired language of the data.
    Options: de, en, fr, it
    Default: de


Responses

  • 200: Response OK.

    Example response:
[
  {
    "name": "Yoga Workshop",
    "date": "2022-27-12",
    "time_begin": "18:00",
    "time_end": "19:00",
    "team": "John",
    "location_name": "Yoga Room",
    "book_now_link": "https://www.sportsnow.ch/de/providers/yoganow/service_sessions/5131/bookings/new?date=2022-12-27",
    "level": "service_session_level_all, service_session_level_basic, service_session_level_intermediate or service_session_level_advanced"
  }
]
  • 400: Invalid parameters or no premium activated.


Fetch passes and pricing


POST https://www.sportsnow.ch/platform/api/v1/public/provider/{provider_id}/pricing

The action loads your studio's passes and pricing.


Parameter


  • provider_id: string (path), required
  • locale: string (query), optional
    The desired language of the data.
    Options: de, en, fr, it
    Default: de


Responses

  • 200: Response OK.

    Example response:
[
  {
    "name": "Yoga",
    "tickets": [
      {
        "name": "10er Abonnement Yoga (75 Min.)",
        "description": "Yogakurs à 75 Minuten",
        "price": 250,
        "localized_price": "CHF 250.00",
        "validity": "10 Wochen",
        "credits": 10,
        "localized_credits": "Guthaben 10"
      }
    ]
  }
]
  • 400: Invalid parameters or no premium activated.