How to Use Custom Code on Carrd

intermediate 8 min read Updated 2026-03-24

Quick Answer

Use Carrd's Embed element to add custom HTML, CSS, or JavaScript: select Embed, paste code, set Style to Inline for visible content or Hidden (Head/Body End) for styles/scripts, then publish to view. Requires Pro plan; test code first and check console for errors. Common for third-party widgets or custom features.

Get Carrd Pro → Partner

Try Carrd Full Carrd Review

Prerequisites

Carrd Pro Standard or higher plan
Valid HTML/CSS/JavaScript code tested standalone
Browser with developer tools (e.g., Chrome console)
Basic JavaScript knowledge
Published site (not preview)

Step-by-Step Instructions

Open Carrd Dashboard and Page Editor

Open your site in the Carrd Dashboard and navigate to the page editor where you want to add custom code. All custom code embedding happens in the in-browser UI, no terminal commands needed.[1][4]

Add Embed Element

Click the + button (Add Element) in the editor toolbar, then select Embed from the elements list to create a new Embed element. Drag it to the desired position on the page canvas.[1][4]

Place Hidden embeds at the page end for convenience, as they don't affect visual layout.

Configure Embed for Custom Code

Click the Embed element to open its settings panel. Set Type to Code if prompted, then paste your custom code into the Code input field.[4]

Embed HTML Snippets

For HTML snippets, paste directly into the Code field. Default Style is Inline, which displays the content visibly where the element is placed on the page.[1][4]

Use Inline for visible elements like custom widgets.

Embed Custom CSS

For Custom CSS, paste your CSS rules wrapped in <style> tags. Set Style to Hidden and Location to Head for global styles.[1][4]

Example: <pre><code><style> body { background: #f0f0f0; } </style></code></pre>

Embed JavaScript

For JavaScript, paste your JS code wrapped in <script> tags. Set Style to Hidden and Location to Body End to run after page load.[1][3][4]

Example: <pre><code><script> console.log('Custom JS loaded'); </script></code></pre> Use async/defer for heavy scripts.

Toggle Style and Location

Toggle Style between Inline (visible, direct page impact) and Hidden (background execution). Adjust Location as needed: Head, Body Top, or Body End for Hidden.[1][4]

Save and Apply Changes

Click Done or Save in the settings panel to apply the Embed element.[1][4]

Publish to Test

Click Publish in the top-right, choose an option like .carrd.co or Custom Domain, then Publish Changes. Custom code won't show in editor preview—test on live site.[1][4]

Always publish; previews ignore embeds.

Set Up Custom Form Code (Optional)

For forms with custom JS on submit, add a Form element, set Type to Custom, paste JS in Code using this for form reference. Return true/call success() for success.[2]

Add fields like Email or Text Area via Fields tab.

Common Issues & Troubleshooting

Site loads blank or broken after adding code

Invalid JS syntax (e.g., missing semicolon); validate code in standalone HTML, check browser console (F12) for errors, publish site, use try-catch wrappers.[1][3]

Code doesn't appear or work in editor

Custom code only renders on published live site, not previews; always publish and test live.[1][4]

Performance issues or slow loading

Heavy/unoptimized scripts; minify code, use async/defer, isolate in test site, check Network tab in console.[1][3]

Form submission errors

Duplicate IDs or fixed values; ensure unique IDs, return true/success() or false/failure() properly.[2]

ReferenceError or mixed content issues

Script loading order or HTTP/HTTPS mismatch; set to Body End, use HTTPS sources, debug console for specifics.[1][3]

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Carrd website before purchasing.

Visit Carrd View Carrd Pricing