Integrate Steadily into your site

Four ways to offer insurance on your site, each flexible enough to stand alone or connect across your user journey as part of a fully customizable experience.

Four easy ways to integrate

Using these integrations requires partner credentials. Reach out first and we'll set up your account, API keys, and co-branded subdomain, and then the code below works as-is.

Quote modal

A button that opens the Steadily quote flow in a modal, meaning users don't need to leave your page to get coverage. Open it on click or on page load, and pre-fill anything you already know about the user so they type less.

Attribute reference

Set these on the steadily-quote-button element. Only the address is required to start a quote; everything else pre-fills the flow so your users type less.

Button and modal

data-productlandlord-insurance or renters-insurance
data-show-modal-on-load1 opens the quote flow on page load, 0 waits for a click
data-button-textText shown on the button
data-button-classCSS class applied to the button so you can style it

Lead pre-fill

data-external_record_idYour unique lead id, kept with the lead for attribution
data-primary_insured__first_name
data-primary_insured__last_name
data-primary_insured__company_name
data-primary_insured__email
data-primary_insured__phone_number
Contact details of the person seeking insurance
data-primary_insured__date_of_birthYYYY-MM-DD
data-primary_insured__mailing_address__street_address
data-primary_insured__mailing_address__street_address_2
data-primary_insured__mailing_address__city
data-primary_insured__mailing_address__state
data-primary_insured__mailing_address__zip_code
Personal mailing address; state is the 2-letter code

Property pre-fill

data-property_details__street_address
data-property_details__street_address_2
data-property_details__city
data-property_details__state
data-property_details__zip_code
Address of the dwelling to insure
data-property_details__property_typesingle_family, townhouse_or_rowhouse, duplex, triplex, quadplex, apartment_building, condominium_unit, manufactured_or_mobile_home, other
data-property_details__construction_typeframe, brick_veneer, brick_or_masonry_or_stone, concrete, other
data-property_details__renovation_statusnot_under_renovation or under_renovation
data-property_details__rental_durationshort_term or long_term (6+ months)
data-property_details__replacement_valueEstimated rebuild cost, 10000 to 50000000
data-property_details__size_sqftSquare footage, 500 and up
data-property_details__storiesNumber of stories
data-property_details__year_builtYear the dwelling was built
data-property_details__external_property_idYour unique property id, kept with the lead
yourwebsite.com
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Basic Button — Steadily</title>
  <!-- Required: Steadily JS -->
  <script src="https://demo.steadilypartner.com/partner/v3.js" async defer></script>

  <!-- Optional: Custom styles -->
  <style>
    .steadily-quote-button .quote-btn {
      font-family: sans-serif;
      border-radius: 4px;
      border: 0px;
      padding: 8px 24px;
      background-color: #6c1d72;
      color: #ffffff;
      text-decoration: none;
    }
    .steadily-quote-button .quote-btn:hover {
      cursor: pointer;
      background-color: #6c1d72;
    }
  </style>
</head>
<body>
    <div class="steadily-quote-button" data-product="landlord-insurance"
    data-show-modal-on-load="0"
    data-button-text="Get landlord insurance"
    data-button-class="quote-btn"></div>
</body>
</html>
When to open the quote flow
Quote details
#6c1d72

Estimate widget

An embedded estimate that helps users quickly understand their expected price for coverage. If you already have the property address, you can display an estimated price with no additional effort from the user.

Attribute reference

Set these on the steadily-instant-estimate element. The address is required; property details you omit are looked up automatically.

Property

data-productlandlord-insurance
data-street_address
data-street_address_2
data-city
data-state
data-postal_code
Address of the property; state is the 2-letter code
data-year_built
data-building_sqft
data-replacement_cost_estimate
data-rental_income_per_month
Property details powering the estimate; supply them for a more accurate quote or omit to use the lookup

Contact pre-fill

data-contact_first_name
data-contact_last_name
data-contact_email_address
data-contact_phone
Contact details carried into the quote flow
data-contact_street_address
data-contact_street_address_2
data-contact_city
data-contact_state
data-contact_postal_code
Contact mailing address

Variants and styling

data-coverage-breakdowntrue shows the coverage amounts behind the quoted premium
data-coverage-breakdown-layoutHow those coverage amounts are laid out: list stacks them above the premium, grid puts them in a row of metric tiles with the premium in the header
data-is-brokertrue routes the CTA to a kickoff page where a broker completes the quote on the borrower's behalf; the broker enters their own details there
data-button-textText shown on the CTA
style-primary-color
style-background-color
style-primary-text-color
style-secondary-text-color
style-border-color
style-font-family
Brand styling for the card

Click handling

Clicking the CTA opens the Steadily quote flow in a modal over your page. Before it does, the widget dispatches a cancelable steadily:click event on the button and lets it bubble, so document.addEventListener("steadily:click", handler) reaches it wherever the embed sits, and a listener on your own container catches only that container's clicks. Call event.preventDefault() in your handler to take the click over, say to show your own disclaimer first: the modal then opens only when you call continue(). These are the fields on event.detail.

estimateWhat the card is quoting: monthly_premium (a two-decimal string, as shown on the card), annual_premium, building_sqft, year_built, estimate_property_id, original_rce, calculated_rce. null on a click that lands before the estimate finishes loading
destinationUrlThe Steadily URL this CTA leads to, with everything the widget knows about the property and contact already in it, for sending the user there yourself instead
continue()Opens the quote flow the CTA would have opened; call it from your own continue button
yourwebsite.com
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Address Only Estimate Widget — Steadily</title>
  <!-- Required: Steadily JS -->
  <script src="https://demo.steadilypartner.com/partner/v3.js" async defer></script>
</head>
<body>
    <div class="steadily-instant-estimate" data-product="landlord-insurance"
        data-street_address="2212 S 101ST Dr"
        data-street_address_2=""
        data-city="Tolleson"
        data-state="AZ"
        data-postal_code="85353"></div>
</body>
</html>
Widget variant
Estimate inputs
Address only lets Steadily look up the property details; the full form has your site supply them. The difference shows in the embed code.
#6c1d72
#ffffff
#252523
#999999
#eaeff3

Landing page

Example landing page that can be inserted into your site, with the quote button built in. Use it as a ready-made insurance page for your users, and style it with your own CSS to match the rest of your site.

yourwebsite.com
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Protect Your Rental With Landlord Insurance</title>
  <!-- Required: Steadily JS -->
  <script src="https://demo.steadilypartner.com/partner/v3.js" async defer></script>

  
  <!-- Optional: Bootstrap styles -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  
  <style>
    .container { max-width: 960px; }
  </style>
</head>

<body>
  <div class="container py-5">

    <div class="row">
      <div class="col-md-7">
        <h2>
          Protect Your Rental With Landlord Insurance
        </h2>
        <p>
          We have partnered with Steadily to:
        </p>
        <ul>
          <li>Ensure you have the right coverage to protect you and your investment</li>
          <li>Save money by finding the most competitive rates</li>
          <li>Work with the best-rated landlord insurance company in America</li>
        </ul>
        <p>
          Get a quote in minutes, and see how much you can save!
        </p>

        <div class="steadily-quote-button" data-product="landlord-insurance"
    data-show-modal-on-load="0"
    data-button-text="Get landlord insurance"
    data-button-class="btn btn-lg btn-primary"></div>
      </div>
      <div class="col-md-5">
        <img class="d-none d-md-block" style="max-width: 100%; max-height:280px; width: auto;" height="542" width="710" src="https://res.cloudinary.com/steadily/image/upload/v1657167351/partner-images/rental-sign-with-car_nxvc28.png">
      </div>

    </div>

  </div>

  <div class="bg-light">
    <div class="container py-5">

      <div class="row">
        <div class="col-md-5">

          <img class="img-fluid" style="max-width: 100%; max-height:220px; width: auto;" height="642" width="457" src="https://res.cloudinary.com/steadily/image/upload/v1657167347/partner-images/two-houses_xkmtzk.png">

        </div>
        <div class="col-md-7">

          <h2>
            Who's it for?
          </h2>
          <p>

            Landlord insurance is a policy for people who rent their home to others. Landlord Insurance is not required for a landlord, but insurance can bring many benefits:
          </p>
          <ul>

            <li>Legal liabilities</li>
            <li>Fire and water damage</li>
            <li>Financial protection against natural disasters</li>
            <li>Protection for your furnishings</li>
          </ul>


        </div>

      </div>
    </div>
  </div>

  <div class="container pt-5 pb-3">

    <div class="row">
      <div class="col-md-7">

        <h2>
          Property types
        </h2>
        <p>
          Steadily make it easy to get property insurance for whatever type of property you own including AirBNBs, VRBOs, and other rentals.
        </p>
        <ul>
          <li>Single-family</li>
          <li>Multi-family</li>
          <li>Vacant or restoration</li>
          <li>Apartment buildings</li>
          <li>Condo units</li>
          <li>Manufactured</li>
        </ul>

      </div>
      <div class="col-md-5">

        <img class="img-fluid" style="max-width: 100%; max-height:280px; width: auto;" height="512" width="512" src="https://res.cloudinary.com/steadily/image/upload/v1657167348/partner-images/tree-tire-swing_d67jxj.png">

      </div>
    </div>
  </div>

  <div class="container py-3">

    <center>
      <h2 class="pb-3">Did you know?</h2>
    </center>

    <div class="row">
      <div class="col-md-6">

        <h4>
          Landlord and homeowners insurance policies are not the same
        </h4>
        <p>
          Landlord insurance is specifically for owners who rent out a property that they don't live in. A good, comprehensive policy will typically cover the value of the dwelling and improvements, along with liability protection and coverage of rental income losses.
        </p>
        <p>
          The cost of a landlord policy can be more than a homeowners insurance policy, but it offers more coverage that landlords need. Costs vary due to location, size of the rental, level of coverage, etc.
        </p>
      </div>

      <div class="col-md-6">
        <h4>
          Landlord insurance may be required
        </h4>
        <p>
          Many mortgage companies and lenders may not only require that you have a landlord insurance policy on a rental property, but that you also insure your home for 100% of its replacement cost. This is to protect your lender's investment in your home.
        </p>
        <p>
          Make sure you have the right policy. If you have a Homeowners policy instead of a Landlord policy, collecting on a claim for a tenanted rental investment property could be difficult at the time of loss.
        </p>
      </div>
    </div>
  </div>


  <div class="container pt-3 pb-5">
    <h2>
      Choose the right insurance
    </h2>
    <p>
      When working with your agent, ask questions like:
    </p>
    <ul>

      <li>Are there additional coverages I should add on given my location?</li>
      <li>Does my policy cover both short and long-term rentals? </li>
      <li>How is replacement cost calculated at the time of a claim?</li>
      <li>Are there any upgrades/repairs I can do to this property to reduce my insurance costs?</li>
      <li>What is NOT included in my landlord insurance policy?</li>


    </ul>
    <p>
      Get a quote from Steadily, and talk to an agent today!
    </p>

    <center class="pt-3">
        <div class="steadily-quote-button" data-product="landlord-insurance"
    data-show-modal-on-load="0"
    data-button-text="Get landlord insurance"
    data-button-class="btn btn-lg btn-primary"></div>
    </center>

  </div>
</body>

</html>
Adds a set of ready-made styles so your button looks polished out of the box. Turn off to set the color and shape yourself.