Installing Booking and Calendar on Personal Site


  • Newcomer

    How do I get the booking form and calendar on my personal website?

    I added the scripts to the header:

    <script type=“text/javascript” src=“https://static.myvr.com/public/myvrjs/v1/myvr.js”></script>
    <script>myvr.init("LIVE_5fa27a801402eb92ef1f4ec27e0a8672”)</script>

    Then on the page http://184.168.30.222/~buttercuphaven/the-property/ i added the following code:

    			<script>
    				var promise = myvr.book({
    				    property: "b6b0f2fe278f612b",
    				    adults: 1,
    				    children: 1,
    				    checkIn: "2016-01-01",
    				    checkOut: "2016-02-01",
    				    addons: ["caeb9c167089c18e", "99676ebdd62342e3"],
    				});					
    			</script>
    

    When I go the page, the form didn’t show up. It takes me to myVR website.

    Is there documentation I am missing?


  • MyVR Employee

    Hi Ismael,

    If your property is not enabled (active), or you don’t have online booking enabled in MyVR. You will see this type of behavior. Is the property your doing this for ready to be online bookable?


  • Newcomer

    THANKS turning it active now… also how do i get the property ID number? I have looked everywhere and cant find it.

    Thanks


  • MyVR Employee

    @Ismael-Burciaga you can find that on the widgets application page:

    0_1486066848142_upload-a4edffb0-8e55-49da-977a-30b2371a0673

    In the property Keys section

    Out of interest, why do you need the key, I see it’s already in the code you posted?


  • Newcomer

    @Tristan-Brotherton Thanks! I copied the code exactly from your documentation. I assume that would not be mine.


  • Newcomer

    Ok so I finaly figured out the booking widget but when i paste the code in the template, it just sends me to myvr.com

    <script type='text/javascript'>
        var _myvr = _myvr || {};
        _myvr.bookingButtons = _myvr.bookingButtons || [];
        _myvr.bookingButtons.push({
            property: '8b5a23c3c939090d',
            text: 'Book Now',
            index: _myvr.bookingButtons.length,
            id: ''
        });
        (function(buttonIndex) {
            var allScripts = document.getElementsByTagName('script');
            var thisScript = allScripts[allScripts.length -1];
            thisScript.id = 'myvrBookingButtonScript_' + buttonIndex;
            if (!document.getElementById('myvrBookingButtonScriptLoader')) {
                var bookingButton = document.createElement('script');
                bookingButton.type = 'text/javascript';
                bookingButton.async = true;
                bookingButton.id = 'myvrBookingButtonScriptLoader';
                bookingButton.src = ('https:' == document.location.protocol ? 'https://' : 'http://')
                    + 'static.myvr.com/public/booking-button/widget.js';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(bookingButton, s);
            }
        })(_myvr.bookingButtons.length - 1);
    </script>
    
    

    URL: http://184.168.30.222/~buttercuphaven/the-property/

    The property is active.

    Not sure what my issue is.


  • Newcomer

    Actually, is it possible to place a booking form on our website page? I noticed that the code above is for a button. Also if so, can you help me install it/use the right code?

    We are officially paying for the service and all we want to do is put a booking form and the availability calendar on our page. So frustrating theres not like a simple iframe or embed code we can just place. When we do place the code, it just sends us to myvr.com

    Thanks



  • Hi Ismael,

    I looked around in your website and noticed a few things.

    1. The code you were originally using was for MyVR.js. MyVR.js is a Javascript library that allows you to create a fully custom website with access to a lot of data within your MyVR account.
      The booking widget is a different option for people who want to use MyVR without using our website. It is a small bit of Javascript that you place in your website where you would like a booking button to appear. It is a much simpler option.

    2. As you mentioned, you copied code directly from the MyVR.js documentation. This code illustrates how to call the function, but should not be copied directly. If copied directly, it will immediately redirect the web browser to the booking page for the property with ID b6b0f2fe278f612b. This is a made up property ID used only in example documentation, so it causes an error that redirects the browser again to myvr.com. You should remove the code you copied to stop your page from taking you to the MyVR website.

    3. If you’d like the Book Now button currently on your website to take you to the MyVR booking page, you should remove the href attribute from that button and add an id attribute to that button. Then enter that id into MyVR when building the widget Here is an example of using an existing button on the page with the MyVR booking widget. Here is a screenshot of the UI in MyVR for entering an id for the button
      0_1486586635951_Screen Shot 2017-02-08 at 12.42.39 PM.png
      Note that this is optional. You can simply set “I’ll Use My Own Button” to “No” and copy the code we provide to wherever you want our button to appear.

    Now, to answer your question

    Actually, is it possible to place a booking form on our website page?

    We do not offer a ready-made booking form to put on a web page. You can, however, use MyVR.js to build a form that collects all relevant information (check in, check out, number of adults, etc.) before taking renters to the booking page MyVR provides. When the renter gets to the booking page, all of the information they filled out on your web page would already be filled in. We do not offer the ability to complete the entire booking process on 3rd party web pages because of issues with credit card security.

    Lastly

    So frustrating theres not like a simple iframe or embed code we can just place.

    I am sorry that this experience has been frustrating. You can, however, simply place the Booking Widget code anywhere in your website to generate a booking button. You can also use our calendar widget to display the availability and rates of your property on your website.

    Our booking default booking button looks like this
    0_1486587685559_Screen Shot 2017-02-08 at 1.01.08 PM.png
    And our default calendar looks like this
    0_1486587834749_Screen Shot 2017-02-08 at 1.03.45 PM.png

    I hope this helps.

    Cheers,
    Danny


  • Newcomer

    Thanks for following up. So is this website here using one of your websites or is it custom website http://www.sonomasquarecottage.com/rates-and-calendar/

    Thanks



  • @Ismael-Burciaga said in Installing Booking and Calendar on Personal Site:

    Thanks for following up. So is this website here using one of your websites or is it custom website http://www.sonomasquarecottage.com/rates-and-calendar/

    You’re welcome. That website is one of our websites. It was custom built using MyVR’s website builder.


  • Newcomer

    Ok perfect thanks for the quick reply. Last question, I went to this link to view my property and it says its broke. Did i forget something when setting up my property?

    https://myvr.com/reservation/redirect/booking/8b5a23c3c939090d/

    Thanks



  • @Ismael-Burciaga That looks like it might be a bug. Could you report that using the “Support” button in MyVR or using our public contact page? There’s also a handy “Report an Issue” button on the home page of the MyVR Community.

    Thanks,
    Danny


  • Newcomer

    Danny thanks for the reply.

    Ok so I have added the correct code onto my wordpress site for the booking button and the calendar but not sure why it keeps taking me to myVR when i visit the page:

    CODE IN HEAD:

    <script type=“text/javascript” src=“https://static.myvr.com/public/myvrjs/v1/myvr.js”></script>
    <script type=“text/javascript”>
    myvr.init(“LIVE_5fa27a801402eb92ef1f4ec27e0a8672”);
    </script>

    CODE IN PAGE TEMPLATE:

    		<div class="booking-form">
    		
    			<div class="myvr-calendar">
    				<script id='myvrCalendarScript' type='text/javascript'>
    				  (function(m,y,v,r,t,a,g){m.MyVRWidgetObject=t,m[t]=m[t]||function(){
    				  (m[t].q=m[t].q||[]).push(arguments);},m[t].l=1*new Date(),a=y.createElement(v),
    				  g=y.getElementsByTagName(v)[0],a.async=1,a.src=r,g.parentNode.insertBefore(a,g);
    				  }(window,document,'script','https://static.myvr.com/public/calendar/widget.js','myvr'));
    				  myvr('calendar', {propertyKey:'8b5a23c3c939090d', showRates:false});
    				
    				  /*
    				    You can optionally specify a unique HTML element id as a 3rd parameter
    				    above.  If specified, the calendar will be rendered at the element
    				    instead of inline.
    				
    				    myvr('calendar', {
    				      propertyKey:'8b5a23c3c939090d',
    				      showRates:false,
    				      elementId:'#elementId'
    				    });
    				  */
    				</script>
    
    			</div>
    
    
    			<script type='text/javascript'>
    			    var _myvr = _myvr || {};
    			    _myvr.bookingButtons = _myvr.bookingButtons || [];
    			    _myvr.bookingButtons.push({
    			        property: '8b5a23c3c939090d',
    			        text: 'Book Now',
    			        index: _myvr.bookingButtons.length,
    			        id: ''
    			    });
    			    (function(buttonIndex) {
    			        var allScripts = document.getElementsByTagName('script');
    			        var thisScript = allScripts[allScripts.length -1];
    			        thisScript.id = 'myvrBookingButtonScript_' + buttonIndex;
    			        if (!document.getElementById('myvrBookingButtonScriptLoader')) {
    			            var bookingButton = document.createElement('script');
    			            bookingButton.type = 'text/javascript';
    			            bookingButton.async = true;
    			            bookingButton.id = 'myvrBookingButtonScriptLoader';
    			            bookingButton.src = ('https:' == document.location.protocol ? 'https://' : 'http://')
    			                + 'static.myvr.com/public/booking-button/widget.js';
    			            var s = document.getElementsByTagName('script')[0];
    			            s.parentNode.insertBefore(bookingButton, s);
    			        }
    			    })(_myvr.bookingButtons.length - 1);
    			</script>
    
    
    		</div>
    

    PAGE I HAVE THE CODE ON: http://184.168.30.222/~buttercuphaven/the-property/

    Is there something I am doing wrong?

    Thanks


  • MyVR Employee

    @Ismael-Burciaga Looking at your page source I see other invalid code in there.

    <script>
    					var promise = myvr.book({
    					    property: "b6b0f2fe278f612b",
    					    adults: 1,
    					    children: 1,
    					    checkIn: "2016-01-01",
    					    checkOut: "2016-02-01",
    					    addons: ["caeb9c167089c18e", "99676ebdd62342e3"],
    					});					
    				</script>
    

    For example.

    My suggestion: clean up and remove all of the javascript in your page, and use the booking link provided to you in the widget for your book now button.


  • Newcomer

    Hello tristan,

    Where did you see that code at? I looked at my page-template and didnt see

    <script>
    var promise = myvr.book({
    property: “b6b0f2fe278f612b”,
    adults: 1,
    children: 1,
    checkIn: “2016-01-01”,
    checkOut: “2016-02-01”,
    addons: [“caeb9c167089c18e”, “99676ebdd62342e3”],
    });
    </script>

    Thanks


  • Newcomer

    OH man I was putting the code on the wrong page template… Ok if i have any other issues, I will ping you.


  • Newcomer

    Ok So i see the book now button but now I dont see my calendar. I used the code:

    			<div class="myvr-calendar">
    				<script id='myvrCalendarScript' type='text/javascript'>
    				  (function(m,y,v,r,t,a,g){m.MyVRWidgetObject=t,m[t]=m[t]||function(){
    				  (m[t].q=m[t].q||[]).push(arguments);},m[t].l=1*new Date(),a=y.createElement(v),
    				  g=y.getElementsByTagName(v)[0],a.async=1,a.src=r,g.parentNode.insertBefore(a,g);
    				  }(window,document,'script','https://static.myvr.com/public/calendar/widget.js','myvr'));
    				  myvr('calendar', {propertyKey:'8b5a23c3c939090d', showRates:false});
    				
    				  /*
    				    You can optionally specify a unique HTML element id as a 3rd parameter
    				    above.  If specified, the calendar will be rendered at the element
    				    instead of inline.
    				
    				    myvr('calendar', {
    				      propertyKey:'8b5a23c3c939090d',
    				      showRates:false,
    				      elementId:'#elementId'
    				    });
    				  */
    				</script>
    
    			</div>
    

    Thanks



  • Hi Ismael,

    The issue is that you still have some MyVR.js code on your page that is preventing the calendar widget from working properly. If you remove the following bits of code, the calendar should work.

    <script type="text/javascript" src="https://static.myvr.com/public/myvrjs/v1/myvr.js"></script>
    
    <script type="text/javascript">
      myvr.init("LIVE_5fa27a801402eb92ef1f4ec27e0a8672");
    </script>
    

    Here is an example with those lines of code commented out. You can see that the calendar appears. If you uncomment the lines of code (e.g. remove the <!-- -->), you will see that the calendar stops working.

    Best,
    Danny


  • Newcomer

    Danny Thanks. I will remove that.

    Also, my client is wanting the GET A QUOTE page like this page: http://www.sonomasquarecottage.com/rates-and-calendar/ who is using your service.

    Is that a form you offer your customers too if someone has their own website? like maybe a link similar to the BOOK NOW link?

    Thanks
    Ismael



  • Also, my client is wanting the GET A QUOTE page like this page: >http://www.sonomasquarecottage.com/rates-and-calendar/ who is using your service.

    Is that a form you offer your customers too if someone has their own website? like maybe a link similar to the BOOK NOW link?

    Unfortunatly we do not offer a pre-built widget to get a quote. If you are comfortable writing custom HTML and JS, you can create your own form and use the MyVR.js Quote function to get a quote based on user input. However, as I mentioned earlier, using both MyVR.js and widgets on the same page can cause issues.


Log in to reply
 

About the MyVR Community

Looks like your connection to MyVR Community was lost, please wait while we try to reconnect.