To embed the Softpulse scheduler on your website, follow these steps:
Variant 1
Display of events with reservation in the format 3/5 (= 3 of 5 places are still free)
Binde den folgenden Code dort in den <body> deines HTML-Codes ein, wo der Terminplaner angezeigt werden soll:
<script>
(function() {
var f = function(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'https://your-softpulse-domain.ch/widgets/scheduler/dist/widgets.js';
document.getElementsByTagName('head')[0].appendChild(script);
}
if (window.opera == '[object Opera]') {
document.addEventListener('DOMContentLoaded', f, false);
} else { f(); }
})();
</script>
<iframe id="fitness365-schedule-widget"
name="Fitness365ScheduleWidget"
src="https://your-softpulse-domain.ch/widgets/scheduler/dist/weekly-groups-schedule1.html?eventColor=F7A707&reserveButtonColor=F7A707"
width="100%" height="1060px" frameborder="0" scrolling="no" style="width: 1px; min-width: 100%;"></iframe>
- Customise the URLs with your personal Softpulse URL
- Adjust the colour HEX codes in the iFrame URL according to your needs (eventColor and reserveButtonColor).
Tip: There may be conflicts with other Java scripts on your web page. If you have display problems, try moving the javascript script to the end of your HTML body, just before the closing body tag .
Variant 2
Display of events with reservation in format 3, the participant limit can be defined directly in the widget code
- Integrate the code from variant 1 into your website as described above.
- Replace the URL with the following address:
https://your-softpulse-domain.ch/widgets/scheduler/dist/weekly-groups-schedule1.html?freePlacesEventMax=5&freePlacesEventTemplate=Free%20places%3A%20%7B0%7D&freePlacesEventTemplateExceed=Free%20places%20more%20than%20%7B0%7D
- Adjust the parameter freePlacesEventMax=5 according to your needs.
