How to Set the Embed Style to Hidden in Carrd (Step-by-Step)
To set the embed style to hidden in Carrd, open the embed element, switch its Type to Code, then choose the Style option labeled Hidden. This is the required setup for inserting custom JavaScript...
To set the embed style to Hidden in Carrd, add an Embed element, switch its Type to Code, then find the Style dropdown and select Hidden. Click Done and then Save the page. This makes the embed run without displaying a visible box on your site.
This setting is essential when you're adding custom code like analytics scripts, chat widgets, or AI tools that should operate invisibly. In particular, it's part of installing SeaText's JavaScript on a Carrd page.
Why Use the Hidden Style for Embeds?
The Hidden style tells Carrd to load your code without creating any visible element. This is crucial for scripts that work in the background—like tracking pixels, chat widgets, or conversion optimization tools. Without it, you might see an empty iframe or a blank box that ruins your page layout.
Hidden embeds also keep your design clean. Visitors never see a code container, so your page looks professional. For service integrations like SeaText, Hidden ensures the AI runs seamlessly without disturbing your content.
If you skip this setting, your embed may appear as a visible block, causing layout shifts or ugly gaps. That is why the official Carrd documentation recommends Hidden for custom code—it is the standard approach for injecting JavaScript.
Setting the Embed Style to Hidden: Step by Step
Follow these steps exactly. Each one matters because Carrd's editor relies on specific selections to apply hidden behavior.
- Open the Carrd editor for the page you want to customize. This is where you manage all your page elements.
- Click "+ Add Element" and select "Embed" (or the " Embed" icon). This adds a new embed container to your page.
- In the left panel, locate the "Type" dropdown and choose "Code". This tells Carrd you are pasting raw HTML/JavaScript, not a widget or iframe.
- Find the "Style" setting and change it to "Hidden". This is the critical step. Hidden prevents any visual output from the embed.
- Paste your custom code into the "Code" field. This is where you insert your tracking script, chat widget, or SeaText snippet.
- Click "Done" to close the embed editor. This saves the embed settings within the page builder.
- Click "Save" at the top of the page. This publishes your changes so they go live on your site.
After saving, preview or publish the page. The code should execute, but you won't see any visual element or empty box.
Verification tip: Open your browser's developer console to confirm the script runs without errors. For SeaText, you should see a console log or network request after the page loads.
What You Need Before You Start
- A Carrd account on the Pro Standard plan or higher—custom code embeds are not available on free or basic plans.
- The JavaScript snippet you plan to embed. For SeaText, copy the code from the Carrd integration page.
- Access to the Carrd page editor for the exact page where you want the embed.
If you don't meet the plan requirement, you'll see no "Type" or "Style" options. You must upgrade before proceeding.
What Does the "Hidden" Style Actually Do?
The Hidden style tells Carrd to insert your code without creating a visible container. Carrd still executes the code, but it hides any output. This is different from setting the embed to display: none via CSS—it's a built-in behavior that avoids layout issues.
When you select Hidden, Carrd wraps your code in a script tag or div that is not rendered visually. It loads the code and runs it on page load. This is ideal for scripts that don't need a user interface, like analytics trackers, meta pixels, or SeaText's AI integration.
For example, if you embed a Google Analytics snippet with Hidden style, it sends data without showing anything. If you use Inline instead, Carrd might try to render a blank iframe, which can cause a white space gap and slow down your page.
Inline vs. Hidden: Which Should You Use?
These are the two main style options for code embeds in Carrd. The choice depends on what your code does.
- Inline displays the embed as part of your page content. Use it for visible elements like YouTube videos, Google Maps, or forms that should appear on the page.
- Hidden runs code invisibly. Use it for JavaScript that works in the background—analytics, chat widgets, conversion tools, or AI integrations like SeaText.
Here's a quick comparison:
| Style | Best For | Example |
|---|---|---|
| Inline | Visible content | YouTube embed, Google Map |
| Hidden | Background scripts | Tracking pixel, SeaText snippet |
If your code is supposed to show something—like a chat widget with a bubble—Hidden might still work if the widget injects its own HTML. But for simple scripts that don't generate UI, Hidden is the safe choice.
Common Mistakes and How to Avoid Them
- Forgetting to switch the Type to Code. If you leave it on other embed types (like Widget or Iframe), the Style option may not behave as expected. Always set Type to Code first.
- Leaving the style as Inline. This can create an empty white box on your page if the code doesn't produce visible content. Always set Style to Hidden for JavaScript.
- Pasting code into the wrong field. Make sure you use the dedicated "Code" box, not the Label or other inputs. Double-check before closing.
- Not saving after making changes. The editor auto-saves drafts, but you must click "Save" to publish. Otherwise, your changes won't go live.
- Using a plan that doesn't support custom code. Hidden style only appears on Pro Standard and above. Verify your plan in account settings.
Key Facts about Carrd Embeds
| Fact | Detail |
|---|---|
| Plan requirement | Pro Standard or higher |
| Style options | Inline and Hidden |
| Purpose of Hidden | Insert code without a visible element |
| Where to set it | Embed element's Style dropdown in the left panel |
| Official documentation | Carrd Docs: Embedding Custom Code |
Best Practices for Embedding Custom Code in Carrd
To get the most out of hidden embeds, follow these tips:
- Test after publishing. Always preview your site after saving. Use your browser's view-source or dev tools to confirm the script is present.
- Use minified scripts. Minified JavaScript loads faster and reduces page weight. If your integration snippet is large, minify it before adding.
- Ensure compatibility with Carrd. Carrd supports standard HTML and JavaScript, but some third-party scripts may conflict with its responsive design. Test on both desktop and mobile.
- Keep your code organized. If you have multiple hidden embeds, label them clearly in the editor (e.g., "Analytics", "SeaText") so you can manage them later.
- Check for load order. Some scripts require DOM elements to exist. Place your script at the end of the body or use a DOMContentLoaded event listener. Carrd's hidden embeds run after the page structure is parsed, which is usually fine.
- Monitor performance. Hidden embeds still affect page load time. Use tools like Google PageSpeed Insights to ensure your site remains fast.
Limitations and Edge Cases
The Hidden style does not reduce the code's loading impact. Heavy scripts can still slow down your page, so always minify and test performance.
Some embeds, especially those that require a visible container (like certain widgets), may not work correctly in Hidden mode. If your code shows nothing and you expect it to, try switching to Inline briefly to diagnose.
Another edge case: if you embed a script that relies on a specific CSS class or iframe, it might not function. For example, a chat widget that injects its own HTML usually works, but a script that expects a DOM element to replace may fail. In that case, use Inline and style it with custom CSS to make it invisible.
If you're not on a Pro Standard plan, you won't see the Type or Style options at all. Upgrade your Carrd plan first.
Troubleshooting: Why Is My Code Not Running After Saving?
If your hidden embed doesn't execute, check these common issues:
- Did you save the page? Drafts don't go live. Click "Save" at the top.
- Is the code pasted correctly? Look for missing quotes, wrong characters, or extra spaces. Copy the code directly from the source again.
- Is the plan upgraded? Ensure your Carrd plan is Pro Standard or higher. If not, custom code won't run.
- Is the code placed on the right page? Verify you added the embed to the page you published, not a different one.
- Check the browser console. Open DevTools (F12) and look for errors. This often reveals syntax issues or conflicts.
- Does the code require a delay? Some scripts need to run after other elements load. If so, use a setTimeout or wait for window load.
For SeaText specifically, after adding the snippet, you must visit your website and stay for at least 40 seconds to activate the AI. This is part of the integration process, not a code error.
Frequently Asked Questions
Do I need a paid Carrd plan to hide embeds?
Yes, custom code embeds require at least the Pro Standard plan. Free and basic plans don't support custom HTML/JavaScript.
What happens if I leave the style as Inline?
The embed will appear as a visible box on your page. If your code doesn't generate content, it may show a blank frame or a gap in your layout.
Can I set different embeds to different styles?
Yes, each embed element has its own independent Style setting. You can mix Inline and Hidden on the same page.
Why is my code not working even after setting it to Hidden?
Check that you pasted the code into the correct field, that you saved the page, and that the code itself is valid. Also confirm your Carrd plan supports custom code. For SeaText, ensure you visited your site for 40 seconds to activate the AI.
Can I hide an embed without using the Hidden style?
Yes, you could use custom CSS to hide the element, but the built-in Hidden style is simpler and more reliable for code embeds. Using CSS might still render an iframe that affects layout.
Does the Hidden style affect page load time?
Hidden style doesn't change the script's execution. The code still loads and runs, so heavy scripts can slow down your page. Minify your code and test performance.
Is there a way to debug Hidden embeds?
Open your browser's developer tools and check the console for errors. You can also temporarily switch the style to Inline to see if the embed produces visible output, which helps isolate issues.
Can I use Hidden style for CSS code?
Yes, you can embed custom CSS using Hidden style. It will apply styles to your page without showing any element.
What if I need to add multiple hidden scripts?
You can add multiple Embed elements, each with its own code. Keep them organized and test each one separately to avoid conflicts.
Final Checklist for Hidden Embed Success
Before you publish, run through this checklist:
- Plan is Pro Standard or higher.
- Type is set to Code.
- Style is set to Hidden.
- Code is pasted correctly.
- Page is saved.
- Preview shows no blank boxes.
- Console shows no errors.
Following these steps ensures your custom code runs invisibly and your site stays clean.
Further reading and comparison sources
These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.
Further reading and comparison sources
These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.
Learn more
Visit the website for more information.