Contact Info
19524 Nordhoff St, Suite 3A
Los Angeles, CA 91324
info@synthesisvr.com
+1 (818) 858 1282
Follow Us

Integrate Web Widgets with WIX

You are here:
< All Topics

There are two ways you can add the widget:

  1. As a “Book Now” button across all the pages. It will open the widget in a popup in the site

 

  1. As a “Book Now” page containing the widget inside

 
 
Book now button:
 

· Login into Wix

  • Go to “Tracking & Analytics” from the side panel
  • Click on the “+ New Tool” button and select”Custom”
  • Paste the code snippet you have got from Synthesis (the “Embeded Examples” button) and set the “Place Code in” option to “Body -end”.

 
 
Under Synthesis, go to “Administration >> Advanced Settings >> Online & Email Settings >> Web Widgets” and Edit your widget.
In the “Add HTML before the BODY tag closure” field, add the following code:

  • <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 =createElement(‘iframe’);
  • src =‘//api.synthesisvr.com/widgets/’+window.svr_widget_id;
  • style.width = ‘100%’; svrbooking.style.height =‘100%’;
  • getElementById(‘SITE_PAGES’).innerHTML =”;
  • 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.

Table of Contents