QuoteWidget
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.

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://form.daniel.bdi-kiv.dev/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 only paste the two lines above.
Configuration

Four knobs, set 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-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.
origin_url is automatic. The URL the lead was submitted from is captured from the host page for you — it is not an attribute and cannot be set by configuration.
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 quote-widget-submitted message you can hook.

        

      


      

        
Hook the submit event (optional)

        

          

            on your page
            
          


// Fired after a visitor successfully submits the form.
window.addEventListener('message', function (e) {
  if (e.data && e.data.type === 'quote-widget-submitted') {
    // e.data.id = the saved lead id
    window.location.href = '/thank-you'   // e.g. redirect, or fire analytics
  }
})

        

        
The widget already shows a “Thanks!” confirmation inside the iframe — this event is only needed if you also want to redirect or track on the host page.

      

    

  


  
  

    

      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"
  }]
}