Set up an Event Schedule web widget

Setting up an Event Schedule web widget allows your schedules to appear on your web site. Setting this up is currently a little more "manual" than we'd like, but as the set-up is typically a one-time thing, please bear with us while we work to making this a smoother process.

To set up a Web Widget:

  1. Create an Event Schedule app module with the filter settings that reflects what you want to appear in your web widget. For example if you want the web widget to show all your pools, create a module with all the locations added, and click Create. You don't need to add this module to your app, you can leave it offline. If you want your web widget to have the same filter parameters as your app modules, you don't have to reproduce the app modules.Screenshot_2020-01-22_11.02.24.png
  2. Next you need to contact your reseller support team and let them know the name of the module(s) that have the filter settings you want for your web widget(s). We will:
    • Extract the filter parameters and create a widget(s) for each of them
    • Generate an API key for you (machine login)
  3. After we've done this, you'll see your widget(s) appear in the Web Widgets tab of the Event Schedule in the cockpit.Screenshot_2020-01-22_11.09.39.png
  4. Get your Widget code by clicking on the down-arrow at the end of the row of the widget and select Generate Embedded Code:Screenshot_2020-01-22_11.13.21.png
  5. Copy the code and give it to your Web developer to include in your web page. Note that the code contains a placeholder for the API KEY -- your developer needs to replace the <API-KEY> text with the API Key we generate for you. Note that the require API key is not the API Key that is shown in the Account Settings -- it's different, so please use the one we give you for the Event Schedule widget. Screenshot_2020-01-22_11.15.21.png
  6. If you want to see what your widget looks like before your Web developer spends time on it, you can use a free tool like CodePen to see this (you'll have to create a CodePen account).Screenshot_2020-01-22_11.23.26.png
  7. You can set configuration options for a widget including providing your own CSS to change the font and colours, even implement a "dark mode" if that suits your website.