Who can use this feature?

  • Administrators
  • FREE (link SportsNow page) / Premium BASIC (via interfaces)


You can easily integrate SportsNow with your website and allow your customers to book your offers directly. 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. We are happy to present you 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. 


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;
    }
  • 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;
    }

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


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. You can find the documentation for the interface here: SportsNow Platform API