Embed Code

Overview Getting Started Embed Code Widget Configuration API Reference

Minimal embed (2 lines)

Place the <div> where you want the widget to appear. Add the <script> anywhere on the page — the widget initialises itself on page load.

<div
  id="aviaframe-widget"
  data-api-url="https://YOUR-API-ENDPOINT/webhook/drct/search"
></div>
<script src="https://widget.aviaframe.com/widget/aviaframe-widget.js"></script>

Full embed with all options

<div
  id="aviaframe-widget"
  data-api-url="https://YOUR-API-ENDPOINT/webhook/drct/search"
  data-checkout-url="/booking"
  data-primary-color="#0057b8"
  data-logo-url="https://youragency.com/logo.png"
  data-title="Find your next flight"
  data-language="en"
></div>
<script src="https://widget.aviaframe.com/widget/aviaframe-widget.js"></script>

All data-* parameters

Attribute Required Default Description
data-api-url Yes — Your flight search API endpoint. Receives POST requests with search params and returns flight offers.
data-checkout-url No /booking URL to redirect to after the passenger fills in their details. The selected offer and passenger data are written to localStorage before redirect.
data-primary-color No #2563eb Hex color for buttons and selected-state accents. Must be a valid hex value, e.g. #0057b8 or #c00.
data-logo-url No — URL of your agency logo image. Displayed in the widget header next to the title. Recommended height: 28–40 px. Use an absolute URL.
data-title No ✈️ Flight Search Custom text shown as the widget heading. Supports plain text only (HTML is stripped).
data-language No en Interface language. Currently supported: en (English), ru (Russian). The airport autocomplete always supports both scripts regardless of this setting.

Reading the booking result in your page

After a passenger selects a flight and fills in their details, the widget fires a JavaScript event and redirects to data-checkout-url. You can listen to the event to handle booking in your own code instead of using a redirect:

window.addEventListener('aviaframe:continueToBooking', function(e) {
  const { offer, passenger } = e.detail;
  console.log('Offer:', offer);     // selected flight
  console.log('Passenger:', passenger); // name, passport, etc.

  // Send to your booking API:
  // fetch('/api/book', { method: 'POST', body: JSON.stringify({ offer, passenger }) });
});

The offer and passenger data are also written to localStorage under keys selectedOffer and passengerData, so they are available on the checkout page after redirect.

WordPress integration

<?php
function aviaframe_widget_shortcode() {
  $api_url = get_option('aviaframe_api_url');
  $color   = get_option('aviaframe_primary_color', '#2563eb');
  $logo    = get_option('aviaframe_logo_url');
  ob_start(); ?>
  <div id="aviaframe-widget"
    data-api-url="<?php echo esc_attr($api_url); ?>"
    data-primary-color="<?php echo esc_attr($color); ?>"
    data-logo-url="<?php echo esc_attr($logo); ?>"
  ></div>
  <script src="https://widget.aviaframe.com/widget/aviaframe-widget.js"></script>
  <?php return ob_get_clean();
}
add_shortcode('aviaframe', 'aviaframe_widget_shortcode');

Usage in post/page editor: [aviaframe]