Solved Installing Booking and Calendar on Personal Site
-
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?
-
THANKS turning it active now… also how do i get the property ID number? I have looked everywhere and cant find it.
Thanks
-
@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?
-
@Tristan-Brotherton Thanks! I copied the code exactly from your documentation. I assume that would not be mine.
-
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.
-
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.
-
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. -
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. -
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 anid
attribute to that button. Then enter thatid
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 anid
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 -
-
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.
-
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
-
@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 -
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
-
@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.
-
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
-
OH man I was putting the code on the wrong page template… Ok if i have any other issues, I will ping you.
-
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 -
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.