Adding an online booking to CMS WIX

Free WIX plan

For a free plan, the WIX constructor has limitations, and it is impossible to embed the Altegio online booking widget to open it in the standard display. One of the most relevant options is to install the online booking widget using  <iframe>.

Step-by-step instructions

1. Open the WIX editor and go to the Shop section. Click the Embed website button.

2. There will be an area for creating a website opened.

3. To set a link to an online booking widget in this block, click it and you will see Enter the site address button. Click this button. 

4. Addl the Altegio widget link and click the Update button.

5. Save the website in the design view and publish it.

WIX paid plan

To install an online booking to a WIX customized button, your own domain must be connected to the site. 

Installing an online booking on WIX (Altegio button)

1. Open the site editing mode. In the top menu, select Settings – Analytics Codes.

2. Press the + new tool button, select New code in the drop-down menu.

3. In the field for inserting the code snippet paste the standard button code taken from the Online booking > Online booking widget > widget > Button code tab. In “Where to place the code?” specify Body – end. Click the Add button.

4. Click Save and publish a website.

Installing an online booking to a WIX customized button

1. Add a button in the design view that will be a button for online booking.

2. In the link settings, specify Where does this item lead – Web address – Enter a link to your online booking form as https://nXXXXXX.alteg.io

You can find the link in the Online booking > Online booking widget, to the right of the name of the online booking form.

3. Save and publish the site.

4. Open the site editing mode. In the top menu, select Settings – Analytics Codes. Click the + new tool button, select New code in the drop-down menu.

5. In the field for the code, paste the following code: 

<script async src="https://wXXXXXX.alteg.io/widgetJS"></script>

<script>

let elem = document.querySelectorAll('[href^="https://nXXXXXX.alteg.io”]');

for (i = 0; i < elem.length; i++) {

elem[i].classList.add('ms_booking');    

}

</script>

XXXXXX must be replaced with the identifier of your online booking form, you can find it in the link. 

For example, in the link https://n193246.alteg.io/, the identifier is the numbers 193246.

Code example: 

<script async src="https://w193246.alteg.io/widgetJS"></script>

<script>

let elem = document.querySelectorAll('[href^="https://n193246.alteg.io”]');

for (i = 0; i < elem.length; i++) {

elem[i].classList.add('ms_booking');    

}

</script>

6. In the paragraph “Where to place the code?” indicate Body – end. Click the Add button.

7. Save and publish the site.

Comments