Integrating with Wix
You start integrating Workshop Butler with your Wix website as any other website - by envisioning a website structure you'd like to have.
Placed on different pages, the widgets connect with each other via configuration parameters. For example, Schedule widget has eventPageUrl parameter where you need to add the URL of the page containing EventPage widget. Using eventPageUrl parameter, the Schedule widget generates unique URLs for each event, so visitors can navigate to unique event pages from the event calendar.
To set these configuration parameters, you need to establish a website structure and add new pages to your Wix website. You can do it by opening your website in Wix, clicking Site Actions -> Edit Site and adding page by page.
It's time to add the first widget, the event calendar (or Event Schedule). You need to get the Schedule widget code to install on a website page. For that, follow this guide. On step 4 select Schedule widget, and on step 6, before copying the code, come back here and keep reading :).
There are two code snippets the kit generated for you. The first one ( Head snippet) contains links to JS and CSS files, the second one (Body snippet) contains the code for the widget itself. Head snippet is the same for all widgets and you need to add it just once in Wix.
Go back to the website Dashboard in Wix, select Settings -> Tracking Tools -> New tool -> Custom code.
In the opened form, fill the fields:
- Insert Head snippet into the top field
- Add any name, like Workshop Butler JS Widgets
- In Add Code to Pages, select Choose specific pages and select only the pages you created on step 1. Of course, you can insert the code to all pages of your website, but it's a good practice to load the scripts and styles only on the pages where they are required.
- In Place Code In field, select Head
- Click Save
Now it's time for Body snippet!
Navigate back to the website editor and click Code Files in the left menu, right under Page Code menu item.
Here you need to add a new JS file (so-called Corvid file in Wix terminology). We recommend naming the file something like wsb-schedule.js or wsb-event-calendar.js, so you easily identify the file you need afterwards. As you already realized you have to repeat this operation for each widget.
Open the file wsb-schedule.js and update its content. Unfortunately, you cannot simply copy the Body snippet from the kit to this file. You need to make some changes. Below you can find an example on how to change the Body snippet.
Please, copy the value of the target parameter. In this case, it will be #wsb-schedule. You need to copy only wsb-schedule.
Navigate to the page where you decided to show the event calendar and select a place where the calendar must be shown. Add a new Custom Element to the page. You can do it by clicking Add -> Embed -> Custom Embeds -> Custom Element. This custom element will contain the whole event calendar so make sure its width and height are reasonable.
Click on the newly added element, then on Choose Source button.
- In Add your script file select Corvid file
- In Select one of your Corvid files, select wsb-schedule.js
- In Tag name, type the value you copied before (example, wsb-schedule). It's important to have the value from the target parameter, as JS widget looks for a div element to insert the content from Workshop Butler. If it cannot find the element from target parameter, it won't be able to insert the content.
That is it! Now you can save the page and enjoy a functioning event calendar, pulled directly from Workshop Butler. To add other widgets, repeat the steps 2, 4 and 5 for each widget.