Anpassad kodinbäddning - Webflow hjälp

Last updated on 10/23/2025@mrbirddev

Lägg till anpassade kodblock på din webbplats med Code Embed-elementet för att låsa upp alla typer av anpassad funktionalitet.

Elementet Code Embed stöder endast HTML, CSS i <style>-taggar och JS i <script>-taggar. Du kan inte integrera server-side-språk (t.ex. Perl, PHP, Python, Ruby) i ett Code Embed-element.

Anpassad kod är en avancerad modifiering som kan komma i konflikt med Webflows underliggande funktionalitet. Därför kan Webflow inte garantera funktionaliteten eller full kompatibilitet för någon anpassad kod. Dessutom kan vårt supportteam inte ge direkt hjälp med inställning eller felsökning av anpassad kod, eftersom dessa ämnen ligger utanför vår kundsupportpolicy. Om du stöter på problem med anpassad kod, vänligen meddela oss på Webflow Forum, där hela Webflow-gemenskapen (inklusive personal) kan ge ytterligare hjälp och resurser.

Hur man lägger till ett Code Embed-element

Du kan bädda in tredjepartskod eller din egen anpassade kod var som helst i din design eller i ett rikt text-element.

Anpassad kod i ett Code Embed-element får inte överstiga 50 000 tecken. Om koden du vill bädda in är längre kan du lagra den på en annan server och referera till skriptet i din inbäddning. Du kan också minimera din anpassade kod med ett tredjepartsverktyg eller dela upp koden i flera Embed-element (förutsatt att detta inte bryter några JavaScript-funktioner).

Hur man lägger till anpassad kod direkt i din design

Kopiera koden du vill bädda in till ditt urklipp
Öppna Lägg till-panelen och lägg till ett Code Embed-element på Webflow-duken
Klistra in den anpassade koden du kopierade i steg 1
Spara och stäng modalen

Om din anpassade kod har öppnings- och/eller stängningstaggar, se till att lägga till dessa för att säkerställa att din kod fungerar som förväntat. Inkludera inte heller <html>, <body> eller <head> taggar i din anpassade kod, annars kommer din webbplats/layout att brytas.

Radbrytning är aktiverad som standard för enklare kodvisning och redigering, men du kan stänga av denna inställning genom att avmarkera kryssrutan Radbrytning i kodredigeraren. Du kan också aktivera redigering i fullskärm genom att klicka på ikonen “maximera”.

Proffstips: Om du vill återanvända samma inbäddade innehåll på hela din webbplats kan du använda komponenter för att göra ditt Code Embed-element till en återanvändbar komponent.

Hur man lägger till anpassad kod i ett rich text-element

Kopiera koden du vill bädda in till ditt urklipp
Placera markören i rich text-elementet där du vill lägga till din anpassade kod
Klicka på ikonen “plus” för att öppna infogningsmenyn och klicka på anpassad kod-knappen
Klistra in den anpassade koden du kopierade i steg 1

Hur man använder dynamiskt innehåll i din anpassade kod

Du kan integrera samlingsfält i inbäddad kod för att dynamiskt hämta information för olika användningar. Läs mer: Se Dynamiska inbäddningar i Webflow Hjälpcenter.

Hur man redigerar Code Embed-elementet

Det finns flera sätt att öppna kodredigeraren och redigera koden i ett Code Embed-element. Du kan:

Välj Code Embed-elementet på canvas och dubbelklicka
Välj Code Embed-elementet på canvas och tryck på enter
Välj Code Embed-elementet på canvas och klicka på inställningsikonen “kugghjul”
Välj Code Embed-elementet på canvas och klicka på Öppna kodredigerare i Inställningspanelen under Code Embed-inställningar

Bra att veta: Om du inte kan se ditt Code Embed-element på duken kan du hitta och välja det från Navigator-panelen. Öppna sedan Inställningspanelen och klicka på Öppna kodredigerare under Code Embed-inställningar för att redigera din kod.

Hur man ställer in dimensioner på Code Embed-elementet

Om den anpassade koden inom Code Embed-elementet inte uttryckligen ställer in storlek eller dimensioner kan innehållet ofta ta upp hela bredden av dess överordnade element. Du kan kanske lägga till height="100%" width="100%" i din anpassade kod, vilket gör att du kan justera bredden och höjden på inbäddningselementet och innehållet från Stilpanelen.

Hur man förhandsgranskar det inbäddade innehållet

Anpassad kod omsluten i <iframe></iframe> eller <style>-taggar kommer att visa en förhandsgranskning på duken eller inom ditt rika textelement, men vissa kodinbäddningar kan endast ses på den live-webbplatsen. Varje gång en tagg används i kodredigeraren kommer du att se en platshållare för det elementet i Designern.

När du förhandsgranskar, publicerar eller exporterar din webbplats kommer skriptet och den anpassade koden inuti att renderas där du placerade det.

Effekterna av anpassad kod visas i förhandsgranskningsläge, men de kommer inte att gå live förrän din webbplats är publicerad.

För att utesluta anpassade skript från förhandsgranskning och kommentarlägen, omslut din kod i följande HTML-kommentar:
All kod här kommer att uteslutas

Läs mer: Se Använd .webflow.io som en staging-domän för testning och feedback.

FAQ och felsökningstips

Kan jag använda server-side-språk i ett Code Embed-element?
Du kan inte integrera server-side-språk (t.ex. Perl, PHP, Python, Ruby) i ett Code Embed-element. Code Embed-elementet stöder endast HTML, CSS i <style>-taggar och JS i <script>-taggar.

Kan jag öka gränsen på 50 000 tecken för Code Embed-elementet?
Anpassad kod i Code Embed-elementet kan inte överstiga 50 000 tecken. Om koden du vill bädda in är längre kan du lagra den på en annan server och referera till skriptet i din inbäddning. Du kan också minimera din anpassade kod med ett tredjepartsverktyg eller dela upp koden i flera Code Embed-element (förutsatt att detta inte bryter några JavaScript-funktioner).

Hjälp! Min anpassade kod fungerar inte!
Kontrollera att din kod innehåller lämpliga öppnings- och/eller avslutningstaggar och inte innehåller <html>, <body> eller <head>-taggar.

Från och med augusti 2020 inkluderar nyligen publicerade Webflow-sajter jQuery v3.5.1. Att importera andra versioner av jQuery med anpassad kod kan orsaka konflikter och oväntat beteende på din sajt. Skript som påverkar DOM-händelser som onClick, onHover, etc., kan också orsaka oväntat beteende.

Det är viktigt att komma ihåg att anpassad kod är en avancerad modifiering som kan komma i konflikt med Webflows underliggande funktionalitet. Därför kan Webflow inte garantera funktionaliteten eller full kompatibilitet för någon anpassad kod.

Vårt supportteam kan inte ge direkt hjälp med inställning eller felsökning av anpassad kod, eftersom dessa ämnen ligger utanför vår kundsupportpolicy. Om du stöter på problem med anpassad kod, vänligen meddela oss på Webflow Forum, där hela Webflow-gemenskapen (inklusive personal) kan ge ytterligare hjälp och resurser.

Tillbaka till webflow hjälp

Last updated on 10/23/2025@mrbirddev