Costa Oil Widget Embed Codes
← Back to Home

Add the Quote Widget to Your Site

Copy the code below to embed the oil change quote tool anywhere — your website, landing page, or WordPress site.

$

Customize Your Pricing

Set the prices for your location. All embed codes below update automatically.

$
Default: $50.00
$
Default: $10.00
$
Default: $4.00
$
Default: $10.00
$
Default: $15.00
All defaults

These prices are passed via the embed URL so each franchise location can set their own. The widget will show quotes based on your custom pricing.

Live Preview

1

Iframe Embed (Recommended)

Works on any website. Just paste this one line of HTML where you want the widget to appear.

HTML

        
      

      

        Tips: Adjust height="900" if needed. The widget is responsive and works on desktop and mobile.
      

    


    
    

      

        2
        

          
Responsive Embed with Auto-Resize

          
Uses a small script to automatically resize the iframe height. Best for pages where the widget sits alongside other content.

        

      

      

        
HTML + JS

        

        
      

    


    
    

      

        3
        

          
WordPress

          
Add the widget to any WordPress page or post using the block editor or a shortcode plugin.

        

      


      
Block Editor (Gutenberg)

      
    
        
  1. Open the page or post where you want the widget.
    2. 
        
  2. Click the + button to add a new block.
    3. 
        
  3. Search for "Custom HTML" and select it.
    4. 
        
  4. Paste the iframe code below into the HTML block.
    5. 
        
  5. Click Preview to verify, then Publish.
    6. 
      

      

        
WordPress HTML Block

        

        
      


      
Classic Editor

      
    
        
  1. Switch to the Text tab (not Visual).
    2. 
        
  2. Paste the same HTML code above.
    3. 
        
  3. Switch back to Visual to confirm placement, then Publish.
    4. 
      

    


    
    

      

        4
        

          
Squarespace / Wix / Webflow

          
Most website builders support embedding custom HTML or iframes.

        

      

      

        

          
Squarespace

          
    
            
  1. Add a Code Block to your page.
    2. 
            
  2. Paste the iframe code (Option 1 above).
    3. 
            
  3. Save and publish.
    4. 
          

        

        

          
Wix

          
    
            
  1. Add an Embed / HTML element.
    2. 
            
  2. Choose "Embed a Site" and paste the embed URL:
    3. 
          

          

            
Embed URL

            

            
          

        

        

          
Webflow

          
    
            
  1. Drag an Embed element onto your page.
    2. 
            
  2. Paste the iframe code (Option 1).
    3. 
            
  3. Publish your site.
    4. 
          

        

      

    


    
    

      

        5
        

          
Direct Link

          
Share the full standalone version as a direct link — perfect for emails, social media, or QR codes.

        

      

      

        
Full Page URL

        
        
      

      

        
Embed-Only URL (for iframes)

        
        
      

    


    
    

      

        6
        

          
Tracking & Analytics

          
The widget fires events you can listen for to connect with Google Analytics, Meta Pixel, or any marketing tool.

        

      

      

        
JS — Listen for Widget Events

        
<script>
  window.addEventListener('message', function(event) {
    if (event.data && event.data.type === 'costaOilEvent') {
      var name = event.data.event;
      // name is one of:
      //   'quote_generated'  — customer saw their price estimate
      //   'lead_submitted'   — customer filled in contact form
      //   'coupon_claimed'   — customer clicked Get In-Store Offer
      //   'find_location'    — customer clicked Find Nearest Location

      // Google Analytics 4:
      // gtag('event', name, event.data.data);

      // Meta Pixel:
      // fbq('track', name === 'lead_submitted' ? 'Lead' : 'ViewContent');

      console.log('Costa Oil widget event:', name, event.data.data);
    }
  });
</script>