Solved Installing Booking and Calendar on Personal Site

[Tristan Brotherton]

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?

[Ismael Burciaga]

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

Thanks

[Tristan Brotherton]

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

In the property Keys section

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

[Ismael Burciaga]

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

[Ismael Burciaga]

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.

[Ismael Burciaga]

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

[Danny Eiden]

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
   
   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

And our default calendar looks like this

I hope this helps.

Cheers,
Danny

[Ismael Burciaga]

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

[Danny Eiden]

@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.

[Ismael Burciaga]

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?

Thanks

[Danny Eiden]

@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

[Ismael Burciaga]

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

[Tristan Brotherton]

@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.

[Ismael Burciaga]

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

[Ismael Burciaga]

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

[Ismael Burciaga]

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

[Danny Eiden]

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

[Ismael Burciaga]

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

[Danny Eiden]

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.