rootrez-logo-vertical

The RootRez Booking Widget v 1.0

Grab the CSS, HTML and Javascript below and modify as needed.

Note, the RootRez Booking Widget v1.0 will be deprecated and no longer supported beginning January 1, 2023. Contact your RootRez Client Success Manager for details and access to v2.0.


  1. Place the <style> section and place it in the <head> section of your page.
  2. Styles - modify the CSS styling rules as needed. You may need to use !important to override some rules.
  3. Copy & Paste the <script> section and place it wrapped by the <body> section of your page inmediately before the closing </body> tag.
  4. Dates - modify the default_checkin, default_checkout, min_checkin, and max_checkout as needed. They can be left blank to not set a default, but will default on the booking site to a checkin two weeks in the future, and a checkout four days after that.
  5. Text - modify the title, and tagline to suit your needs. The variables are required, but you can set to empty strings to remove the header text completely.
  6. URL - modify the submission_url to point to your RootRez-hosted booking site. Want to customize your submission url to default to an advanced search? Let us know and we can provide the custom links to get your customer the most appropriate search results.
  7. API Key - modify the data-publisher_key to match your specific RootRez API key.
  8. Optional Configuration - Want to use a specific discount or value add code instead of showing a list to choose from? Change the value_add_code to match the code you want to apply to every user. Leave this blank to show a list of available value adds and discounts. Note: Value add list is displayed after selecting a stay date range, and only shows those value adds which are valid in the chosen date range.
  9. Localization - to display the calendar in another language, modify the data-locale value to one of the available translations. Currently available translations are: "en-us" for English, and "fr-ca" for French.
  10. Results Window - Results will be shown on the current window or into a new window/tab based on this setting. Modify the results_in_new_tab value for true (new window/tab) or false (current window/tab). Defaults to false.
  11. Place the <div id="RootRezWidget"></div> container on your page wherever you want our widget to appear.
  12. That's it! We'll handle the rest!

The CSS


# place in your page's head section
<style>
    .container {
            max-width: 800px;
        }
        :root {
            --primary-color: orange;
            --secondary-color: pink;
            --book-font: 'Roboto Condensed',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            --border-radius: 200px;
            --border-color: #ececec;
            --form-border: 1px solid #ececec;
            --box-shadow: none;
        }

        #RootRezWidget{
        // should inherit your site's fonts, but can add here if needed. Example lines:
            /* font-family: var(--book-font);
            box-shadow: none !important; */
        }
	// uncomment and modify to override title alignment, colors, fonts, etc.
        /* #widget-title {
            font-size: 2em;
            font-weight: bold;
            text-align: left !important;
        }
        #widget-tagline {
            font-size: 1.2em;
            text-align: left !important;
        } */
</style>

The Javascript



# place inside your html body near the bottom
<script>
    (function (window, document) {
        let loader = function () {

            // required (update with your lodging subdomain):
            let submission_url = "https://lodging.visitsaltlake.com/search";
            // optional widget title. replace with empty strings to remove.
            let title_text = "Book Your Downtown Lodging Here";
            let tagline_text = "Simply put, nobody knows Salt Lake better, ";
            tagline_text += "has lower rates or a better selection of incredible ";
            tagline_text += "hotels and lodging. Search & book with locals.";

            // optional (these values can be left empty):
            let default_checkin = ""; // MM/DD/YYYY (e.g. 06/07/2020)
            let default_checkout = ""; // MM/DD/YYYY (e.g. 06/15/2020)
            let min_checkin = ""; // MM/DD/YYYY (e.g. 06/01/2020)
            let max_checkout = ""; // MM/DD/YYYY (e.g. 06/28/2020)
            let value_add_code = ""; //Leave blank. This is for optionally overriding available value-adds.
            let results_in_new_tab = true; // true = opens results in a new window/tab ; false = opens results in the current window/tab

            let 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-publisher_key","YOUR API KEY HERE");
            s.setAttribute("data-max_checkout",max_checkout);
            s.setAttribute("data-submission_url",submission_url);
            s.setAttribute("data-title_text",title_text);
            s.setAttribute("data-tagline_text", tagline_text);
            s.setAttribute("data-value_add_code", value_add_code);
            s.setAttribute("data-api_url", "https://svc.rootrez.com");  
            s.setAttribute("data-locale", "en-us");  //Default: en-us. Also available: fr-ca
            s.setAttribute("data-results_in_new_tab", results_in_new_tab);
            t.parentNode.insertBefore(s, t);
        };
        window.addEventListener
            ? window.addEventListener("load", loader, false)
            : window.attachEvent("onload", loader);
    })(window, document);
</script>

The HTML



# place wherever you want the widget to appear
<div id="RootRezWidget"></div>