Widget Configuration

Overview Getting Started Embed Code Widget Configuration API Reference

Branding: colors

Use data-primary-color to apply your brand color to the widget's buttons, selection highlights, and active filters. Accepts any 3- or 6-digit hex value.

<!-- Blue brand -->
<div id="aviaframe-widget" data-primary-color="#0057b8" ...></div>

<!-- Green brand -->
<div id="aviaframe-widget" data-primary-color="#16a34a" ...></div>

<!-- Compact hex -->
<div id="aviaframe-widget" data-primary-color="#c00" ...></div>

What changes: the "Search flights" button, "Select" buttons on results, active filter tabs, selected flight highlight, and airline filter active state.

What doesn't change yet: the passenger details form uses inline styles (full theme engine is on the roadmap — see Coming Soon below).

Branding: logo

Set data-logo-url to display your agency logo in the widget header, next to the title.

<div
  id="aviaframe-widget"
  data-logo-url="https://youragency.com/assets/logo.png"
  ...
></div>

Use an absolute URL (starts with https://)
Recommended height: 28–40 px, transparent background
Supported formats: PNG, SVG, WEBP
If the image fails to load, it is silently removed — the widget still works

Branding: title text

Override the default ✈️ Flight Search heading with your own text using data-title.

<div id="aviaframe-widget" data-title="Find your next flight" ...></div>
<div id="aviaframe-widget" data-title="Travel Search — MyAgency" ...></div>

Plain text only. HTML tags in the value are stripped for security.

Language

The widget UI is in English by default. Set data-language="ru" to switch all labels to Russian.

<div id="aviaframe-widget" data-language="ru" ...></div>

The airport autocomplete always supports both English and Russian input regardless of this setting — passengers can type in either script.

Supported values: en (default), ru.

Custom CSS overrides

For advanced styling, you can override widget classes in your own stylesheet. All widget elements are scoped under .aviaframe-widget:

/* Change widget max-width */
.aviaframe-widget {
  max-width: 1000px !important;
}

/* Custom button gradient */
.aviaframe-select-button {
  background: linear-gradient(135deg, #0057b8, #00a3e0) !important;
  border-radius: 8px !important;
}

/* Custom font */
.aviaframe-widget {
  font-family: 'Your Font', sans-serif !important;
}

Coming soon

These features are on the roadmap and will be available in a future release:

Full theme engine — apply your brand color to the entire widget including the passenger form, using a single data-primary-color parameter
Dark mode — data-theme="dark"
Additional languages — Arabic (ar), Turkish (tr), and more
Route restrictions — limit the widget to specific origin airports or destinations
Pre-filled search — open the widget with default origin/destination already set

To request a feature, write to sales@aviaframe.com.