Integrating with Wix

To integrate Workshop Butler with Wix, you must have any paid plan as only on paid plans Wix allows to include a custom javascript code.

1

You start integrating Workshop Butler with your Wix website as any other website - by envisioning a website structure you'd like to have. 

Our integration is based on JS widgets - snippets of Javascript code, that you add to the website pages. Each snippet loads and shows different content from Workshop Butler: event calendar, trainer profile, etc. You need to install different widgets to different pages so the website visitors can navigate freely between them. For example, it's a common practice to put the event calendar on the page with URL /schedule or /events, and the list of trainers to /trainers or /list-of-facilitators.

Placed on different pages, the widgets connect with each other via configuration parameters. For example, the 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.

2

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 the 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.

3

Go back to the website Dashboard in Wix, select Settings -> Tracking Tools -> New tool -> Custom code.  

In the opened form, fill the fields:

1. Insert Head snippet into the top field
2. Add any name, like Workshop Butler JS Widgets
3. 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.
4. In the Place Code In field, select Head
5. Click Save

4

Repeat step 3 by adding another Custom Code, only for the registration page. Workshop Butler uses Stripe to accept payments. Even if you don't plan to accept card payments, it's still required to include Stripe's code to the registration page.

In the opened form, fill the fields:

1. Insert <script src="https://js.stripe.com/v3/"></script> into the top field
2. Add any name, like Stripe
3. In Add Code to Pages, select Choose specific pages and select Registration. 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.
4. In the Place Code In field, select Head
5. Click Save

Now it's time for Body snippet!

5

Navigate back to the website editor and click Code Files in the left menu, right under the Page Code menu item.

Here you need to add a new JS file (so-called Velo 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 have already realized you have to repeat this operation for each widget. 

Open the file wsb-schedule.js and update its content. Simply copy the Body snippet from the kit and insert it into the file. Then copy the value of the target parameter. In this case, it will be #wsb-schedule. You need to copy only wsb-schedule.

6

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 the Choose Source button.

1. In Add your script file select Velo file
2. In Select one of your Velo files, select wsb-schedule.js
3. 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.

Click on the newly added element and then on the Set Attributes button.

1. Click the New Attribute button
2. In Attribute Name enter id
3. In Value enter the value from Tag name 

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 steps 2, 4, and 5 for each widget.