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.

Did this answer your question?