Quote Widget
Get the snippet
Drop-in flight-quote widget

One form. Any website. Two lines of code.

Embed a complete flight-quote form — searchable airports, smart calendar, per-country phone validation — on any page. It lives in an isolated iframe, so nothing clashes with your site and no API keys are ever exposed.

Access is by request. The widget is enabled per domain — contact the developer to have your site approved before embedding. Pasting the snippet on a domain that hasn't been whitelisted won't load the form.
Get the snippet Embed guides
  • Isolated iframe
  • Auto-resizing
  • Mobile-ready
  • No keys exposed
  • Recolorable
live widget — try it
Quick start

Add it in two lines

Drop one <div> where the form should appear, and load the script once anywhere on the page. That's the whole integration.

index.html 
<!-- 1. Where the form should appear -->
<div data-quote-widget
     data-project="your-project"
     data-info-text="Business class — up to 70% off"
     data-color="#ff5a1f"></div>

<!-- 2. Once, anywhere on the page -->
<script src="https://flightquote.travel-insides.com/widget/quote.js" defer></script>
The form submits to our backend on the same origin as the script — your API key stays server-side and is never shipped to the browser. You paste the two lines above once your domain has been approved — contact the developer to get set up.
Configuration

Set it all on the div

Everything is configured with data-* attributes — no build step, no JavaScript. Change them, copy the snippet, paste. The preview below is live — resize it to any device.

AttributeTypeDefaultDescription
data-projectstringdefaultProject key sent with every lead, so you can route or segment leads by source.
data-info-textstring—A free-text note (the “info box”) attached to the lead — e.g. the campaign or offer the form was shown with.
data-colorhex color#ff5a1fAccent color for the buttons, focus rings and selected dates. One value recolors the whole form.
data-button-textstringGet a Free QuoteLabel for the form’s submit button. Leave it off to keep the default “Get a Free Quote”.
data-currencyISO codeUSDCurrency code sent in the lead payload’s currency field. Leave it off to default to USD.
data-session-idstringnullAn optional session id passed straight through into the lead’s sessionId — use it to tie the lead back to your own analytics or session.
data-origin-urlurlthis page’s URLThe URL recorded with the lead. Captured from the host page automatically — set this only if you want to override it.
origin_url is automatic. The URL the lead was submitted from is captured from the host page for you — no setup needed. Set data-origin-url only if you want a custom value.
your snippet 

            

          


          

            

              
              
              
              1040px
            

            
            

              

                

                  
live preview

                  
                

              

            

          

        

      

    

  


  
  

    

      Embed guides
      
Works on every platform

      
The widget is plain HTML + one script, so it drops into any site builder or framework. Here are the exact steps for the common ones.


      

        

          🟣
          
Webflow

          
    
            
  1. Drag an Embed element where you want the form.
    2. 
            
  2. Paste the <div data-quote-widget …> into it.
    3. 
            
  3. Open Project Settings → Custom Code → Footer Code and paste the <script> line.
    4. 
            
  4. Publish. The form appears and auto-resizes.
    5. 
          

          
Tip: you can also put both lines inside one Embed element.

        

        

          🔵
          
WordPress

          
    
            
  1. Edit the page and add a Custom HTML block.
    2. 
            
  2. Paste both lines (the div and the script).
    3. 
            
  3. Update / publish the page.
    4. 
          

          
Classic editor: use the Text tab, or a “Custom HTML” widget.

        

        

          ⬛
          
Squarespace

          
    
            
  1. Add a Code block where the form should sit.
    2. 
            
  2. Paste the div, then the script line.
    3. 
            
  3. Save. (Code blocks need a paid plan.)
    4. 
          

        

        

          🟢
          
Shopify

          
    
            
  1. In the theme editor add a Custom Liquid section.
    2. 
            
  2. Paste both lines into it.
    3. 
            
  3. Save and publish the theme.
    4. 
          

        

        

          ⚛️
          
React / Next.js

          
    
            
  1. Render the <div data-quote-widget …> in your component.
    2. 
            
  2. Load the script with next/script (or a useEffect).
    3. 
          

          
The loader re-scans on load, so the div just needs to exist when the script runs.

        

        

          📄
          
Plain HTML

          
    
            
  1. Paste the div where the form goes.
    2. 
            
  2. Paste the script before </body>.
    3. 
          

          
No dependencies, no build — it just works.

        

      

    

  


  
  

    

      How it works
      
Isolated, secure, self-sizing

      

        

          1
          
Renders in an iframe

          
The loader injects an iframe pointing at our /embed page. Your CSS and JS can’t leak in, and the form’s styles can’t leak out — zero conflicts.

        

        

          2
          
Posts same-origin

          
On submit the form POSTs to our backend, which validates the lead and forwards it to the real quote API server-side. The auth key never reaches the browser.

        

        

          3
          
Auto-resizes & notifies

          
The iframe measures itself and reports its height to your page, so there’s never an inner scrollbar. On success it posts a form_submitted message you can hook.

        

      


      

        
Hook the submit event (optional)

        

          

            on your page
            
          


// The widget posts analytics events to the host page.
window.addEventListener('message', function (e) {
  if (!e.data) return
  if (e.data.type === 'form_loaded') {
    // the form is ready — fire a pageview / impression if you like
  }
  if (e.data.type === 'form_submitted') {
    // e.data.id = saved lead id, e.data.partner_id = your partner tag
    window.location.href = '/thank-you'   // e.g. redirect, or fire a conversion
  }
})

        

        
On submit the widget shows a brief “Thank you” and returns to the form after a few seconds. It also posts form_submitted, so you can redirect or fire a conversion on your page if you prefer.

      

    

  


  
  

    

      The lead
      
What your backend receives

      
Every submission posts a single JSON object: the visitor’s contact details plus the structured quote request. flight legs, cabin and trip type are built from the form; project, info_text and origin_url come from the embed.

      

        

          

            POST /api/quote
            
          


{
  "contact": { "name": "", "email": "", "phone": "", "countryCode": "+1" },
  "payload": {
    "query": {
      "payload": {
        "project": "your-project",
        "cabin": "C", "adt": "1", "chd": "0", "inf": "0",
        "currency": "USD",
        "flight": [{ "origin": "DXB", "destination": "LON", "departureDate": "2026-06-27" }],
        "trip_type": "RT"
      },
      "sessionId": null
    },
    "platform": "landing",
    "origin_url": "https://your-site.com/landing",
    "info_text": "Business class — up to 70% off"
  }
}