Booking Widget


  • Newcomer

    I've been trying to change the booking widget to accept my own button. Any suggestions?


  • Leader

    @mary-russell - can you be more specific? Where are you changing it, and what are you using to change it?


  • Newcomer

    @Jenny-Oest I should have started with I have my own wordpress website. The booking widget button is currently working but I really hate the shopping cart on it. There is not an option for a plain button. I tried a couple of different plugins following the instructions but neither has worked. I was just wondering if anyone has had luck adding their own booking button with a wordpress website.


  • Leader

    @mary-russell - AH - ic. Thanks for the clarification. I use the MyVR site, so I can't answer this with any certainty. So then...Are you looking for a wordpress widget button that opens the booking platform on MyVR or your own booking platform?


  • Newcomer

    @jenny-oest I'm looking for a booking widget or plug-in that will open on MyVR.


  • MyVR Employee

    Hi Mary,

    First step is you need a button that you like. The HTML for that is simple, something like.

    <button id='myBookingButton'> Book Now </button>

    To make that button look how you'd like, you'll need to use CSS, or find one in your wordpress template you like.

    Note the field there "ID" - in the booking widget just be sure to use the same ID

    0_1550598136540_3e95d253-0d22-4f05-aa4b-27413761aa6a-image.png


  • Newcomer

    @Tristan-Brotherton
    I've tried that before and I just did it again to be sure that I had been doing exactly what your image indicated. I've tried several different plugins the last being the bootstrap that is part of Wordpress. Here are screenshots - maybe you can help with what I am missing.0_1550662433409_1.jpg
    0_1550662496294_2.jpg


  • MyVR Employee

    Hi Mary

    Bootstrap is great and easy to work with, and I see what you are doing wrong here.

    Your button HTML currently is:

    <button type="button" class="btn btn-primary">Primary</button>

    We need to add another attribute to that so it has an ID we can reference later (id="myBookingButton") for example, after we have done that, your HTML will look like this:

    <button type="button" class="btn btn-primary" id="myBookingButton">Primary</button>

    One thing to note is this will draw a button that looks like this:

    0_1550684587288_899f6fb8-eaa6-4daf-9221-a1de53211988-image.png

    I'm guessing you won't want your button to say "primary" so you can change that to something else, like "Book Now", then we modify the HTML to be:

    <button type="button" class="btn btn-primary" id="myBookingButton">Book Now</button>

    Now we have your HTML - so go and put that in your wordpress site where you want the booking button.

    Next you need to configure the booking widget. You were putting all of the HTML in there, instead what you want to do is add just the name of the ID we created, in our example that would be "myBookingButton" - be sure to match the same case as you used before, it's case sensitive!

    0_1550684823800_a06821ef-d3dd-4db0-9b5a-63be962ec4ad-image.png

    Then follow the rest of the instructions of the booking widget to enable it on your website.


  • Newcomer

    @tristan-brotherton I'm making progress, I can now see a very small button. I've tried to change to another bootstrap button but they all appear the same no matter what the code. I have attached another screenshot. When I click on the button nothing happens. You mentioned to follow the rest of the instruction of the booking widget to enable it on my site but I don't see any other instructions.


  • Newcomer


  • MyVR Employee

    Great! Did you copy the updated javascript code, provided by the booking widget and paste it into your wordpress site?

    Bootstrap has documentation on its buttons but if you want to make it bigger, depending on the version of bootstrap you are using, try adding 'btn-lg' and 'btn-block' in the "classes" section.

    <button type="button" class="btn btn-primary btn-lg" id="myBookingButton">Primary</button>


  • Newcomer

    @tristan-brotherton yes and still no luck. This is what the code looks like now:
    <script type='text/javascript'> var _myvr = _myvr || {}; _myvr.bookingButtons = _myvr.bookingButtons || []; _myvr.bookingButtons.push({ property: 'cf28397c02fb635a', text: 'Book Now', source: '{!source!}', index: myvr.bookingButtons.length, id: '"myBookingButton"' }); (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>


  • Newcomer

    @Tristan-Brotherton Any chance the standard button in the widget could be a simple one without a shopping cart? That would solve all my problems...


  • MyVR Employee

    Sure!

    Just add some custom CSS like this:

    <style type='text/css'>
    
    .myvr-booking-button {
       padding-left: 15px;
    }
    
    .myvr-booking-button .icon-cart {
       display: none;
    }
    
    </style>
    

Log in to reply
 

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