Do you have a beautiful website and you would like to integrate your schedule, workshops and prices from SportsNow? We are happy to explain how you can achieve it step-by-step. Furthermore, we will show you how you can change fonts and colors so it matches your CI design.
1. Install the „Scripts n Styles“ plugin
The plugin enables you to enter your own JavaScript and CSS code in your website.
2. Load the jQuery Script
With help of jQuery we will load the data from SportsNow to your website.
3. Create a new page
Create a new page where you would like to integrate your SportsNow data. For example name the page „Our schedule“. First, you need to enable the „Scripts n Styles“ plugin in the „Screen Options“. Second, you need to switch your editor to „Text“ mode (indicated by the red marks in the graphic).
Enter the following HTML Code in the editor:
<h2>Schedule/h2>
<div id="schedule-container"></div>
<h2>Workshops / Events</h2>
<div id="events-container"></div>
<h2>Prices</h2>
<div id="pricing-container"></div>
4. Enter the JavaScript code
Now, scroll down a bit and enter the following JavaScript code as shown in the graphic:
jQuery(document).ready(function() {
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");
});
The above code above needs to be configured to load your own data. Replace every occurrence of „yoganow“ with your own studio ID. You can find your studio ID in the URL of your studio’s profile page: https://www.sportsnow.ch/go/<Your Studio ID>
You can also change the language of the data. If you want the data in English then the above code should include“locale=en“. For German, French or Italian it needs to be replaced with „locale=de“, „locale=fr“ or „locale=it“ accordingly.
5. Enter the CSS Code
Here you can enter your own CSS code to change the fonts and colors. We will provide you with an example here to make the links red. Enter the CSS code as shown in the graphic:
.button {
color: red;
}
6. Done!
Now save your page and you are done! The page will load your schedule, workshops and prices automatically now!
Did it work? Show us your page when you are done! We are looking forward to seeing your page! 🙂