Aangepaste code insluiten - Webflow hulp

Last updated on 10/23/2025@mrbirddev

Voeg aangepaste codeblokken toe aan je site met het Code Embed-element om allerlei aangepaste functionaliteiten te ontgrendelen.

Het Code Embed-element ondersteunt alleen HTML, CSS in <style>-tags en JS in <script>-tags. Je kunt geen server-side talen (bijv. Perl, PHP, Python, Ruby) integreren in een Code Embed-element.

Aangepaste code is een geavanceerde wijziging die mogelijk conflicteert met de onderliggende functionaliteit van Webflow. Daarom kan Webflow de functionaliteit of volledige compatibiliteit van aangepaste code niet garanderen. Bovendien kan ons ondersteuningsteam geen directe hulp bieden bij het instellen of oplossen van problemen met aangepaste code, aangezien deze onderwerpen buiten het bereik van ons klantenondersteuningsbeleid vallen. Als je problemen ondervindt met aangepaste code, laat het ons dan weten op het Webflow Forum, waar de hele Webflow-gemeenschap (inclusief personeel) extra hulp en bronnen kan bieden.

Hoe voeg je een Code Embed-element toe

Je kunt code van derden of je eigen aangepaste code overal in je ontwerp of in een rich text-element insluiten.

Aangepaste code in een Code Embed-element mag niet langer zijn dan 50.000 tekens. Als de code die je wilt insluiten langer is, kun je deze op een andere server opslaan en het script in je insluiting verwijzen. Je kunt je aangepaste code ook verkleinen met een tool van derden of de code splitsen in meerdere Embed-elementen (mits dit geen JavaScript-functies breekt).

Hoe voeg je aangepaste code direct toe aan je ontwerp

Kopieer de code die je wilt insluiten naar je klembord
Open het Toevoegen-paneel en voeg een Code Embed-element toe aan het Webflow-canvas
Plak de aangepaste code die je in stap 1 hebt gekopieerd
Sla op en sluit de modal af

Als je aangepaste code openings- en/of sluitingstags heeft, zorg er dan voor dat je die toevoegt om ervoor te zorgen dat je code werkt zoals verwacht. Voeg bovendien geen <html>, <body> of <head> tags toe aan je aangepaste code, anders zal je website/lay-out breken.

Regelomloop is standaard ingeschakeld voor gemakkelijker code bekijken en bewerken, maar je kunt deze instelling uitschakelen door het selectievakje Regelomloop in de code-editor uit te schakelen. Je kunt ook volledig scherm bewerken inschakelen door op het “maximaliseren” pictogram te klikken.

Pro tip: Als je dezelfde ingesloten inhoud op je hele site opnieuw wilt gebruiken, kun je componenten gebruiken om je Code Embed-element om te zetten in een herbruikbaar component.

Hoe aangepaste code toe te voegen aan een rich text-element

Kopieer de code die je wilt insluiten naar je klembord
Plaats je cursor in het rich text-element waar je je aangepaste code wilt toevoegen
Klik op het “plus” pictogram om het invoegmenu te openen en klik op de aangepaste codeknop
Plak de aangepaste code die je in stap 1 hebt gekopieerd

Hoe dynamische inhoud te gebruiken binnen je aangepaste code

Je kunt Collectievelden in de ingesloten code opnemen om dynamisch informatie op te halen voor verschillende toepassingen. Meer informatie: Zie Dynamische insluitingen in het Webflow Helpcentrum.

Hoe het Code Embed-element te bewerken

Er zijn verschillende manieren om de code-editor te openen en de code in een Code Embed element te bewerken. Je kunt:

Het Code Embed element op het canvas selecteren en dubbelklikken
Het Code Embed element op het canvas selecteren en op enter drukken
Het Code Embed element op het canvas selecteren en op het instelling “tandwiel” pictogram klikken
Het Code Embed element op het canvas selecteren en Open code-editor klikken in het Instellingenpaneel onder Code Embed-instellingen

Goed om te weten: Als je je Code Embed-element niet op het canvas kunt zien, kun je het vinden en selecteren vanuit het Navigator-paneel. Open vervolgens het Instellingenpaneel en klik op Open code-editor onder Code Embed-instellingen om je code te bewerken.

Hoe de afmetingen van het Code Embed-element instellen

Als de aangepaste code binnen het Code Embed-element niet expliciet de grootte of afmetingen instelt, kan de inhoud vaak de volledige breedte van het bovenliggende element innemen. Je kunt mogelijk height="100%" width="100%" toevoegen in je aangepaste code, waarmee je de breedte en hoogte van het embed-element en de inhoud vanuit het Stijl-paneel kunt aanpassen.

Hoe de ingesloten inhoud te bekijken

Aangepaste code omgeven door <iframe></iframe> of <style> tags zal een voorbeeld tonen op het canvas of binnen je rijke tekstelement, maar sommige code Embeds kunnen alleen op de live website worden bekeken. Elke keer dat een tag in de code-editor wordt gebruikt, zie je een tijdelijke aanduiding voor dat element in de Designer.

Zodra je een voorbeeld bekijkt, publiceert of je site exporteert, zal het script en de aangepaste code binnenin worden weergegeven waar je het hebt geplaatst.

De effecten van aangepaste code verschijnen in de voorbeeldmodus, maar ze worden pas live wanneer je site is gepubliceerd.

Om aangepaste scripts uit te sluiten van voorbeeld- en commentaarmodi, omhul je je code met de volgende HTML-opmerking:
Alle code hier wordt uitgesloten

Meer informatie: Zie Gebruik .webflow.io als een stagingdomein voor testen en feedback.

FAQ en tips voor probleemoplossing

Kan ik server-side talen gebruiken in een Code Embed-element?
Je kunt geen server-side talen (bijv. Perl, PHP, Python, Ruby) integreren in een Code Embed-element. Het Code Embed-element ondersteunt alleen HTML, CSS in <style> tags, en JS in <script> tags.

Kan ik de limiet van 50.000 tekens voor het Code Embed-element verhogen?
Aangepaste code in het Code Embed-element mag niet meer dan 50.000 tekens bevatten. Als de code die je wilt insluiten langer is, kun je deze op een andere server opslaan en het script in je embed refereren. Je kunt je aangepaste code ook verkleinen met een tool van derden of de code splitsen in meerdere Code Embed-elementen (mits dit geen JavaScript-functies breekt).

Help! Mijn aangepaste code werkt niet!
Controleer of je code de juiste openings- en/of sluitingstags bevat en geen <html>, <body> of <head> tags bevat.

Vanaf augustus 2020 bevatten nieuw gepubliceerde Webflow-sites jQuery v3.5.1. Het importeren van andere versies van jQuery met aangepaste code kan conflicten en onverwacht gedrag op je site veroorzaken. Scripts die DOM-evenementen beïnvloeden zoals onClick, onHover, enz., kunnen ook onverwacht gedrag veroorzaken.

Het is belangrijk om te onthouden dat aangepaste code een geavanceerde wijziging is die in conflict kan komen met de onderliggende functionaliteit van Webflow. Daarom kan Webflow de functionaliteit of volledige compatibiliteit van aangepaste code niet garanderen.

Ons ondersteuningsteam kan geen directe hulp bieden bij het instellen of oplossen van problemen met aangepaste code, aangezien deze onderwerpen buiten het bereik van ons klantenondersteuningsbeleid vallen. Als je problemen ondervindt met aangepaste code, laat het ons dan weten op het Webflow Forum, waar de hele Webflow-gemeenschap (inclusief personeel) extra hulp en bronnen kan bieden.

Terug naar webflow help

Last updated on 10/23/2025@mrbirddev