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

Zwevende contactkaart met gezicht New

Small bottom-right card with a real staff member photo, availability and WhatsApp and Call buttons. Appears once per session after a short pause (once the block is in view), closes with the X button or Esc and collapses to a round photo button. The choice is stored in sessionStorage (try/catch, works without it). Entry uses @starting-style and transition-behavior: allow-discrete; unsupported browsers show the card without animation.

KlachtenBehandelingenVergoedingenTeamAfspraak maken

Utrecht-West · zonder verwijzing

Rug, knie of schouder? Meestal binnen 2 werkdagen op de behandeltafel.

Zes fysiotherapeuten, waarvan twee sportfysio en een manueel therapeut. Vergoed vanuit je aanvullende verzekering.

Fysiotherapeut begeleidt een knieoefening op de behandelbank
Demo

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.
<!-- Zwevende contactkaart met gezicht · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="fyk">
  <div class="fyk__page">
    <div class="fyk__bar"><span class="fyk__logo"><svg viewBox="0 0 28 28" aria-hidden="true"><circle cx="14" cy="14" r="13" fill="#1f3b2d"/><path d="M9 20c2-6 4-9 10-11M11 8.5c1.6 0 2.8 1.2 2.8 2.8" fill="none" stroke="#e7efe4" stroke-width="2" stroke-linecap="round"/></svg>Fysio Lombok</span><span class="fyk__links"><a href="#">Klachten</a><a href="#">Behandelingen</a><a href="#">Vergoedingen</a><a href="#">Team</a></span><a class="fyk__cta" href="#">Afspraak maken</a></div>
    <div class="fyk__hero">
      <div class="fyk__txt">
        <p class="fyk__kick">Utrecht-West · zonder verwijzing</p>
        <h2 class="fyk__h">Rug, knie of schouder? Meestal binnen 2 werkdagen op de behandeltafel.</h2>
        <p class="fyk__lead">Zes fysiotherapeuten, waarvan twee sportfysio en een manueel therapeut. Vergoed vanuit je aanvullende verzekering.</p>
        <ul class="fyk__chips"><li><a href="#">Lage rugpijn</a></li><li><a href="#">Knieblessure</a></li><li><a href="#">Nek en schouder</a></li><li><a href="#">Na een operatie</a></li><li><a href="#">Hardloopblessure</a></li></ul>
      </div>
      <img class="fyk__img" src="https://neddev.com/lab-media/contactkaart-gezicht-2.webp" alt="Fysiotherapeut begeleidt een knieoefening op de behandelbank" loading="lazy">
    </div>
  </div>
  <div class="fyk__card" role="complementary" aria-label="Vraag het een fysiotherapeut" hidden>
    <button class="fyk__x" type="button" aria-label="Kaart sluiten"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5 5l10 10M15 5L5 15"/></svg></button>
    <div class="fyk__who"><img src="https://neddev.com/lab-media/contactkaart-gezicht-1.webp" alt="" width="56" height="56"><div><b>Sanne de Wit</b><span>Fysiotherapeut, 11 jaar in de praktijk</span><em class="fyk__on"><i aria-hidden="true"></i><span class="fyk__on-t">Nu bereikbaar</span></em></div></div>
    <p class="fyk__msg">Twijfel je of fysio iets voor je klacht is? App me, ik reageer meestal binnen een uur.</p>
    <div class="fyk__btns"><a class="fyk__b fyk__b--wa" href="#">WhatsApp Sanne</a><a class="fyk__b fyk__b--tel" href="tel:+31302012488">030 201 24 88</a></div>
  </div>
  <button class="fyk__mini" type="button" aria-label="Open de contactkaart van Sanne" aria-expanded="false" hidden><img src="https://neddev.com/lab-media/contactkaart-gezicht-1.webp" alt=""><i aria-hidden="true"></i></button>
  <div class="fyk__demo"><span>Demo</span><button type="button" data-fyk="reset">Wis sessie en toon opnieuw</button><span class="fyk__state" aria-live="polite"></span></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 →