Search Widget Advanced Configuration

You may edit your Search Widget code for deep customization.  Please feel free to contact us with questions or advice on making your customization changes.

Widget configuration attributes

  • tokeet-widget - widget type (the only valid value is "availability-search") html data-tokeet-widget="availability-search"
  • website-domain - website url (user will be navigated to that page after clicking SEARCH button)html data-website-domain=""
  • date-format - optional date format. default is "DD-MM-YYYY" (see moment.js string formats.html data-date-format="YYYY-MM-DD"

Style customization attributes

  • orientation - optional orientation. could be "vertical" (default) or "horizontal" html data-orientation="vertical"
  • style-widget-background - widget background color in css format html data-style-widget-background="#ccc"
  • style-button-bg - SEARCH button background color in css format html data-style-button-color="darkgreen"
  • style-button-color - SEARCH button text color in css format html data-style-button-color="white"
  • style-label-color - field label color in css format html data-style-label-color="rgba(255, 255, 255, .7)"
  • style-label-size - field label font size in css format html data-style-label-size="13px"
  • style-selected-dates-bg - selected dates range background color in css format html data-style-selected-dates-bg="darkred"
  • style-selected-dates-color - selected dates range text color in css format html data-style-selected-dates-color="white"

Beyond editing existing code, you can add CSS code into search widget code for infinite customization possibilities.

  • availability-widget-css - CSS code to be injected into search widget iframe 

Example:  data-availability-widget-css=".search-widget{ background: red }"

  • date-picker-css - CSS code to be injected into date picker iframe 

Example:   data-date-picker-css=".cell{ background: red }"

As always, please contact us with questions any time.  We're happy to help.

How did we do?

Powered by HelpDocs (opens in a new tab)