Skip to main content

Widget Configuration

Feature Overview​

The Widget Configuration feature allows administrators to customize how the booking/search widget appears and behaves on the company website. Using this feature, admins can control visible sections, language, currency, search behavior, UI theme, and input fields shown to end users. This ensures the widget matches both business requirements and website branding.

System Administration → Configuration → Widget

Step-by-Step: Configure Widget​

Step 1: Access Widget Configuration​

  1. Log in to the admin dashboard
  2. Navigate to System Administration from the left sidebar
  3. Click on Configuration
  4. Select the Widget tab

Widget Configuration Tab

Step 2: Configure Basic Settings​

  1. Scroll to the Basic Configuration section
  2. Select Widget language from the dropdown menu
  3. Choose Currency code (e.g., USD, EUR, BDT)
  4. Set Trips to display per page (recommended: 15-20)
  5. Select Default date format (e.g., DD/MM/YYYY)
  6. Toggle Show all tours by default (ON/OFF)
  7. Enter Class name prefix if you need custom CSS styling
Best Practice

Set "Trips to display per page" to 15-20 for optimal user experience on both desktop and mobile.

Step 3: Set Up Redirect URLs (QA Configuration)​

  1. Scroll to the QA Configuration section
  2. Enter Search redirect URL (where users go after searching)
  3. Enter Booking redirect URL (where users go to complete booking)
  4. Enter Booking success redirect URL (where users go after successful booking)
  5. Click Save or Update button
Important

Test all redirect URLs before saving to ensure they work correctly. Broken URLs will disrupt the user journey.

Step 4: Configure Search Parameters​

  1. Scroll to the Search Parameters Configuration section
  2. Review the list of available search inputs
  3. Drag & drop to reorder inputs based on priority
  4. Toggle ON/OFF switches to show/hide specific inputs
  5. Consider which fields are most important for your users
  6. Click Save
note

Hiding search parameters can impact user search experience—review carefully before disabling inputs.

Step 5: Customize Theme Colors​

  1. Scroll to the Theme Configuration section
  2. Click on the Theme color field
  3. Use the color picker or enter hex code (e.g., #2E7D32)
  4. Repeat for all color settings:
    • Text color
    • Secondary text color
    • Background color
    • Foreground color
    • Border color
  5. Preview changes if available
  6. Click Save
Design Tip

Use a color contrast checker to ensure text remains readable with your chosen color scheme.

Step 6: Set Font Preferences​

  1. Scroll to the Font Configuration section
  2. Select Regular font family from dropdown
  3. Select Heading font family from dropdown
  4. Adjust font sizes if needed:
    • Heading font size (default: 30px)
    • Title font size (default: 20px)
    • Regular font size (default: 16px)
    • Default font size (default: 13px)
  5. Click Save
warning

Font and color changes should be tested on both desktop and mobile views before going live.

Field Descriptions​

Basic Configuration Fields​

FieldDescriptionAccepted ValuesExample
Widget languageThe default language in which the widget will be displayed to usersLanguage codesEnglish, Swedish, Bengali
Currency codeThe currency used to display prices in the widgetISO currency codesUSD, EUR, BDT, SEK
Trips to display per pageNumber of tours shown per page in widget search resultsNumber (1-100)20
Default date formatFormat used to display dates throughout the widgetDate format patternsDD/MM/YYYY, MM/DD/YYYY
Show all tours by defaultWhen enabled, displays all available tours on widget load without filtersBoolean (ON/OFF)ON
Class name prefixPrefix added to CSS classes for custom styling purposesText stringvaylo-widget-
Search redirect URLURL where users are redirected after performing a search in the widgetFull URL with protocolhttps://example.com/search-results
Booking redirect URLURL where users are sent when proceeding to book a tour from the widgetFull URL with protocolhttps://example.com/booking
Booking success redirect URLURL where users land after successfully completing a bookingFull URL with protocolhttps://example.com/booking-confirmation
URL Requirements
  • Must include protocol (https://)
  • Must be valid and accessible
  • Should point to pages on your domain
  • Test before saving

Search Parameters​

Control which search inputs appear on the widget and their order.

ParameterPurposeUser Input Type
Departure dateDate when tour beginsDate picker
Tour tagCategory or classification of tourDropdown/Multi-select
CountryDestination countryDropdown
LocationSpecific city or regionDropdown
Number of passengersHow many people are travelingNumber input
TagsAdditional tour characteristicsMulti-select
DestinationFinal destination pointDropdown
To departure dateEnd date range for departureDate picker
From departure dateStart date range for departureDate picker
CategoryTour type classificationDropdown
Passenger typesAdult, child, infant, etc.Multi-select
Pick-up locationWhere passengers will be picked upDropdown

Reordering: Drag parameters up or down to change display order
Visibility: Toggle switch to show/hide each parameter

Usage Recommendation

Essential parameters (usually shown):

  • Departure date
  • Number of passengers
  • Destination/Location

Optional parameters (show based on needs):

  • Tour tags, categories
  • Pick-up locations
  • Passenger types

Theme Configuration Fields​

Color Settings​

Color FieldWhere It's UsedRecommended Value
Theme colorPrimary buttons, links, active statesYour brand's main color
Text colorMain body text, headingsDark gray (#333333) or black
Secondary text colorSupporting text, labels, descriptionsMedium gray (#666666)
Background colorWidget main backgroundWhite (#FFFFFF) or light color
Foreground colorCards, panels, content containersOff-white (#F5F5F5)
Border colorDividers, input borders, separatorsLight gray (#E0E0E0)

Color Format: Hex codes (e.g., #2E7D32) or RGB values

Color Best Practices
  • Maintain sufficient contrast (WCAG AA standard minimum)
  • Test colors in both light and dark environments
  • Ensure brand consistency
  • Consider color blindness accessibility

Font Configuration Fields​

Font Families​

FieldDescriptionApplies ToExamples
Regular fontFont used for body text and general contentParagraphs, descriptions, labelsArial, Open Sans, Roboto
Heading fontFont used for titles and section headersH1, H2, H3 tags, titlesMontserrat, Poppins, Playfair

Font Sizes​

FieldDefault SizeWhere It's UsedRecommended Range
Heading font size30pxMain page titles, primary headings24px - 36px
Title font size20pxSection titles, card titles18px - 24px
Regular font size16pxBody text, descriptions14px - 18px
Default font size13pxLabels, small text, metadata12px - 14px
Font Size Considerations
  • Larger sizes improve readability but take more space
  • Mobile devices may need adjusted sizes
  • Test across different screen sizes
  • Keep hierarchy clear (heading > title > regular > default)

Screenshots Reference​

All screenshots should be taken from the Vaylo Admin Dashboard with realistic example data:

ScreenshotShowsSection
widget-tab.pngWidget tab location in Configuration menuNavigation
widget-basic-config.pngBasic configuration form fieldsBasic Settings
widget-qa-config.pngRedirect URL input fieldsQA Configuration
widget-search-params.pngDrag-and-drop search parameter listSearch Parameters
widget-theme-config.pngColor picker and theme settingsTheme Configuration
widget-font-config.pngFont family dropdowns and size inputsFont Configuration

Next Steps​

Now that you've configured the widget settings, learn how end users interact with the widget:

→ Widget Booking Flow

This guide covers:

  • How search parameters appear to users
  • Step-by-step booking process
  • User journey from search to confirmation
  • Summary and payment flow