Who can use this feature?

  • Administrators
  • FREE (link SportsNow page) / Premium BASIC (JavaScript and API)


You can easily integrate SportsNow with your website and allow your customers to directly book your offers. The recommended option is to link to your own SpotsNow page on your website. Alternatively you can load SportsNow data programmatically, via API or JavaScript, into your own website. This allows you to display your schedule, passes and prices of SportsNow directly on your website. Thus, your website is always up to date. With one click the customer can book the desired offer directly on SportsNow. 

The integration allows you to create a better visitor experience on your website by linking your own SportsNow page to your website. SportsNow is an online booking platform and is not installed as standalone software.

We are happy to introduce you to the possibilities here. 

You can find some customer examples of how a website integration could look like in our blog post here: Great Websites. Integrated with SportsNow. 


Good to know

  • 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 JavaScript or API.

Recommended: Link SportsNow page

The easiest and most popular way is to link directly to your SportsNow page. 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 on every website with a simple HTML code. One click on the button brings your customers directly to your SportsNow page. You can find the HTML code in your admin area under «Apps & Integrations» - «SportsNow Button».


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 input field you have to insert the following 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 to have the data in English, French or Italian, you have to replace «local=de» with «local=en», «local=fr» or«local=it» everywhere in the code above.
  • 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 an 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 to have the data in English, French or Italian, you have to replace «local=de» with «local=en», «local=fr» or«local=it» everywhere in the code above.
  • 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.

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.