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>No interest<br>plans**</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>
        **0% interest payment options may be available, including "no interest if paid in full by the end of the promotional period" and "0% interest plans," contingent upon merchant plan enrollment and customer creditworthiness.
Payment plans may be available for durations of 3, 12, 18, or 24 months. See Rates & Terms for more details. 

Subject to approval based on creditworthiness. 8.99-35.99% APR. Payment due at checkout. 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. Not available in US territories. Account openings and payment activity are reported to a major credit bureau. Sunbit Now, LLC is licensed under the CT Laws Relating to Small Loans (lic. # SLC-1760582 & 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.

THIS IS A LOAN SOLICITATION ONLY. SUNBIT NOW, LLC IS NOT THE LENDER. INFORMATION RECEIVED WILL BE SHARED WITH ONE OR MORE THIRD PARTIES IN CONNECTION WITH YOUR LOAN INQUIRY. THE LENDER MAY NOT BE SUBJECT TO ALL VERMONT LENDING LAWS. THE LENDER MAY BE SUBJECT TO FEDERAL LENDING LAWS.
      </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

    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">No interest<br>plans**</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>
        **0% interest payment options may be available, including "no interest if paid in full by the end of the promotional period" and "0% interest plans," contingent upon merchant plan enrollment and customer creditworthiness.
Payment plans may be available for durations of 3, 12, 18, or 24 months. See Rates & Terms for more details. 

Subject to approval based on creditworthiness. 8.99-35.99% APR. Payment due at checkout. 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. Not available in US territories. Account openings and payment activity are reported to a major credit bureau. Sunbit Now, LLC is licensed under the CT Laws Relating to Small Loans (lic. # SLC-1760582 & 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.

THIS IS A LOAN SOLICITATION ONLY. SUNBIT NOW, LLC IS NOT THE LENDER. INFORMATION RECEIVED WILL BE SHARED WITH ONE OR MORE THIRD PARTIES IN CONNECTION WITH YOUR LOAN INQUIRY. THE LENDER MAY NOT BE SUBJECT TO ALL VERMONT LENDING LAWS. THE LENDER MAY BE SUBJECT TO FEDERAL LENDING LAWS.
      </p>
    </div>
  </footer>

</body>
</html>
    1. In the practice drop down section of the html, replace:
      • 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