ITA Ripe Search Widget

How to Setup and totally re-imagined Ripe Search Widget

The Ripe Search Widget

The Ripe Search Widget is designed to make the traveler journey seamless by bringing intuitive, localized search right onto your own website or partner site. It helps visitors find the right accommodations, for the right dates, fasterβ€” driving bookings and boosting conversion rates. The search widget is the primary gateway into your booking engine, so it's essential to be setup and well positioned in the relevant locations on your site, such as the homepage and your placed to stay page.

Example on the search widget on the homepage of Stay Park City


The ITA Search Widget is a complete rebuild of our legacy widget. The settings, preferences and all enhancements going forward will only be supported in the new search widget. All clients should move this the widget for improved functionality on mobile, faster load times, extensive styling options, new default filter options and more.


Overview Video


ITA vs. Legacy Search Widget

Widget Options & FeaturesITALegacy
Setup and Configuration
Preview in editorβœ”οΈβœ”οΈ
Create affiliate specific widgetsβœ”οΈβœ”οΈ
Set default dates for affiliates and eventsβœ”οΈβœ”οΈ
Advanced - Complete CSS customization availableβœ”οΈβœ”οΈ
Allow traveler to pre-filter by property type (optional)βœ”οΈ
Allow traveler to pre-filter by area (optional)βœ”οΈ
Seamless Ripe landing page integrationβœ”οΈ
Performance and Updates
Fastest load timeβœ”οΈ
Best mobile optimizationβœ”οΈ
Duplicate existing widgets when creating new onesβœ”οΈ
Simplified website deploymentβœ”οΈ
πŸ™ŒπŸΌ Set and forget - all saved changes push to the site in real-timeβœ”οΈ
Highest accessibility rating and performanceβœ”οΈ
Design With Visual Editor
Complete control of color and styles with visual editorβœ”οΈ
Custom border designsβœ”οΈ
Custom calendar designsβœ”οΈ
Customize every available field and colorβœ”οΈ
Custom labels and CTA buttonsβœ”οΈ

How To Configure and Embed

Step 1: Access the Search Widget Builder

  • Navigate to your Ripe Account
  • Select Widget Builder from the menu

Step 2: Configure Your Widget

  • Your Account Default widget is shown be default. We suggest using this for your primary website use. You can make additional widgets next for specific affiliates, landing pages or branding.

General Settings

Affiliate Settings

  • If this widget will be embed on an affiliate website, choose that affiliate now. This will determine where the user is taken when clicking Search.

Date Settings

  • Leave blank by default and for your primary site. Again, creating a widget for a specific event or affiliate, you can pre-fill dates, which can be changed by the traveler if they choose.

Search Filters

  • Two optional filters are available to include in your widget. These simply apply a filter on the results page, and can be removed by the user once they see properties.
    • Property Type -- allows users to pre-filter only certain types of properties like homes or condos. These will populate the property types available within your account.
    • Area -- allows users to pre-filter specific areas of your city or destination. These will pull in the areas defined in your account.


Templates

  • Ripe offers a template to get started. This closely mimics the search widget found within the booking engine.

Appearance

  • Now available with our latest widget builder you get a lot of control over how your widget appears, without the need to write any code or CSS.
  • Use the many options available like container shape, input values, default colors, label changes and more to match your brand.
  • In addition, we offer the raw CSS for the widget available by clicking the Manual Styling Instructions button, if you have an agency or front-end developer available to fully customize your widget styles. Proceed with caution here, modifying you own widget code can be dangerous territory and you, as the client are responsible for the functionality once modified.

Step 3: Preview the Widget

  • Use the preview on the right to see how the widget looks and functions.
  • Check that all filters and display options match the traveler experience you want to deliver.

Step 4: Save Changes & Embed

  • Copy the auto-generated embed codes.
  • Paste them directly into your website’s HTML where you’d like the search bar to appear.
  • Save and publish to your site.
  • Once embedded on your site, all changes made and saved in the widget builder will be reflected on your site, no need to redeploy new code!
  • Once you make a style you like, save it as a widget. When creating a new widget you can start from scratch, or from an existing widget and make changes from there.

Pro Tips

  • Place the widget above the fold on landing pages to maximize engagement.
  • Use event-branded widgets for sports, festivals, or conferences to highlight local lodging tied to the experience.
  • Monitor performance in your Ripe Analytics Dashboard for data-driven optimization.