Marketing Kits > Auto > Website Templates

Website Templates

Below are four ways to integrate Sunbit onto your website and digital flows:

For single locations ›
Add a dedicated Sunbit page on your store’s website to introduce flexible payment options and embed your Pre-qualification page.

For groups with multiple locations ›
Add a Sunbit page to your group website that includes a dropdown dealership selector. This allows customers to choose their location and be directed to the correct Pre-qualification page.

Embed a widget to an existing webpage ›
Add the Sunbit widget directly onto a relevant page, such as your financing, payment options, or new customer info page.

Add to your appointments page ›
Add a simple question to your appointment request form and link to your Pre-qualification page.

Web – Single Location

To add your store’s custom pre-qualification page to your website, follow the directions below.

Auto Web 1

Click to view Single Location Iframe Code


<!-- ============================================ -->
<!-- SUNBIT SINGLE LOCATION IFRAME -->
<!-- UPDATE: Replace STORE_NAME_1 in the src URL with your store's Sunbit URL slug -->
<!-- Example: src="https://apply.sunbit.com/joes-auto-repair" -->
<!-- ============================================ -->

<iframe 
  style="height:1080px;width:100%" 
  src="https://apply.sunbit.com/STORE_NAME_1" 
  title="Sunbit service now, pay over time" 
  class="border-0 overflow-hidden">
</iframe>

Replace your unique pre-qualification link in the script above: src=”https://apply.sunbit.com/STORE_NAME“
Share the iframe script with your web team and ask them to create a new webpage and add a menu button titled “Service now, pay over time.”

Web – Multiple Locations

If your organization includes multiple locations, we recommend adding the below script to a group landing page with a dropdown menu for each location.

Click to view Multiple Location Landing Page Code


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Service Now, Pay Over Time | Sunbit Monthly Payment Options</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet">
  <style>
    :root { --bg: #ffffff; --primary: #6671ff; --dark: #2d2d70; --btn-bg: #6671ff; --btn-text: #fff; --max-w: 1200px; --gutter: 4rem; --hero-overlay: rgba(0,0,0,0.475); }
    * { box-sizing: border-box; margin:0; padding:0; }
    body { font-family: "Poppins", sans-serif; background: var(--bg); color: var(--dark); line-height: 1.6; }
    .container { width: 90%; max-width: var(--max-w); margin: 0 auto; }
    h1 { font-size: 3rem; }
    .hero { position: relative; background: url(https://lomcfe.stripocdn.email/content/guids/CABINET_f9a557dc053f245b7784c840f9b82fc1f0dc9c78c26d839a68f3255eb1007412/images/sunbit_stockimage_sausingtablet_QNP.png) center/cover no-repeat; padding: 6rem 0; }
    .hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--hero-overlay); z-index: 1; }
    .hero-content { position: relative; z-index: 2; color: #fff; text-align: center; }
    .hero-primary { color: #fd8720; }
    .feature-card { background: #EEF0FF; padding: 2rem; border-radius: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; }
    #cta { padding: var(--gutter) 0; text-align: center; }
    #cta select { margin-top: 1rem; padding: 0.75rem; font-size: 1rem; width: 80%; max-width: 400px; }
    #application iframe { width: 100%; min-height: 600px; border: none; }
    footer { background: #e3e8ff; padding: 2rem 0; font-size: 0.875rem; color: #555; text-align: center; }
    .hidden { display: none; }
  </style>
</head>
<body>

  <!-- ============================================ -->
  <!-- HERO SECTION -->
  <!-- ============================================ -->
  <header class="hero">
    <div class="container hero-content">
      <h1><span class="hero-primary">Service now,</span> <span class="hero-dark">pay over time.</span></h1>
      <p class="hero-tagline">3-month interest-free plans for all approved customers*</p>
    </div>
  </header>

  <!-- ============================================ -->
  <!-- STORE LOCATION DROPDOWN -->
  <!-- UPDATE: Add/remove <option> elements for each of your store locations -->
  <!-- For each location: -->
  <!--   - Replace STORE_NAME_X in the "value" URL with your Sunbit URL slug -->
  <!--   - Replace STORE_NAME_X between the tags with the display name customers will see -->
  <!-- Example: -->
  <!--   <option value="https://apply.sunbit.com/joes-auto-denver">Joe's Auto - Denver</option> -->
  <!-- ============================================ -->
  <section id="cta" class="container">
    <div id="dropdown">
      <select id="location-select">
        <option value="" disabled selected>— Select Your Store —</option>
        <option value="https://apply.sunbit.com/STORE_NAME_1">STORE_NAME_1</option>
        <option value="https://apply.sunbit.com/STORE_NAME_2">STORE_NAME_2</option>
        <option value="https://apply.sunbit.com/STORE_NAME_3">STORE_NAME_3</option>
      </select>
    </div>
  </section>

  <!-- ============================================ -->
  <!-- SUNBIT APPLICATION IFRAME (loads after selection) -->
  <!-- ============================================ -->
  <section id="application" class="container hidden">
    <iframe id="app-frame" src=""></iframe>
  </section>

  <!-- ============================================ -->
  <!-- JAVASCRIPT (handles dropdown selection) -->
  <!-- No changes needed here -->
  <!-- ============================================ -->
  <script>
    document.getElementById('location-select').addEventListener('change', (e) => {
      const url = e.target.value;
      if (!url) return;
      const appSect = document.getElementById('application');
      document.getElementById('app-frame').src = url;
      appSect.classList.remove('hidden');
      appSect.scrollIntoView({ behavior: 'smooth' });
    });
  </script>

  <!-- ============================================ -->
  <!-- FOOTER / LEGAL DISCLAIMER -->
  <!-- ============================================ -->
  <footer>
    <p>*Subject to minimum requirements related to your age, state of residence, existing/prior Sunbit-branded credit, bankruptcy filing status, and ability to confirm your identity...</p>
  </footer>

</body>
</html>

Use the code snippet above to embed a branded Sunbit experience with a dropdown selector directly into an existing page on your website.

Click to view Multi-Location Widget HTML Code


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Service now, pay over time</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Poppins', sans-serif; background: #e3e8ff; color: #1b203a; }
    .widget { display: grid; grid-template-columns: 1fr 40%; grid-template-rows: auto auto auto; gap: 24px; max-width: 1200px; margin: auto; padding: 24px; }
    .banner h1 { font-size: 2.5rem; font-weight: 600; line-height: 1.1; }
    .banner h1 .highlight { color: #6B7CFF; }
    .logos { margin-top: 16px; display: flex; align-items: center; gap: 16px; }
    .logos img { height: 48px; width: auto; }
    .features { display: grid; grid-template-columns: repeat(2, auto); gap: 32px; margin-bottom: 24px; }
    .icon { width: 72px; height: 72px; background: #e1e8fe; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
    .action button { padding: 16px 24px; font-weight: 600; background: #6B7CFF; color: #fff; border: none; border-radius: 999px; cursor: pointer; }
    .action select { position: absolute; top: 100%; left: 0; width: 100%; margin-top: 8px; padding: 12px; display: none; }
    .dynamic-iframe-container iframe { width: 100%; height: 600px; border: none; border-radius: 8px; }
    .dynamic-iframe-container { display: none; }
    @media (max-width: 800px) { .widget { grid-template-columns: 1fr; } }
  </style>
</head>
<body>

  <div class="widget">

    <!-- ============================================ -->
    <!-- BANNER SECTION -->
    <!-- ============================================ -->
    <div class="banner">
      <h1><span class="highlight">Service now,</span> pay over time.</h1>
      <p>3-month interest-free plans for all approved customers*</p>
    </div>

    <div class="left-content">

      <!-- ============================================ -->
      <!-- FEATURE ICONS -->
      <!-- ============================================ -->
      <div class="features">
        <div class="feature-item">
          <div class="icon">
            <img src="https://lomcfe.stripocdn.email/content/guids/CABINET_ab805e03adb2c4f735a7bda85178fffb304986be0eddc50d97d5be798837e14f/images/finger_snap.png">
          </div>
          <div class="label">No hard<br>credit check**</div>
        </div>
        <div class="feature-item">
          <div class="icon">
            <img src="https://lomcfe.stripocdn.email/content/guids/CABINET_f9a557dc053f245b7784c840f9b82fc1f0dc9c78c26d839a68f3255eb1007412/images/car_fix.png">
          </div>
          <div class="label">Approvals from<br>$400 to $10,000*</div>
        </div>
      </div>

      <!-- ============================================ -->
      <!-- STORE LOCATION DROPDOWN -->
      <!-- UPDATE: Add/remove <option> elements for each of your store locations -->
      <!-- For each location: -->
      <!--   - Replace STORE_NAME_X in the "value" URL with your Sunbit URL slug -->
      <!--   - Replace STORE_NAME_X between the tags with the display name customers will see -->
      <!-- Example: -->
      <!--   <option value="https://apply.sunbit.com/joes-auto-denver">Joe's Auto - Denver</option> -->
      <!-- To add more locations: Copy an <option> line and update both the URL and display name -->
      <!-- To remove locations: Delete the entire <option> line for that store -->
      <!-- ============================================ -->
      <div class="action">
        <button id="selectBtn">Select your location</button>
        <select id="selectMenu">
          <option value="" disabled selected>-- Select your store --</option>
          <option value="https://apply.sunbit.com/STORE_NAME_1">STORE_NAME_1</option>
          <option value="https://apply.sunbit.com/STORE_NAME_2">STORE_NAME_2</option>
        </select>
      </div>

    </div>

    <!-- ============================================ -->
    <!-- SUNBIT APPLICATION IFRAME (loads after selection) -->
    <!-- No changes needed here -->
    <!-- ============================================ -->
    <div class="dynamic-iframe-container">
      <iframe id="contentFrame"></iframe>
    </div>

  </div>

  <!-- ============================================ -->
  <!-- JAVASCRIPT (handles dropdown selection) -->
  <!-- No changes needed here -->
  <!-- ============================================ -->
  <script>
    const btn = document.getElementById('selectBtn');
    const menu = document.getElementById('selectMenu');
    const dyn = document.querySelector('.dynamic-iframe-container');
    const frame = document.getElementById('contentFrame');
    btn.addEventListener('click', () => { menu.style.display = menu.style.display === 'block' ? 'none' : 'block'; });
    menu.addEventListener('change', e => { frame.src = e.target.value; dyn.style.display = 'block'; menu.style.display = 'none'; });
  </script>

</body>
</html>

Appointments Page

On the appointments form, add a question that asks:

‘Would you like to see what monthly payment options are available to you?”