Webknecht
← Terug naar Integraties

Custom code toevoegen in OnePage: van Google Reviews tot Calendly widgets

• 10 min leestijd
Custom code toevoegen in OnePage: van Google Reviews tot Calendly widgets

Custom code toevoegen in OnePage: van Google Reviews tot Calendly widgets

Je OnePage site ziet er goed uit, maar je wilt een Calendly widget toevoegen. Of een Google Reviews slider. Of een webinar opt-in formulier. Geen standaard blokje voor, maar gelukkig: OnePage heeft een Custom Code element.

Hier is hoe je custom HTML, CSS en JavaScript toevoegt aan je site zonder dat het misgaat.

Wat kun je allemaal embedden?

Met het Custom Code element voeg je vrijwel elke externe tool toe:

  • Booking widgets (Calendly, Acuity, Salonized)
  • Formulieren (Typeform, Google Forms, Tally)
  • Reviews (Google Reviews, Trustpilot, Kiyoh)
  • Video’s (YouTube, Vimeo, Loom)
  • Social media feeds (Instagram, Twitter/X)
  • Webinar opt-ins (Zoom, WebinarJam)
  • Chat widgets (Intercom, Drift, Crisp)
  • Calculators en tools (hypotheekcalculator, offertetools)

Eigenlijk alles waar een third-party provider een embed code voor geeft.

HTML, CSS en JavaScript: wat is wat?

OnePage heeft drie kolommen in het Custom Code element. Het is cruciaal dat je code in de juiste kolom zet.

HTML = De inhoud
Dit is de structuur. Denk aan tekst, formulieren, iframes, afbeeldingen. Als je een embed code van een externe tool krijgt (zoals <iframe src="...">) dan hoort die hier.

CSS = De styling
Hiermee pas je kleuren, lettertypen, spacing en layout aan. Als je code tussen <style> tags staat, plak je alleen de inhoud (zonder die <style> tags) in de CSS kolom.

JavaScript = De interactiviteit
Dit maakt dingen dynamisch: knoppen die iets laten gebeuren, animaties, tracking scripts. Code tussen <script> tags? Alleen de inhoud (zonder <script> tags) in de JS kolom.

Vuistregel:
Krijg je één blok code van een provider? Plak het in de HTML kolom. Staat er <style> of <script> in? Dan moet je het splitsen over de juiste kolommen.

Custom code toevoegen: stap voor stap

Stap 1: Hover over de sectie

Ga naar de pagina waar je de code wilt toevoegen. Beweeg je muis over de sectie. Je ziet een grijs paneel verschijnen met iconen.

Klik op het tweede ‘hamburger’ icoon (drie horizontale lijntjes).

Stap 2: Element toevoegen

Klik op "Element toevoegen" onderaan het menu.

Zoek naar "Custom Code" en klik erop.

Er verschijnt nu een nieuw Custom Code blok in je sectie.

Stap 3: Code invoegen

Klik op het Custom Code element dat je net hebt toegevoegd.

Je ziet drie kolommen: HTML, CSS en JS.

Plak je code in de juiste kolom:

  • Embed code (zoals een iframe)? → HTML
  • Styling code (kleuren, layout)? → CSS
  • Script code (tracking, animaties)? → JS

Klik op Opslaan en check hoe het eruitziet in de preview.

Voorbeelden: veelgebruikte embeddings

Voorbeeld 1: Calendly booking widget

Calendly geeft je een embed code zoals deze:

<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/jouwbedrijf" style="min-width:320px;height:700px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->

Hoe invoegen:

  1. Kopieer de volledige code
  2. Plak in de HTML kolom
  3. Klaar

De <script> tag mag hier gewoon bij blijven, dat lost OnePage automatisch op.

Voorbeeld 2: Google Reviews slider

Je hebt een reviews widget gegenereerd via een tool zoals EmbedSocial. De code ziet er zo uit:

<div id="reviews-widget"></div>
<script src="https://example.com/widget.js"></script>

Hoe invoegen:

  1. Plak het <div> element in HTML
  2. Plak de <script> (zonder de <script> tags zelf) in JS

Of gewoon alles in HTML – meestal werkt dat ook prima.

Voorbeeld 3: Custom CSS voor styling

Je wilt een formulier mooier maken met eigen kleuren. Je hebt deze CSS:

.form-container {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
}

Hoe invoegen:

  1. HTML kolom: je formulier code
  2. CSS kolom: alleen de CSS (zonder <style> tags)

Nu past de styling perfect bij je branding.

Veelgemaakte fouten (en hoe je ze voorkomt)

Fout 1: Code in de verkeerde kolom

Je plakt een <iframe> in de CSS kolom. Resultaat: niks werkt.

Oplossing: Iframe? Altijd HTML. Style aanpassingen? CSS. Scripts? JS.

Fout 2: Incomplete code

Je kopieert de code, maar de laatste regel mist. Of je vergeet een sluitende </div> tag.

Oplossing: Kopieer altijd de volledige code. Check dat er geen rare line breaks in zitten.

Fout 3: Website niet publiek toegankelijk

Sommige tools (zoals Typeform) checken of je site live is. Tijdens development werkt de embed dan niet.

Oplossing: Publiceer je pagina eerst, test dan de embed.

Fout 4: Cache issues

Je hebt de code toegevoegd, maar ziet niks. In incognito mode werkt het wel.

Oplossing: Clear je browser cache of test in incognito/private mode.

Fout 5: Conflicterende scripts

Je voegt een script toe en opeens werkt je hele editor niet meer.

Oplossing: Verwijder de code. Check of het script conflicteert met OnePage. Neem contact op met support als je er niet uitkomt.

Custom code op project- of page-level

Wil je code op elke pagina? Bijvoorbeeld Google Analytics of een chat widget?

Gebruik dan niet het Custom Code element in een sectie, maar voeg het toe op project- of page-level:

  1. Ga naar Instellingen > SEO & Scripts
  2. Plak je code in Header Scripts (bovenkant) of Footer Scripts (onderkant)
  3. Opslaan

Nu staat de code op alle paginas zonder dat je het 10x moet kopiëren.

Wanneer header vs footer?

  • Header: Tracking codes (Analytics, Facebook Pixel) die vroeg moeten laden
  • Footer: Zwaardere scripts (chat widgets, animaties) die de snelheid niet mogen vertragen

Responsive: ziet het er goed uit op mobiel?

Custom code is niet automatisch responsive. Een iframe van 1200px breed? Dat breekt je mobiele layout.

Tips voor mobiel-vriendelijke embeds:

  1. Gebruik max-width in plaats van width:

    iframe {
max-width: 100%;
height: auto;
}

  2. Test altijd op mobiel via de OnePage preview

  3. Gebruik media queries voor verschillende schermgroottes:

    @media (max-width: 768px) {
.custom-widget {
padding: 10px;
font-size: 14px;
}
}

Veiligheid: wat je NIET moet doen

Custom code kan je site breken of onveilig maken. Hier is wat je moet vermijden:

❌ Code van onbetrouwbare bronnen kopiëren
❌ Scripts toevoegen die je niet begrijpt
❌ Tracking codes van shady third-party tools
❌ Code die bezoekers naar malware-sites redirect

✅ Gebruik alleen code van bekende, betrouwbare tools
✅ Check de bron voordat je iets plakt
✅ Test altijd in een draft/preview voor je live gaat

Troubleshooting: het werkt niet, en nu?

Probleem: De embed verschijnt niet

Checklist:

  1. Staat de code in de juiste kolom? (HTML voor iframes)
  2. Is de code compleet? Geen missing tags?
  3. Is je site publiek? Sommige tools vereisen dat
  4. Browser cache cleared? Test in incognito
  5. Staat er een AdBlocker aan die het blokkeert?

Probleem: De editor werkt niet meer na code toevoegen

Dit betekent dat je JavaScript conflicteert met OnePage.

Oplossing:

  1. Verwijder de code direct
  2. Als je de editor niet meer kunt openen: neem contact op met support
  3. Test de code eerst in een testpagina

Probleem: De embed is zichtbaar maar ziet er broken uit

Styling issue. Voeg custom CSS toe om het te fixen:

iframe {
  border: none;
  width: 100%;
  min-height: 500px;
}

Custom code voorbeelden die altijd werken

Trustpilot reviews widget

<div class="trustpilot-widget" data-locale="nl-NL" data-template-id="123456" data-businessunit-id="jouw-id"></div>
<script src="https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>

YouTube video (responsive)

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>

Google Maps embed

<iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Conclusie: custom code = unlimited possibilities

Het Custom Code element opent deuren naar honderden tools en integraties. Van booking widgets tot reviews en calculators – als er een embed code voor is, kun je het toevoegen.

Volg deze stappen:

  1. Kopieer de volledige code van je tool
  2. Voeg Custom Code element toe aan je sectie
  3. Plak in de juiste kolom (meestal HTML)
  4. Test op desktop én mobiel
  5. Publiceer

En onthoud: als het misgaat, verwijder de code en probeer opnieuw. Custom code is trial & error – zelfs voor developers.

Categorie: Integraties
Geen code nodig

Klaar om te beginnen met OnePage?

Bouw je eigen professionele website zonder code

Probeer 14 dagen gratis
Geen creditcard nodig
Alle features inbegrepen
Nederlandse templates
Probeer gratis Meer tutorials