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.

Previous How to customize waiver form
Next Licensing Content 1.0
Table of Contents