[{"data":1,"prerenderedAt":290},["ShallowReactive",2],{"blog-how-to/waitlist-lovable-app":3},{"id":4,"title":5,"body":6,"category":265,"date":266,"dateModified":267,"description":268,"draft":269,"extension":270,"faq":271,"featured":269,"keywords":276,"meta":277,"navigation":278,"ogDescription":279,"ogTitle":267,"path":280,"readTime":281,"schemaOrg":282,"schemaType":283,"seo":284,"sitemap":285,"stem":286,"tags":287,"twitterCard":288,"__hash__":289},"blog/blog/how-to/waitlist-lovable-app.md","How to Add a Waitlist to Your Lovable App in 5 Minutes",{"type":7,"value":8,"toc":257},"minimark",[9,13,16,22,27,30,34,51,71,100,128,137,141,144,152,155,169,173,176,179,183,193,199,205,233],[10,11,12],"p",{},"You shipped a landing page with Lovable. It looks great. Now you need to collect signups. You could wire up a form service, set up a database, and connect an email tool. Or you could paste one script tag and be done in five minutes.",[10,14,15],{},"Here is how to add a waitlist with built-in referral tracking to your Lovable app.",[17,18,19],"tldr",{},[10,20,21],{},"Paste one script tag into your Lovable app. Add a widget container where you want the signup form. OperatorStack handles the form, referral codes, contact storage, and analytics. No backend, no database, no extra tools.",[23,24,26],"h2",{"id":25},"what-you-get","What You Get",[10,28,29],{},"When you add OperatorStack to your Lovable app, you get a waitlist signup form, automatic referral tracking with unique codes per signup, sharing links for Twitter, LinkedIn, WhatsApp, and email, cookie-free page analytics, and a unified contact list. All from one script tag.",[23,31,33],{"id":32},"step-by-step-setup","Step-by-Step Setup",[35,36,38],"step",{"number":37},"1",[10,39,40,44,45,50],{},[41,42,43],"strong",{},"Create an OperatorStack account and project."," Sign up at ",[46,47,49],"a",{"href":48},"/","OperatorStack"," and create a new project. Enter your Lovable app's URL (the deployed URL, not the Lovable editor URL). This configures CORS so signups work from your domain.",[35,52,54,60],{"number":53},"2",[10,55,56,59],{},[41,57,58],{},"Copy your script tag."," On your project page, grab the embed snippet:",[61,62,68],"pre",{"className":63,"code":65,"language":66,"meta":67},[64],"language-html","\u003Cscript src=\"https://operatorstack.dev/os.js\" data-project=\"pk_your_key\">\u003C/script>\n","html","",[69,70,65],"code",{"__ignoreMap":67},[35,72,74,80,86],{"number":73},"3",[10,75,76,79],{},[41,77,78],{},"Paste it into your Lovable app."," Open your project in the Lovable editor. You have two options:",[10,81,82,85],{},[41,83,84],{},"Option A: Ask Lovable to add it."," Prompt Lovable with: \"Add this script tag to the head of my index.html\" and paste the snippet. Lovable will place it in the right spot.",[10,87,88,91,92,95,96,99],{},[41,89,90],{},"Option B: Edit manually."," Open your ",[69,93,94],{},"index.html"," file and paste the script tag just before ",[69,97,98],{},"\u003C/head>",".",[35,101,103,109,115,118,125],{"number":102},"4",[10,104,105,108],{},[41,106,107],{},"Add the waitlist widget."," Place this container wherever you want the signup form to appear:",[61,110,113],{"className":111,"code":112,"language":66,"meta":67},[64],"\u003Cdiv data-os-widget=\"waitlist\">\u003C/div>\n",[69,114,112],{"__ignoreMap":67},[10,116,117],{},"If you are working in a React component (Lovable generates React), add it in JSX:",[61,119,123],{"className":120,"code":112,"language":122,"meta":67},[121],"language-jsx","jsx",[69,124,112],{"__ignoreMap":67},[10,126,127],{},"OperatorStack renders the form inside a Shadow DOM, so it will not conflict with your Lovable app's styling.",[35,129,131],{"number":130},"5",[10,132,133,136],{},[41,134,135],{},"Deploy and verify."," Hit deploy in Lovable. Visit your live site. You should see the waitlist form. Submit a test signup, then check your OperatorStack dashboard. The signup, referral code, and analytics data will all be there.",[23,138,140],{"id":139},"using-the-sdk-instead","Using the SDK Instead",[10,142,143],{},"If you want a custom signup form that matches your Lovable design, skip the widget and use the SDK directly:",[61,145,150],{"className":146,"code":148,"language":149,"meta":67},[147],"language-javascript","const result = await OperatorStack.joinWaitlist({\n  email: userEmail,\n  name: userName,\n});\n\n// Show sharing links after signup\nconst links = OperatorStack.getShareLinks(result.referral_code);\n","javascript",[69,151,148],{"__ignoreMap":67},[10,153,154],{},"The SDK is available globally after the script tag loads. All signups feed into the same dashboard and contact list regardless of whether you use the widget or SDK.",[156,157,158],"tip-box",{},[10,159,160,161,164,165,168],{},"The SDK exposes a ",[69,162,163],{},"ready"," Promise. If you need to call SDK methods immediately on page load, await ",[69,166,167],{},"OperatorStack.ready"," first. Inside event handlers (button clicks, form submits), this is handled automatically.",[23,170,172],{"id":171},"what-about-analytics","What About Analytics?",[10,174,175],{},"You already have them. The same script tag that powers the waitlist also tracks page views, unique visitors, referral sources, and conversion rates. No cookie banner required since the analytics are cookie-free by design.",[10,177,178],{},"Check the Analytics tab in your project dashboard to see where your traffic is coming from and what your signup conversion rate looks like.",[23,180,182],{"id":181},"common-issues","Common Issues",[10,184,185,188,189,192],{},[41,186,187],{},"Widget not showing up?"," Make sure the script tag loaded before the widget container. Placing the script in ",[69,190,191],{},"\u003Chead>"," is safest. Also verify your project key matches your OperatorStack project.",[10,194,195,198],{},[41,196,197],{},"CORS errors in the console?"," Your deployed URL probably does not match the URL in your OperatorStack project settings. Update the project URL to match your Lovable deployment domain. Localhost always works for development.",[10,200,201,204],{},[41,202,203],{},"Styles look off?"," The widget renders in a Shadow DOM, so your app's CSS cannot reach it. Customize the widget appearance from the OperatorStack dashboard instead.",[206,207,208,215,221,227],"faq-section",{},[209,210,212],"faq-item",{"question":211},"Does OperatorStack work with Lovable's deployment?",[10,213,214],{},"Yes. Lovable deploys to Netlify or its own hosting. The OperatorStack script tag works on any hosting provider since it loads from our CDN. No server-side configuration needed.",[209,216,218],{"question":217},"Will the script tag slow down my Lovable site?",[10,219,220],{},"No. The embed script is under 13KB gzipped and loads asynchronously. It will not block your page render or affect your site's load time.",[209,222,224],{"question":223},"Can I use OperatorStack with a custom domain on Lovable?",[10,225,226],{},"Yes. Just add your custom domain as the project URL in OperatorStack. CORS is configured automatically for your domain, and localhost always works during development.",[209,228,230],{"question":229},"Do I get analytics too, or just the waitlist?",[10,231,232],{},"Both. The same script tag that powers the waitlist also tracks page views, referral sources, and unique visitors with cookie-free analytics. No extra setup required.",[234,235,236,237],"content-related-articles",{},"\n  ",[238,239,236,243],"contentrelatedcard",{"href":240,"title":241,"description":242},"/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.",[238,244,236,248],{"href":245,"title":246,"description":247},"/blog/how-to/analytics-bolt-new","Add Analytics to Your Bolt.new Site Without Cookies","Similar integration guide for Bolt.new projects.",[238,249,253],{"href":250,"title":251,"description":252},"/blog/guides/viral-referral-loop","Building a Viral Referral Loop for Your Waitlist","How to turn your waitlist into a growth engine with referral mechanics.",[254,255],"cta-box",{"href":48,"label":256},"Get Started Free",{"title":67,"searchDepth":258,"depth":258,"links":259},2,[260,261,262,263,264],{"id":25,"depth":258,"text":26},{"id":32,"depth":258,"text":33},{"id":139,"depth":258,"text":140},{"id":171,"depth":258,"text":172},{"id":181,"depth":258,"text":182},"how-to","2026-03-13",null,"Step-by-step guide to adding a waitlist with referral tracking to any Lovable-built landing page. One script tag, no backend needed.",false,"md",[272,273,274,275],{"question":211,"answer":214},{"question":217,"answer":220},{"question":223,"answer":226},{"question":229,"answer":232},"lovable waitlist,lovable app waitlist,lovable landing page email capture,add waitlist to lovable,vibe coding waitlist,lovable pre-launch,lovable email signup",{},true,"Built a landing page with Lovable? Add a waitlist with referral tracking in 5 minutes. One script tag, zero backend code.","/blog/how-to/waitlist-lovable-app","4 min","[object Object]","HowTo",{"title":5,"description":268},{"loc":280},"blog/how-to/waitlist-lovable-app",[],"summary_large_image","8tGzwbK_9fW_ZlRYiObFHxNEK-38EtJ0ULxP9VkAF8s",1781277655037]