[{"data":1,"prerenderedAt":284},["ShallowReactive",2],{"blog-how-to/waitlist-carrd":3},{"id":4,"title":5,"body":6,"category":256,"date":257,"dateModified":258,"description":259,"draft":260,"extension":261,"faq":262,"featured":260,"keywords":270,"meta":271,"navigation":272,"ogDescription":273,"ogTitle":5,"path":274,"readTime":275,"schemaOrg":276,"schemaType":277,"seo":278,"sitemap":279,"stem":280,"tags":281,"twitterCard":282,"__hash__":283},"blog/blog/how-to/waitlist-carrd.md","Carrd Waitlist: Add Email Signup to Your Carrd Site",{"type":7,"value":8,"toc":249},"minimark",[9,13,16,22,27,49,53,63,85,94,107,129,135,144,153,157,160,163,173,177,184,187,193,196,224],[10,11,12],"p",{},"Carrd is the fastest no-code landing page builder for indie founders. You can ship a one-pager in an afternoon with no coding required. But adding a waitlist to Carrd requires knowing one platform quirk: each custom HTML block renders inside its own iframe, which changes how you embed external scripts.",[10,14,15],{},"Get this right and you have a working waitlist with referral tracking in under five minutes.",[17,18,19],"tldr",{},[10,20,21],{},"Paste both the OperatorStack script tag and the widget div into the same Carrd HTML element. They must share the same iframe context. Carrd Pro Standard ($19/year) is required to use HTML embeds.",[23,24,26],"h2",{"id":25},"what-you-need-before-you-start","What You Need Before You Start",[28,29,30,38],"ul",{},[31,32,33,37],"li",{},[34,35,36],"strong",{},"Carrd Pro Standard ($19/year)."," The free plan does not allow custom HTML embeds. Pro Standard is the minimum plan that unlocks the HTML/CSS/JS element type in the editor.",[31,39,40,43,44,48],{},[34,41,42],{},"An OperatorStack account."," Free to start. You need your project key (the ",[45,46,47],"code",{},"pk_"," value from your embed snippet).",[23,50,52],{"id":51},"step-by-step-setup","Step-by-Step Setup",[54,55,57],"step",{"number":56},"1",[10,58,59,62],{},[34,60,61],{},"Create an OperatorStack project."," Go to your OperatorStack dashboard and create a new project. Name it after your product and enter your Carrd site URL so CORS is configured correctly for your domain.",[54,64,66,72,82],{"number":65},"2",[10,67,68,71],{},[34,69,70],{},"Copy your embed snippet."," From the project settings page, copy your script tag. It looks like this:",[73,74,80],"pre",{"className":75,"code":77,"language":78,"meta":79},[76],"language-html","\u003Cscript src=\"https://operatorstack.dev/os.js\" data-project=\"pk_abc123\">\u003C/script>\n","html","",[45,81,77],{"__ignoreMap":79},[10,83,84],{},"Keep this handy. You will paste it in the next step.",[54,86,88],{"number":87},"3",[10,89,90,93],{},[34,91,92],{},"Open your Carrd site in the editor."," Log in to Carrd and click Edit on your site to open the visual editor.",[54,95,97],{"number":96},"4",[10,98,99,102,103,106],{},[34,100,101],{},"Add an HTML element."," Click the + button to add a new element. From the element type menu, select ",[34,104,105],{},"HTML/CSS/JS",". Carrd opens a code input panel.",[54,108,110,120,126],{"number":109},"5",[10,111,112,115,116,119],{},[34,113,114],{},"Paste both the script tag and the widget div."," In the HTML input, enter this code -- replacing ",[45,117,118],{},"pk_abc123"," with your actual project key:",[73,121,124],{"className":122,"code":123,"language":78,"meta":79},[76],"\u003Cscript src=\"https://operatorstack.dev/os.js\" data-project=\"pk_abc123\">\u003C/script>\n\u003Cdiv data-os-widget=\"waitlist\">\u003C/div>\n",[45,125,123],{"__ignoreMap":79},[10,127,128],{},"Both lines go in the same element. This is the key Carrd-specific requirement.",[130,131,132],"warning-box",{},[10,133,134],{},"Do not put the script tag and the widget div in separate Carrd HTML elements. Carrd sandboxes each HTML block inside its own iframe. A script in one iframe cannot find a div in a different iframe. Both must be in the same element.",[54,136,138],{"number":137},"6",[10,139,140,143],{},[34,141,142],{},"Adjust the element height."," In Carrd's editor, drag the bottom edge of your HTML element to set its height. The OperatorStack waitlist form fits comfortably at around 280-320px tall. If the form appears clipped, increase the height.",[54,145,147],{"number":146},"7",[10,148,149,152],{},[34,150,151],{},"Save and publish."," Click Save, then Publish in the Carrd editor. Your site goes live with the waitlist form. Visit your URL, submit a test email, and confirm the signup appears in your OperatorStack dashboard under Contacts.",[23,154,156],{"id":155},"what-your-visitors-see","What Your Visitors See",[10,158,159],{},"After someone submits the waitlist form, OperatorStack shows a confirmation message and displays their unique referral link. Share buttons for Twitter, LinkedIn, WhatsApp, and email appear automatically. When a referred visitor signs up through that link, the attribution is recorded and visible on your referral leaderboard.",[10,161,162],{},"The embed also collects cookie-free analytics in the background: total page views, referral sources (which sites send you traffic), and estimated unique visitors. No extra configuration, no cookie banner required.",[164,165,166],"tip-box",{},[10,167,168,169,172],{},"When sharing your Carrd site on social media, add UTM parameters to your URL: ",[45,170,171],{},"https://yoursite.carrd.co?utm_source=twitter&utm_medium=social",". OperatorStack tracks these automatically so you can see which channels drive the most signups in your analytics dashboard.",[23,174,176],{"id":175},"alternative-header-code-injection","Alternative: Header Code Injection",[10,178,179,180,183],{},"If you are on Carrd Pro Plus, you can also add the script tag via ",[34,181,182],{},"Site Settings > Code Injection > Header"," instead of embedding it in an HTML element. This loads the script in the main page context rather than inside an iframe.",[10,185,186],{},"With this approach, add a separate HTML element to your page containing only:",[73,188,191],{"className":189,"code":190,"language":78,"meta":79},[76],"\u003Cdiv data-os-widget=\"waitlist\">\u003C/div>\n",[45,192,190],{"__ignoreMap":79},[10,194,195],{},"The globally loaded script will find and render the widget. The single-element approach from Step 5 works on all paid Carrd plans, so use that unless you have a specific reason to separate the script from the widget.",[197,198,199,206,212,218],"faq-section",{},[200,201,203],"faq-item",{"question":202},"What Carrd plan do I need to add a waitlist?",[10,204,205],{},"Carrd Pro Standard ($19/year). The free plan does not allow HTML embeds. Pro Standard is the cheapest plan that unlocks the HTML/CSS/JS element type.",[200,207,209],{"question":208},"Why do I need both the script and div in the same Carrd element?",[10,210,211],{},"Carrd renders each custom HTML element inside its own iframe for sandboxing. The script and widget div need to share the same iframe context. If you split them into separate Carrd elements, the script cannot find the div.",[200,213,215],{"question":214},"Will the waitlist widget show referral links after signup?",[10,216,217],{},"Yes. After someone submits the form, OperatorStack displays their unique referral link with share buttons for Twitter, LinkedIn, WhatsApp, and email. Everything renders inside the same embed block.",[200,219,221],{"question":220},"Can I track page views on Carrd with OperatorStack too?",[10,222,223],{},"Yes. The same script that powers the waitlist widget also collects cookie-free analytics: page views, referral sources, and unique visitor counts. No consent banner needed.",[225,226,227,228],"content-related-articles",{},"\n  ",[229,230,227,234],"contentrelatedcard",{"href":231,"title":232,"description":233},"/blog/how-to/set-up-waitlist","How to Set Up a Waitlist in Under 5 Minutes","The general-purpose waitlist setup guide for any site or framework.",[229,235,227,239],{"href":236,"title":237,"description":238},"/blog/how-to/static-html-landing-page","One Script Tag, Full Stack: Supercharge a Static Landing Page","Add analytics, forms, AI chat, and referrals to a plain HTML page with one embed.",[229,240,244],{"href":241,"title":242,"description":243},"/blog/how-to/waitlist-lovable-app","How to Add a Waitlist to Your Lovable App","Step-by-step integration guide for Lovable-built landing pages.",[245,246],"cta-box",{"href":247,"label":248},"/","Get Started Free",{"title":79,"searchDepth":250,"depth":250,"links":251},2,[252,253,254,255],{"id":25,"depth":250,"text":26},{"id":51,"depth":250,"text":52},{"id":155,"depth":250,"text":156},{"id":175,"depth":250,"text":176},"how-to","2026-06-23",null,"Add a waitlist with referral tracking to any Carrd site in under 5 minutes. Requires Carrd Pro Standard. One embed block, no backend.",false,"md",[263,265,268,269],{"question":202,"answer":264},"Carrd Pro Standard ($19/year). The free plan does not allow HTML embeds or custom code. Pro Standard is the cheapest plan that unlocks the HTML/CSS/JS element type.",{"question":266,"answer":267},"Why do I need both the script and the div in the same Carrd element?","Carrd renders each custom HTML element inside its own iframe for sandboxing. The script and the widget div need to share the same iframe context to communicate. If you split them into separate Carrd elements, the script cannot find the div.",{"question":214,"answer":217},{"question":220,"answer":223},"carrd waitlist,add waitlist to carrd,carrd email signup,carrd custom html,carrd lead capture,carrd pre-launch",{},true,"Add a waitlist with referral tracking to a Carrd site. Paste one HTML embed block and you're live in 5 minutes.","/blog/how-to/waitlist-carrd","5 min","[object Object]","HowTo",{"title":5,"description":259},{"loc":274},"blog/how-to/waitlist-carrd",[],"summary_large_image","RMKbmVMN51i1VPPW7cd51ioipHvkILAA6qH76Xd1yis",1782240245948]