Skip to content
Stay date and guest selection widget for publishers and affiliates
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bower_components
dist
js
node_modules
resources
.gitignore
README.md
config.codekit3
config.js
embed.build.js
index.html
package-lock.json
package.json
widget.min.js

README.md

Book Your Stay Widget

Stay date and guest selection widget for publishers and affiliates to setup on their website. Adjust the settings in the sample below and provide the HTML/JavaScript snippet to the client. Click here to view the demo.

Sample

You can refer to index.html on your localhost or the demo site https://assets.rootrez.com/book-your-stay/.

<style>

    :root {
        --primary-color: orange;
        --secondary-color: pink;
        --book-font: 'proxima-nova';
    }

    #RootRezWidget{
        font-family: var(--book-font);
    }

    @font-face {
        font-family: 'proxima-nova';
        src: url("https://assets.rootrez.com/rr-rangepicker/dist/fonts/proxima-nova/proximanova-regular-webfont.woff2") format("woff2"), url("https://assets.rootrez.com/rr-rangepicker/dist/fonts/proxima-nova/proximanova-regular-webfont.woff") format("woff");
        font-weight: normal;
        font-style: normal;
    }

</style>
<script>
    (function (window, document) {
        var loader = function () {

            // required (update with your lodging subdomain): 
            var submission_url = "https://lodging.publisher-domain.com";
    
            // optional (these values can be left empty): 
            var default_checkin = ""; // MM/DD/YYYY (e.g. 06/07/2020)
            var default_checkout = ""; // MM/DD/YYYY (e.g. 06/15/2020)
            var min_checkin = ""; // MM/DD/YYYY (e.g. 06/01/2020)
            var max_checkout = ""; // MM/DD/YYYY (e.g. 06/28/2020)
                       
            var s = document.createElement("script"), t = document.getElementsByTagName("script")[0];                 
            s.id = "rootrezScript";
            s.src = "https://assets.rootrez.com/book-your-stay/widget.min.js";
            s.setAttribute("data-default_checkin", default_checkin);
            s.setAttribute("data-default_checkout", default_checkout);
            s.setAttribute("data-min_checkin",min_checkin);
            s.setAttribute("data-max_checkout",max_checkout);
            s.setAttribute("data-submission_url",submission_url);
            t.parentNode.insertBefore(s, t);
        };
        window.addEventListener ? window.addEventListener("load", loader, false) : window.attachEvent("onload", loader);
    })(window, document);
</script>
<div id="RootRezWidget"></div> 

For affiliates you would adjust the submission_url as follows:

var submission_url = "https://lodging.bookwesteros.com/referral?Code=rz-78th-annual-widget-festival";

For discounts and value-adds:

var submission_url = "https://lodging.bookwesteros.com/?PromoCode=FunPack";

And for an affiliate with a discount/value-add:

var submission_url = "https://lodging.bookwesteros.com/referral?Code=rz-78th-annual-widget-festival&PromoCode=FunPack";

Settings

Variable Description
submission_url Required. The publishers URL to submit to
default_checkin Checkin date the date picker will default to
default_checkout Checkout date the date picker will default to
min_checkin The minimum allowed check-in date
max_checkout The maximum allowed check-out date

Developer Info

Building an embeddable Javascript widget

Build file to share in third party script:

widget.min.js

Files to do any change in widget html or css are the follows:

HTML: template/form.html SCSS: resources/scss -> npm run styles

Production: npm run prod


After any changes in these files, do the build again for creating the widget.min.js file: 
```bash
npm run build
You can’t perform that action at this time.