NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Sticky mobiele belbalk New

Mobile page demo where a sticky bottom bar with Call, WhatsApp and Quote slides in after a short scroll.

Patroon · mobiele conversie

Op de telefoon scrolt niemand terug naar het nummer bovenaan.

Daarom verschijnt de belbalk zodra de bezoeker de hero voorbij is. Drie knoppen, duimbereik, altijd zichtbaar. Scroll in het toestel om het te zien.

  • Bellen opent direct de telefoon-app
  • WhatsApp met een voorgevuld bericht
  • Offerte springt naar het korte formulier
Glasservice Westland
24/7 spoedservice

Ruit kapot? Vaak dezelfde dag vervangen.

Naaldwijk, Monster, Wateringen en De Lier. Noodbeglazing binnen 2 uur.

Bel 0174 123 456

Wat we doen

Isolatieglas HR++vanaf € 89 per m²
Inbraakschadezelfde dag dicht
Kassen en serrestuinbouwglas op maat
Spiegels en douchewandeninmeten bij u thuis

Beoordeling 9,3

"Om 22:00 gebeld, om 23:15 zat er een noodplaat in. Volgende ochtend nieuw glas." Ilse, Monster

Offerte binnen 1 werkdag

Glasservice Westland · Naaldwijk

How to use it

  1. Paste the HTML where the page sections should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- Sticky mobiele belbalk · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="xmc">
  <div class="xmc__inner">
    <div class="xmc__text">
      <span class="xmc__eyebrow">Patroon · mobiele conversie</span>
      <h2 class="xmc__h">Op de telefoon scrolt niemand terug naar het nummer bovenaan.</h2>
      <p class="xmc__lead">Daarom verschijnt de belbalk zodra de bezoeker de hero voorbij is. Drie knoppen, duimbereik, altijd zichtbaar. Scroll in het toestel om het te zien.</p>
      <ul class="xmc__list"><li><b>Bellen</b> opent direct de telefoon-app</li><li><b>WhatsApp</b> met een voorgevuld bericht</li><li><b>Offerte</b> springt naar het korte formulier</li></ul>
    </div>
    <div class="xmc__device">
      <div class="xmc__phone">
        <div class="xmc__notch" aria-hidden="true"></div>
        <div class="xmc__screen" tabindex="0" aria-label="Voorbeeldpagina, scrollbaar">
          <div class="xmc__nav"><b>Glasservice Westland</b><span class="xmc__burger" aria-hidden="true"></span></div>
          <div class="xmc__hero">
            <span class="xmc__pill">24/7 spoedservice</span>
            <h3>Ruit kapot? Vaak dezelfde dag vervangen.</h3>
            <p>Naaldwijk, Monster, Wateringen en De Lier. Noodbeglazing binnen 2 uur.</p>
            <a class="xmc__heroBtn" href="#">Bel 0174 123 456</a>
          </div>
          <div class="xmc__sec"><h4>Wat we doen</h4>
            <div class="xmc__svc"><i></i><span><b>Isolatieglas HR++</b>vanaf € 89 per m²</span></div>
            <div class="xmc__svc"><i></i><span><b>Inbraakschade</b>zelfde dag dicht</span></div>
            <div class="xmc__svc"><i></i><span><b>Kassen en serres</b>tuinbouwglas op maat</span></div>
            <div class="xmc__svc"><i></i><span><b>Spiegels en douchewanden</b>inmeten bij u thuis</span></div>
          </div>
          <div class="xmc__sec xmc__sec--alt"><h4>Beoordeling 9,3</h4><p>"Om 22:00 gebeld, om 23:15 zat er een noodplaat in. Volgende ochtend nieuw glas." <small>Ilse, Monster</small></p></div>
          <div class="xmc__sec"><h4>Offerte binnen 1 werkdag</h4><div class="xmc__fake"></div><div class="xmc__fake"></div><div class="xmc__fake xmc__fake--btn"></div></div>
          <div class="xmc__foot">Glasservice Westland · Naaldwijk</div>
        </div>
        <div class="xmc__bar" aria-hidden="true">
          <a href="#" class="xmc__b" tabindex="-1"><svg viewBox="0 0 24 24"><path d="M6.6 3.5l2.6 3.2-1.6 2.6a12 12 0 0 0 7.1 7.1l2.6-1.6 3.2 2.6-1.2 3c-8.5.4-15.6-6.7-15.2-15.2z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>Bellen</a>
          <a href="#" class="xmc__b" tabindex="-1"><svg viewBox="0 0 24 24"><path d="M4 20l1.3-4A8 8 0 1 1 8.4 19z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9 9.5c.3 2.4 2.4 4.6 5 5l1-1.3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>WhatsApp</a>
          <a href="#" class="xmc__b xmc__b--main" tabindex="-1">Offerte</a>
        </div>
        <span class="xmc__hint" aria-hidden="true">scroll</span>
      </div>
    </div>
  </div>
</div>
</div>

More page sections

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →