Integrate Web Widgets with WIX

Table of Contents

How Can We Help?

You are here:

There are 3 ways you can add the widget:

  1. As an embeded URL directly under a Wix page. Take your Synthesis widget URL and add it directly inside your Wix page:
  1. As a “Book Now” button across all the pages. It will open the widget in a popup in the site
  2. As a “Book Now” page containing the widget inside


Book now button (only related to options 2 and 3):

  • Login into Wix
  • Go to “Settings” from the side panel
  • On the Settings page, select the “Custom Code” option
  • Under the “Body End” section, click on the “Add Code” button
  • Paste the code snippet under “Paste the code snippet here“. You can take the code from “my.synthesisvr.com >> Administration (sidebar option) >> Online & Email Settings >> Web Widgets & API >> the Embeded Examples button”.
  • Under the same Web Widgets & API page, edit your widget and add the following code under “Add HTML before the BODY tag closure“:
    <script>$('#experienceTypeDescription').addClass('d-none');
    $('<div class="svrclose"><button class="btn btn-block btn-primary" onclick=" window.parent.postMessage(\'close_svr\',\'https://YOUR_WEB_SITE\');">Close Booking Widget</button></div>').insertAfter('div.card');
    </script>
    <style>
    @media all and (orientation:landscape) { .svrclose { display: none; }
    .svrclose { margin: 10px;}
    </style>


Replace YOUR_WEB_SITE with your actual domain name.


Book now page:

Follow the same steps to create the Wix Custom tool, but use the following code:
  • <script>
  • svr_widget_id ='11111111-1111-1111-1111-111111111111';
  • var svrbooking = document.createElement('iframe');
  • svrbooking.src ='//api.synthesisvr.com/widgets/'+window.svr_widget_id;
  • svrbooking.style.width = '100%'; svrbooking.style.height ='100%';
  • document.getElementById('SITE_PAGES').innerHTML ='';
  • document.getElementById('SITE_PAGES').appendChild(svrbooking);
  • </script>

Replace 11111111-1111-1111-1111-111111111111 with the widget public key.

Also, through the Wix settings, make sure that code would load only for your “Book Now” page.

Sign Up For Your Trial