Customer Log In Merchant Log In Find Sunbit near you
Merchant Log In Customer Log In Request a demo
    Home | Marketing Kits
    Marketing Kits > Dental > Website Templates
    < Back to Dental

    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 office’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 practice selector. This allows patients 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 patient 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 Practice

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

    Dental Website 1

    Click to view Single Practice Iframe Code 
    
<!-- ============================================ -->
<!-- SUNBIT SINGLE PRACTICE IFRAME -->
<!-- UPDATE: Replace STORE_NAME_1 in the src URL with your practice's Sunbit URL slug -->
<!-- Example: src="https://apply.sunbit.com/bright-smiles-dental" -->
<!-- ============================================ -->

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

     

    1. Replace your unique pre-qualification link in the script above: src=”https://apply.sunbit.com/STORE_NAME“
    2. Share the iframe script with your web team and ask them to:
      • Create a new webpage and insert this script.
      • Add a button on the home page menu called ‘Smile now, pay over time’ that links to a new page.
      • Add attached digital banners from the media library

    Web – Multiple Practice

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

    Dental Website 2

    Click to view Multi-Practice Landing Page HTML Code 
    
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Smile Now, Pay Over Time | Sunbit Financing</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #e3e8ff;
      --primary: #ff9e4e;
      --dark: #2d2d70;
      --hero-overlay: rgba(0,0,0,0.4);
      --max-w: 1200px;
      --gutter: 4rem;
      /* default icon size—adjust this value as needed */
      --feature-icon-size: 50%
    }
    * { 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, h2, h3 { font-weight: 600; }
    h1 { font-size: 3rem; }
    h2 { font-size: 2rem; margin-bottom: 1rem; }
    .hidden { display: none; }

    /* HERO */
    .hero { position: relative; background: url('https://lomcfe.stripocdn.email/content/guids/CABINET_63ecf041e1bd56bc315c0b1a84b84f05749b77a1c1f00a7888f2940b49b083aa/images/sunbitbanner_dental_webpage_p6i.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; text-align: center; color: #fff; }
    .hero-primary { color: var(--primary); }
    .hero-dark { color: #fff; }
    .hero-tagline { font-size: 1.5rem; margin-top: 1rem; }

    /* LOGO STRIP (underneath hero) */
    .logo-strip { padding: 2rem 0; text-align: center; }
    .logo-strip .logo-bar { display: inline-flex; align-items: center; gap: 2rem; background: rgba(255,255,255,0.85); padding: 0.5rem 1rem; border-radius: 8px; }
    .logo-strip .logo-bar img { max-height: 50px; }
    .logo-strip .logo-sep { width:1px; height:50px; background: #ccc; }

    /* BENEFITS */
    #benefits { background: #e1e8fe; padding: var(--gutter) 0; text-align: center; }
    .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 2.5rem; margin-top: 2.5rem; }
    .feature-card { background: #EEF0FF; padding: 2rem; border-radius: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; }
    .feature-icon { width: var(--feature-icon-size); height: var(--feature-icon-size); margin-bottom: 1rem; object-fit: contain; }
    .feature-card h3 { margin: 0 0 0.5rem; font-size: 1.125rem; color: var(--dark); }
    .feature-card p { margin: 0; font-size: 0.9375rem; line-height: 1.4; color: #555; }

    /* CTA (dropdown only) */
    #cta { padding: var(--gutter) 0; text-align: center; }
    #cta select { padding: 0.75rem; font-size: 1rem; width: 80%; max-width: 400px; border: 1px solid #ccc; border-radius: 6px; }

    /* APPLICATION IFRAME */
    #application { padding: var(--gutter) 0; }
    #application iframe { width: 100%; min-height: 600px; border: none; }

    /* FOOTER */
    footer { background: #f5f6fa; padding: 2rem 0; font-size: 0.875rem; color: #555; text-align: center; }

    @media (max-width:768px) {
      h1 { font-size: 2.25rem; }
      .hero-tagline { font-size: 1.25rem; }
    }
  </style>
</head>
<body>

  <!-- ============================================ -->
  <!-- HERO SECTION -->
  <!-- ============================================ -->
  <header class="hero">
    <div class="container hero-content">
      <h1>
        <span class="hero-primary">Smile now,</span>
        <span class="hero-dark">pay over time.</span>
      </h1>
      <p class="hero-tagline">The plan patients come back for.</p>
    </div>
  </header>

  <!-- ============================================ -->
  <!-- LOGO STRIP -->
  <!-- ============================================ -->
  <div class="logo-strip container">
    <div class="logo-bar">
      <img src="https://lomcfe.stripocdn.email/content/guids/CABINET_63ecf041e1bd56bc315c0b1a84b84f05749b77a1c1f00a7888f2940b49b083aa/images/sunbit_logo_rgb.png" alt="Sunbit Logo">
      <div class="logo-sep"></div>
      <img src="https://lomcfe.stripocdn.email/content/guids/CABINET_63ecf041e1bd56bc315c0b1a84b84f05749b77a1c1f00a7888f2940b49b083aa/images/logo_image_copy.png" alt="Partner Logo 2">
    </div>
  </div>

  <!-- ============================================ -->
  <!-- BENEFITS SECTION -->
  <!-- ============================================ -->
  <section id="benefits" class="container">
    <h2>The most effective patient financing solution</h2>
    <div class="features">
      <div class="feature-card">
        <img src="https://lomcfe.stripocdn.email/content/guids/CABINET_ab805e03adb2c4f735a7bda85178fffb304986be0eddc50d97d5be798837e14f/images/rocket.png" alt="" class="feature-icon">
        <h3>Fast &amp; friendly<br>application</h3>
      </div>
      <div class="feature-card">
        <img src="https://lomcfe.stripocdn.email/content/guids/CABINET_ab805e03adb2c4f735a7bda85178fffb304986be0eddc50d97d5be798837e14f/images/no_fee.png" alt="" class="feature-icon">
        <h3>No fees or<br>"gotchas"</h3>
      </div>
      <div class="feature-card">
        <img src="https://lomcfe.stripocdn.email/content/guids/CABINET_ab805e03adb2c4f735a7bda85178fffb304986be0eddc50d97d5be798837e14f/images/finger_snap.png" alt="" class="feature-icon">
        <h3>No hard credit<br>check*</h3>
      </div>
      <div class="feature-card">
        <img src="https://lomcfe.stripocdn.email/content/guids/CABINET_ab805e03adb2c4f735a7bda85178fffb304986be0eddc50d97d5be798837e14f/images/piggy_bank.png" alt="" class="feature-icon">
        <h3>Interest-free<br>options**</h3>
      </div>
    </div>
  </section>

  <!-- ============================================ -->
  <!-- PRACTICE LOCATION DROPDOWN -->
  <!-- UPDATE: Add/remove <option> elements for each of your practice 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 patients will see -->
  <!-- Example: -->
  <!--   <option value="https://apply.sunbit.com/bright-smiles-downtown">Bright Smiles - Downtown</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 practice -->
  <!-- ============================================ -->
  <section id="cta" class="container">
    <select id="practice-select">
      <option value="" disabled selected>— Select Your Practice —</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>
      <option value="https://apply.sunbit.com/STORE_NAME_4">STORE_NAME_4</option>
      <option value="https://apply.sunbit.com/STORE_NAME_5">STORE_NAME_5</option>
      <option value="https://apply.sunbit.com/STORE_NAME_6">STORE_NAME_6</option>
      <option value="https://apply.sunbit.com/STORE_NAME_7">STORE_NAME_7</option>
      <option value="https://apply.sunbit.com/STORE_NAME_8">STORE_NAME_8</option>
      <option value="https://apply.sunbit.com/STORE_NAME_9">STORE_NAME_9</option>
      <option value="https://apply.sunbit.com/STORE_NAME_10">STORE_NAME_10</option>
    </select>
  </section>

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

  <!-- ============================================ -->
  <!-- JAVASCRIPT (handles dropdown selection) -->
  <!-- No changes needed here -->
  <!-- ============================================ -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const select = document.getElementById('practice-select');
      const iframeSection = document.getElementById('application');
      const iframe = document.getElementById('app-frame');
      select.addEventListener('change', function() {
        const selectedUrl = this.value;
        if (selectedUrl) {
          iframe.src = selectedUrl;
          iframeSection.classList.remove('hidden');
        }
      });
    });
  </script>

  <!-- ============================================ -->
  <!-- FOOTER / LEGAL DISCLAIMER -->
  <!-- ============================================ -->
  <footer>
    <div style="text-align: left; padding: 1rem;">
      *All account openings and payment performance are reported to a major credit bureau.
      <p>
        **Based on merchant participation and creditworthiness, customers may avoid paying interest on a 3- or 12-month payment plan by fully paying off their financed amount within the designated promotional period and/or, some merchants may offer plans with 0% interest, as well as other payment plans that may include interest.
      </p>
      <p>
        0-35.99% APR. Payment due at checkout. Not available in VT, WV, or US territories. Example: A $1,178.00 purchase with 24.99% APR, $199.55 down payment and a 18-month term would have monthly payments of $65.74 and a total cost of $1,382.84. Actual terms may vary. Sunbit Now, LLC is licensed under the CT Laws Relating to Small Loans (lic. # SLC-1760582 &amp; SLC-BCH-1844702); NMLS ID 1760582. Loans are made by Transportation Alliance Bank Inc. dba TAB Bank, which determines qualifications for and terms of credit.
      </p>
    </div>
  </footer>

</body>
</html>


    1. Create a new webpage in your website’s HTML-friendly CMS or editor.
    2. Paste the iframe script into the body of that page.
    3. Paste the code into any HTML-friendly CMS or editor.
    4. Replace all placeholder text in the PRACTICE LOCATION DROPDOWN section of the code:
      • src=”https://apply.sunbit.com/STORE_NAME_1″ with each store’s unique Pre-qualification Link.
      • STORE_NAME_1 with the display name for each practice.
      • Add as many stores as needed – there’s no limit.
    5. Add a navigation button to your homepage menu titled: “Smile now, pay over time” – and link it to the new landing page.
    6. Upload and display digital banners (provided in the media library) to promote the program and increase visibility.

    Web – Multi-Practice Widget

    If your organization includes multiple locations, use the code snippet below to embed a branded Sunbit experience with a dropdown selector directly into an existing page on your website.

    Dental Website 3

    Sunbit multi practice widget code section · HTML
    Copy

    Click to view Multi-Practice Widget HTML Code 
    
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Smile 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 { grid-column: 1; grid-row: 1; }
    .left-content { grid-column: 1; grid-row: 2; }
    .static-image-container{ grid-column: 2; grid-row: 1 / span 2; align-self: start; }
    .dynamic-iframe-container { grid-column: 1 / -1; grid-row: 3; }
    .banner h1 { font-size: 2.5rem; font-weight: 600; line-height: 1.1; }
    .banner h1 .highlight { color: #6B7CFF; }
    .banner p { margin-top: 8px; font-size: 1.25rem; font-weight: 500; }
    .logos { margin-top: 16px; display: flex; align-items: center; gap: 16px; }
    .logos img { height: 48px; width: auto; }
    .logos .divider { width: 1px; height: 48px; background: #1b203a; }
    .features { display: grid; grid-template-columns: repeat(2, auto); gap: 32px; margin-bottom: 24px; }
    .feature-item { display: flex; align-items: center; gap: 8px; }
    .icon { width: 72px; height: 72px; background: #e1e8fe; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .icon img { width: 100%; height: 100%; object-fit: contain; }
    .label { font-size: 1rem; font-weight: 500; }
    .action { position: relative; margin-bottom: 24px; }
    .action button { font-family: 'Poppins', sans-serif; padding: 16px 24px; font-size: 1rem; 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; font-size: 1rem; display: none; }
    .static-image-container img { width: 70%; border-radius: 8px; aspect-ratio: 1/1; object-fit: cover; display: block; margin-top: 32px; }
    .dynamic-iframe-container iframe { width: 100%; height: 600px; border: none; border-radius: 8px; display: block; }
    .dynamic-iframe-container { display: none; }
    footer { padding: 2rem 0; font-size: 0.875rem; color: #555; text-align: center; }
    @media (max-width: 800px) {
      .widget { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; }
      .static-image-container { grid-column: 1; grid-row: 3; width: 100%; }
      .dynamic-iframe-container { grid-column: 1; grid-row: 4; }
    }
  </style>
</head>
<body>

  <div class="widget">

    <!-- ============================================ -->
    <!-- BANNER SECTION -->
    <!-- ============================================ -->
    <div class="banner">
      <h1><span class="highlight">Smile now,</span> pay over time.</h1>
      <p>The plan patients come back for.</p>
      <div class="logos">
        <img src="https://lomcfe.stripocdn.email/content/guids/CABINET_63ecf041e1bd56bc315c0b1a84b84f05749b77a1c1f00a7888f2940b49b083aa/images/sunbit_logo_rgb.png" alt="Sunbit Logo">
        <div class="divider"></div>
        <img src="https://lomcfe.stripocdn.email/content/guids/CABINET_63ecf041e1bd56bc315c0b1a84b84f05749b77a1c1f00a7888f2940b49b083aa/images/logo_image_copy.png" alt="Partner Logo 2">
      </div>
    </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/rocket.png" alt="Fast &amp; friendly Application">
          </div>
          <div class="label">Fast &amp; friendly<br>application</div>
        </div>
        <div class="feature-item">
          <div class="icon">
            <img src="https://lomcfe.stripocdn.email/content/guids/CABINET_ab805e03adb2c4f735a7bda85178fffb304986be0eddc50d97d5be798837e14f/images/no_fee.png" alt="No Fees" class="NoFees">
          </div>
          <div class="label">No fees or<br>"gotchas"</div>
        </div>
        <div class="feature-item">
          <div class="icon">
            <img src="https://lomcfe.stripocdn.email/content/guids/CABINET_ab805e03adb2c4f735a7bda85178fffb304986be0eddc50d97d5be798837e14f/images/finger_snap.png" alt="No Hard Credit Check" class="NoHardCreditCheck">
          </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_ab805e03adb2c4f735a7bda85178fffb304986be0eddc50d97d5be798837e14f/images/piggy_bank.png" alt="Interest Free Options" class="InterestFreeOptions">
          </div>
          <div class="label">Interest-free<br>options**</div>
        </div>
      </div>

      <!-- ============================================ -->
      <!-- PRACTICE LOCATION DROPDOWN -->
      <!-- UPDATE: Add/remove <option> elements for each of your practice 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 patients will see -->
      <!-- Example: -->
      <!--   <option value="https://apply.sunbit.com/bright-smiles-downtown">Bright Smiles - Downtown</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 practice -->
      <!-- ============================================ -->
      <div class="action">
        <button id="selectBtn">Select your practice</button>
        <select id="selectMenu">
          <option value="" disabled selected>-- Select your location --</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>
          <option value="https://apply.sunbit.com/STORE_NAME_4">STORE_NAME_4</option>
          <option value="https://apply.sunbit.com/STORE_NAME_5">STORE_NAME_5</option>
          <option value="https://apply.sunbit.com/STORE_NAME_6">STORE_NAME_6</option>
          <option value="https://apply.sunbit.com/STORE_NAME_7">STORE_NAME_7</option>
          <option value="https://apply.sunbit.com/STORE_NAME_8">STORE_NAME_8</option>
          <option value="https://apply.sunbit.com/STORE_NAME_9">STORE_NAME_9</option>
          <option value="https://apply.sunbit.com/STORE_NAME_10">STORE_NAME_10</option>
        </select>
      </div>

    </div>

    <!-- ============================================ -->
    <!-- STATIC IMAGE -->
    <!-- ============================================ -->
    <div class="static-image-container">
      <img src="https://lomcfe.stripocdn.email/content/guids/CABINET_63ecf041e1bd56bc315c0b1a84b84f05749b77a1c1f00a7888f2940b49b083aa/images/dental_takeover_87approval.png" alt="Feature Image">
    </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 => {
      const url = e.target.value;
      if (!url) return;
      frame.src = url;
      dyn.style.display = 'block';
      menu.style.display = 'none';
    });
  </script>

  <!-- ============================================ -->
  <!-- FOOTER / LEGAL DISCLAIMER -->
  <!-- ============================================ -->
  <footer>
    <div style="text-align: left; padding: 1rem;">
      *All account openings and payment performance are reported to a major credit bureau.
      <p>
        **Based on merchant participation and creditworthiness, customers may avoid paying interest on a 3- or 12-month payment plan by fully paying off their financed amount within the designated promotional period and/or, some merchants may offer plans with 0% interest, as well as other payment plans that may include interest. 0-35.99% APR. Payment due at checkout. Not available in VT, WV, or US territories. Example: A $1,178.00 purchase with 24.99% APR, $199.55 down payment and a 18-month term would have monthly payments of $65.74 and a total cost of $1,382.84. Actual terms may vary. Sunbit Now, LLC is licensed under the CT Laws Relating to Small Loans (lic. # SLC-1760582 &amp; SLC-BCH-1844702); NMLS ID 1760582. Loans are made by Transportation Alliance Bank Inc. dba TAB Bank, which determines qualifications for and terms of credit.
      </p>
    </div>
  </footer>

</body>
</html>
    1. In the practice drop down section of the html, replade:
      • src=”https://apply.sunbit.com/STORE_NAME_1″ with each store’s unique Pre-qualification Link.
      • STORE_NAME_1 with the display name for each practice.
      • Add as many stores as needed – there’s no limit.
    2. Paste the entire HTML snippet into the appropriate section of your existing webpage.

     

    Appointments Page

    On the appointments form, add a question that asks:
    ‘Would you like to see what monthly payment options are available to you?”

    Dental Website 4