Customize the minutes dropdown
Go to “Administration >> Advanced Settings >> Online & Email Settings >> Web Widgets & API”. Create or edit your booking widget and add the following option to the “Add HTML to the HEAD tag” option: Under “Add HTML before the BODY tag closure”, add:
Booking Add-On – upon successful booking, redirect to a confirmation page
In case you want to track your website conversion through third party widgets or code (like Google Analytics or Facebook Pixel), you’ll have to redirect your website visitors to a page on your website that has the necessary code. To do the redirect, please add the following code under the “Add HTML before the BODY tag closure” setting of your Booking Widget: <script> window.onSVR_SuccessfulBooking = function(bookingData){ try { var passData = new Object(); bookingData.email = window.svr.selection.email; var redirectUrl = ‘https://yourdomain.com/thankyou?id=’ + btoa(unescape(encodeURIComponent(JSON.stringify(bookingData)))); window.top.location.href = redirectUrl; } catch (err) { alert(err); } } </script> Don’t forget to replace yourdomain.com with your actual domain name, as well as ensure that you have a “thankyou” page.
Add "How did you hear about us?" option
Go to “Administration >> Advanced Settings >> Online & Email Settings >> Web Widgets & API”. Create or edit your booking widget and add the following option: How did you hear about us? Scroll down to “Add HTML before the BODY tag closure” and append the following lines: <script> window.svr.howdidyouhearaboutus = [ ‘Facebook’, ‘Instagram’, ‘Youtube’, ‘Google’, ‘Friend told me’ ]; window.svr.OnEmailValidateEvent = function() { $(‘#howdidyouhearaboutus’).replaceWith(‘<div><select id=”howdidyouhearaboutus” data-view=”howdidyouhearaboutus” style=”font-size: 1.5em;height: 50px;width:100%;”>’ + window.svr.howdidyouhearaboutus.map(function(t,idx){ return ‘<option value=”‘+t+'”>’+t+'</option>’ }) + ‘</select></div>’); } </script> Make the option visible under the customer profiles:
Integrate Web Widgets with WIX
There are 3 ways you can add the widget: As an embeded URL directly under a Wix page. Take your Synthesis widget URL and add it directly inside your Wix page: As a “Book Now” button across all the pages. It will open the widget in a popup in the site 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><button 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.
Booking Add-On – disable opening / closing hours from booking
Due to multiple reasons (as example, having a lot of foot traffic), you may want to hide periods of the day from your booking widgets. To avoid creating new experience type with different hours and extra logic that may complicate your setup, you can simply extend the booking widget with some custom code. To make it even easier for you, we already built that code and simplified it to the possible minimum. You may want to hide times based on day of the week or based on experience type (or both together). For that purpose, you have to build your logic and few lines of javascript code. Considering the days of week are: Monday => 1 Tuesday => 2 Wednesday => 3 Thursday => 4 Friday => 5 Saturday => 6 Sunday => 7 If you want to hide options from the widgets for only Monday + Thursday + Sunday, then you’ll have to use the following combination: 1,4,7 If it is to apply for Monday to Thursday, then use: 1,2,3,4 Next, you need your experience type ID (can be found on the Experience Types management page). Let say you work with the default “Immersive” experience type => 1 Then, your rule will looks like this: 1_1,4,7 => the _ character is used as a separator between the experience type and the days of the week 1 => in this case, you don’t have any specified days, so we assume your rule apply everyday *_1,2,3,4 => applies for ALL experience types between Monday ot Thursday Note: you can’t list multiple experience types separated by comma. You have to create multiple rules instead. You can use asterisk (*) to apply the rule for all your experience types What the actual code looks like: Default line (no changes on it): window.svr.hideTimes = new Object(); [‘hide_before’,’hide_after’].forEach(function(i){ window.svr.hideTimes[i] = new Object(); }); Your rules: window.svr.hideTimes[“hide_before”][“*_1,2,3,4”] = “13:00”; window.svr.hideTimes[“hide_before”][“1”] = “14:00”; window.svr.hideTimes[“hide_after”][“*”] = “20:00″; All your rules have to be enclosed in a <script> tag. You also have to load the actual custom logic: <script src=”//api.synthesisvr.com/widgetPlugins/skipTimeOptions.js” crossorigin=”anonymous”></script> Examples 1) If you don’t want to accept bookings before 1pm and after 8pm: <script> window.svr.hideTimes = new Object(); [‘hide_before’,’hide_after’].forEach(function(i){ window.svr.hideTimes[i] = new Object(); }); window.svr.hideTimes[“hide_before”][“*”] = “13:00”; window.svr.hideTimes[“hide_after”][“*”] = “20:00″; </script> <script src=”//api.synthesisvr.com/widgetPlugins/skipTimeOptions.js” crossorigin=”anonymous”></script> Example 2) To skip late booking (after 6pm) for the Immersive experience type during the busy days (Friday to Sunday): <script> window.svr.hideTimes = new Object(); [‘hide_before’,’hide_after’].forEach(function(i){ window.svr.hideTimes[i] = new Object(); }); window.svr.hideTimes[“hide_after”][“*_5,6,7”] = “18:00″; </script> <script src=”//api.synthesisvr.com/widgetPlugins/skipTimeOptions.js” crossorigin=”anonymous”></script> You need to append the final code to the “Add HTML before the BODY tag closure” option under the Booking Widget settings (the Edit button).
Widgets – WordPress Plugin
Getting started:You have to install the SynthesisVR WordPress Plugin in your WordPress instance. To do that: Download the SynthesisVR WordPress Plugin: https://svr.li/wp/plugin Login in your WordPress instance with administration privileges From the sidebar, navigate to Plugins >> Add New >> Upload Plugin >> select the previously downloaded ZIP file. The plugin is now installed and you have access to the SynthesisVR shortcodes. Booking shortcode: Create a new widget (full guide: https://synthesisvr.com/knowledge-base/booking-widget-setup/) On the widgets page, click the “Advanced” button and copy the public key Use the following shortcode: [synthesis type=”booking” public_key=”111111111-1111-1111-1111-111111111111″] Replace 111111111-1111-1111-1111-111111111111 with the actual public key Membership shortcode: Create membership plans with the “Digital Cards Only” option being turned ON Create a new Membership Widget and assign the desired Membership Plans Refresh the page and copy the new Public Key Use the following WordPress shortcode [synthesis type=”membership” public_key=”111111111-1111-1111-1111-111111111111″] Replace 111111111-1111-1111-1111-111111111111 with the actual public key Goods shortcode: Create new goods and make sure the “Available Only For Registered Customers” option is turned ON Create a new Goods Widget and assign the desired Goods Refresh the page and copy the new Public Key Use the following WordPress shortcode [synthesis type=”goods” public_key=”111111111-1111-1111-1111-111111111111″] Replace 111111111-1111-1111-1111-111111111111 with the actual public key Games shortcode: Follow this guide: https://synthesisvr.com/knowledge-base/add-games-info-to-your-website/ Use the following WordPress shortcode: [synthesis type=”game_categories” public_key=”111111111-1111-1111-1111-111111111111″ categories=”*” games_per_row=”3″ row-size=”100%”] Replace 111111111-1111-1111-1111-111111111111 with the actual API key generated at the first step
Add Games Info To Your Website
1. Create a new API rule (similarly to https://synthesisvr.com/knowledge-base/reading-leaderboard-through-api/) or edit an existing one and assign the “Website Games” permission.2. In your website, make sure you have a DOM element that will hold the entire games section. You can create such an element through the following javascript code: var svrHolder = document.createElement(‘div’); svrHolder.id = ‘loadSvrGamesWidget’; document.getElementsByTagName(‘body’)[0].appendChild(svrHolder); 3. Add the following javascript code: var svrScript = document.createElement(‘script’); svrScript.onload = function () { window.svrLoadGames({ skipVariants: true, groupByCategories: “*” , container: ‘#loadSvrGamesWidget’, rowSize: ‘100%’, extraInfo: true, uuid: ‘111111111-1111-1111-1111-111111111111’, gamesPerRow: 3 }); }; svrScript.src = ‘//api.synthesisvr.com/javascripts/WordpressWidget.js’; document.head.appendChild(svrScript); Setting the correct UUID is the only requirement to get the code to work.Parameter meaning: skipVariants = [TRUE or FALSE] — if you have any game variants, should they be displayed or skipped (default = TRUE) groupByCategories = [CATEGORY_ID(s) or *] — a string of one or multiple categories separated by comma. * means ALL container = [selector for the widget container (the one from point 2) ] rowSize = [NNN% or NNNpx or NNvw] — CSS value describing the width of the row extraInfo = where applicable, the code will add Age ratings and Min/Max players uuid = [111111111-1111-1111-1111-111111111111] — the ID generated during point 1 gamesPerRow = [INTEGER] — how many games to be displayed per row Optional: to add a search field on your site, you can use/adjust the following HTML code: <div>Search: <input type=”text” onkeyup=”window.svrSearchTitle(this.value);”></div> 4. Because all the code is loaded in your web page, you can freely style the result through CSS.At that point, you are done with the additions to your web page. 5. Under the SynthesisVR web administration, go to “Administration” and click on “Games, Categories, Licenses”. Switch to the “Categories” tab and mark the game categories that should be exposed online: If you have to exclude any game from your website (normally – games that aren’t available to your customers), you can create a new Game Category of type “Restricted Access – Enforced”. Assign all the excluded games to it and then assign that category in the same way described above.
Booking Add-On – Booking Widget Setup
This Documentation will provide a step by step guide to setting up your booking widget, integrating it in to your WordPress website and other advanced configurations. On your left menu click Administration Click Advanced Settings – Web Widgets as shown below This takes you to the Widgets Page. On the Booking Widgets TAB – Click the + sign to create a new web widget. This will open up a pop up menu to create a new widget. Widgets Pop Up Settings 1. Title – A Suitable title for your widget 2. Predefined Template – Select Template Version 5 from the drop down menu as shown below 3. Click the Experience Type+ buttonSelect the correct Experience from the dropdown menu this widget is going to apply. You can have multiple Experiences on the same widget. Make sure to click Experience Types+ button to add more experience. 4. Take Out Time Options+ (Optional) By default the booking will show all your time slots. Example: You have a 15, 30, 45 and 60 minutes duration on your Booking Rules for VR Experience. Online you only want to show the 30,45 and 60 minutes option and do not want customers booking 15 minutes, then you can use this Take Out Time Options+ and not show the 15 minutes duration as shown below. 5. Waiver Template (Optional)If you want your customers to select a waiver before checkout select the correct Waiver Template from the drop down as shown below: 6. About Field – (Optional)Here you can add text explaining the booking widgets or conditions. 7. Payment moduleSynthesis VR can integrate multiple merchant processors for free. Here you can select the correct Payment module that is to applied for taking customers’ payment online. **This module has to be setup prior to selecting from the drop down. 8. Collect More Information About Your Customers+ (Optional)By default only Email, Password and Full Name is entered when a customer is making a booking online. If you want to collect more information you can use this button to add multiple fields. All fields are default text inputs, but limitations can be set as shown below.**For more customization options check the booking customization section. 9.Booking Confirmation Points+ (Optional)You can create points that the customer would check off using this. For example, something like “I agree to come 15 minutes prior to my session start”. This checkbox would be required to be checked off. 10. Add HTML to the HEAD and BODY tag (Optional)These fields are used to customize various options on your widget settings. Using this you can pretty much customize and enhance various options according to your own individual requirements. **This is clearly explained in the customization section with multiple examples as use case scenarios.11. Customer can pay in your locationIf you want your customers to pay at your Arcade instead of ONLINE, select YES, If the customer has to Pay ONLINE, select NO 12. Disable enforcing account registrationIf you want to enforce customers to register before checkout. This option will be OBSOLETE if ONLINE PAYMENT OPTION is selected, customer will have to create a profile before checking out. 13.Arcade Image (Optional)Upload your logo or image of choosing for the widget 14. External CSS URL (Optional)Synthesis VR supports external styling using CSS. Please input URL to enable external styling. 15. Time FormatAs shown below, which format of time you want to use in your widget. AM/PM or Military style Time. 16. Pre-selected duration upon loading the widget (Optional)If you want a certain duration to load by default based on your booking duration, input the duration in minutes as shown below. This will load the 30 minutes duration by default on the booking page. 17. Earlier Possible Time After (Optional)This is an extremely valuable field for events and party bookings. For special events and parties if you require a certain duration then use this field.Type Digit and Type of Duration as shown below. This will require a 24 hour notice before they can make a reservation online. This will prevent same day reservations and have to be used carefully. Once you have setup everything please click the Save Changes button.