[{"data":1,"prerenderedAt":317},["ShallowReactive",2],{"blog-how-to/operatorstack-v0":3},{"id":4,"title":5,"body":6,"category":289,"date":290,"dateModified":291,"description":292,"draft":293,"extension":294,"faq":295,"featured":293,"keywords":302,"meta":303,"navigation":304,"ogDescription":305,"ogTitle":306,"path":307,"readTime":308,"schemaOrg":309,"schemaType":310,"seo":311,"sitemap":312,"stem":313,"tags":314,"twitterCard":315,"__hash__":316},"blog/blog/how-to/operatorstack-v0.md","OperatorStack v0 Integration: Add a Waitlist to Your v0 App",{"type":7,"value":8,"toc":280},"minimark",[9,13,16,35,40,65,69,75,105,118,122,125,142,146,152,177,181,187,197,201,207,216,222,256],[10,11,12],"p",{},"You describe a landing page to v0, it generates a working Next.js app with Tailwind and shadcn/ui components in under a minute, and you have a page with no way to collect an email address. v0 is fast at UI, not at backend infrastructure, and a waitlist needs somewhere to store signups, generate referral links, and track who showed up.",[10,14,15],{},"OperatorStack adds all three with one script tag, no backend code, and no changes to the Next.js structure v0 already wrote.",[17,18,19],"tldr",{},[10,20,21,22,26,27,30,31,34],{},"Add the OperatorStack script tag to the ",[23,24,25],"code",{},"app/layout.tsx"," file v0 generated, using ",[23,28,29],{},"next/script"," with ",[23,32,33],{},"strategy=\"afterInteractive\"",". Drop in the default widget div or a custom SDK-based form. Test on a deployed Vercel URL, not v0's chat preview, since the preview iframe does not reliably load third-party scripts.",[36,37,39],"h2",{"id":38},"step-1-get-your-project-key","Step 1: Get Your Project Key",[41,42,44],"step",{"number":43},"1",[10,45,46,50,51,56,57,60,61,64],{},[47,48,49],"strong",{},"Create an OperatorStack project."," Sign up at ",[52,53,55],"a",{"href":54},"/","OperatorStack"," and create a project using your v0 app's deployed URL (the ",[23,58,59],{},".vercel.app"," domain or your custom domain, not the ",[23,62,63],{},"v0.dev"," chat URL). This sets up CORS so signups work once you deploy.",[36,66,68],{"id":67},"step-2-add-the-script-tag-to-the-v0-generated-layout","Step 2: Add the Script Tag to the v0-Generated Layout",[10,70,71,72,74],{},"v0's default output is a standard Next.js App Router project, so the script tag goes exactly where it would in any Next.js app: ",[23,73,25],{},".",[41,76,78,88,98],{"number":77},"2",[10,79,80],{},[47,81,82,83,85,86,74],{},"Open ",[23,84,25],{}," and add the script with ",[23,87,29],{},[89,90,96],"pre",{"className":91,"code":93,"language":94,"meta":95},[92],"language-tsx","// app/layout.tsx\nimport Script from \"next/script\";\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    \u003Chtml lang=\"en\">\n      \u003Cbody>\n        {children}\n        \u003CScript\n          src=\"https://operatorstack.dev/os.js\"\n          data-project=\"pk_your_project_key\"\n          strategy=\"afterInteractive\"\n        />\n      \u003C/body>\n    \u003C/html>\n  );\n}\n","tsx","",[23,97,93],{"__ignoreMap":95},[10,99,100,101,104],{},"If v0 scaffolded a single page with no shared layout, add the same ",[23,102,103],{},"\u003CScript>"," tag directly inside that page's returned JSX instead.",[106,107,108],"tip-box",{},[10,109,110,111,113,114,117],{},"You do not have to write this edit by hand. Paste your script tag into the v0 chat and ask it to add the OperatorStack embed to the root layout with ",[23,112,29],{},". v0 already writes this pattern correctly for other third-party scripts; review the diff to confirm the ",[23,115,116],{},"data-project"," value is your real key before accepting.",[36,119,121],{"id":120},"step-3-drop-in-the-waitlist-widget","Step 3: Drop In the Waitlist Widget",[10,123,124],{},"For a default-styled signup form, add the widget div anywhere in a v0-generated page. No client component boundary needed.",[41,126,128,133,139],{"number":127},"3",[10,129,130],{},[47,131,132],{},"Add the widget container to your page.",[89,134,137],{"className":135,"code":136,"language":94,"meta":95},[92],"// app/page.tsx\nexport default function HomePage() {\n  return (\n    \u003Cmain>\n      \u003Ch1>Join the waitlist\u003C/h1>\n      \u003Cdiv data-os-widget=\"waitlist\">\u003C/div>\n    \u003C/main>\n  );\n}\n",[23,138,136],{"__ignoreMap":95},[10,140,141],{},"OperatorStack finds this div once the script loads and renders the signup form inside a Shadow DOM.",[36,143,145],{"id":144},"step-4-match-v0s-design-system-with-a-custom-form","Step 4: Match v0's Design System With a Custom Form",[10,147,148,149,74],{},"If the default widget does not match the shadcn/ui components v0 already generated, build a custom form with the SDK instead. This needs a client component since it calls ",[23,150,151],{},"window.OperatorStack",[41,153,155,160,166],{"number":154},"4",[10,156,157],{},[47,158,159],{},"Wire up a client component using v0's existing UI primitives.",[89,161,164],{"className":162,"code":163,"language":94,"meta":95},[92],"// app/components/waitlist-form.tsx\n\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\n\nexport function WaitlistForm() {\n  const [email, setEmail] = useState(\"\");\n  const [referralLink, setReferralLink] = useState\u003Cstring | null>(null);\n\n  async function handleSubmit(e: React.FormEvent) {\n    e.preventDefault();\n    const result = await window.OperatorStack.joinWaitlist({ email });\n    window.OperatorStack.trackEvent(\"waitlist_signup\", { source: document.referrer || \"direct\" });\n    const links = window.OperatorStack.getShareLinks(result.referral_code);\n    setReferralLink(links.copy);\n  }\n\n  if (referralLink) {\n    return \u003Cp>You are on the list. Share your link: {referralLink}\u003C/p>;\n  }\n\n  return (\n    \u003Cform onSubmit={handleSubmit} className=\"flex gap-2\">\n      \u003CInput\n        value={email}\n        onChange={(e) => setEmail(e.target.value)}\n        placeholder=\"you@email.com\"\n        required\n      />\n      \u003CButton type=\"submit\">Join waitlist\u003C/Button>\n    \u003C/form>\n  );\n}\n",[23,165,163],{"__ignoreMap":95},[10,167,168,169,172,173,176],{},"Because OperatorStack's default widget is Shadow DOM-isolated and this custom form uses shadcn/ui's ",[23,170,171],{},"Button"," and ",[23,174,175],{},"Input"," directly, both approaches coexist on the same page without style collisions.",[36,178,180],{"id":179},"step-5-test-on-a-deployed-url-not-the-chat-preview","Step 5: Test on a Deployed URL, Not the Chat Preview",[182,183,184],"warning-box",{},[10,185,186],{},"v0's chat preview runs your app in a sandboxed iframe. Third-party script tags do not load reliably inside it, so a waitlist that looks broken in preview may work fine once deployed. Click Deploy (or push the generated repo to your own Vercel project) and test the live URL before assuming the integration failed.",[10,188,189,190,192,193,196],{},"Once deployed, submit a test signup and confirm it appears in your OperatorStack contacts list. If it does not, check that the CORS project URL matches your actual ",[23,191,59],{}," or custom domain, not ",[23,194,195],{},"localhost"," or the v0 editor URL.",[36,198,200],{"id":199},"common-mistakes","Common Mistakes",[10,202,203,206],{},[47,204,205],{},"Testing only in v0's chat preview."," The sandboxed iframe is the single most common cause of \"the waitlist doesn't work\" reports for AI page builders. Always confirm on a deployed URL.",[10,208,209,212,213,215],{},[47,210,211],{},"Forgetting to update the CORS project URL after adding a custom domain."," If you started with the ",[23,214,59],{}," default and later attach a custom domain, add the new domain to your OperatorStack project or signups from the custom domain will be blocked.",[10,217,218,221],{},[47,219,220],{},"Asking v0 to \"build a waitlist\" instead of adding the script tag."," v0 will happily generate a form that posts nowhere. Be specific: ask it to add the OperatorStack script tag and widget div, not to build waitlist logic from scratch.",[223,224,225,232,238,244,250],"faq-section",{},[226,227,229],"faq-item",{"question":228},"Does the waitlist widget show up in v0's chat preview?",[10,230,231],{},"Not reliably. v0's chat preview runs your app in a sandboxed iframe that does not consistently load third-party scripts. Add the script tag as described above, then click Deploy to push to a real Vercel URL before you test signups. The code is correct in preview; the network request just is not.",[226,233,235],{"question":234},"What code does v0 generate that I need to edit?",[10,236,237],{},"v0 apps are Next.js App Router projects by default. You add the OperatorStack script tag to app/layout.tsx, the same file every Next.js app uses for shared UI. If v0 scaffolded a single-file page instead, ask it to add a root layout, or add the script tag directly to that page's return statement.",[226,239,241],{"question":240},"Can I just ask v0 to add the waitlist for me?",[10,242,243],{},"Yes. Paste your script tag into the chat and ask v0 to add it to the root layout with next/script and strategy=\"afterInteractive\". v0 writes idiomatic Next.js, so it will place it correctly. Review the diff before accepting -- confirm the data-project attribute matches your actual project key.",[226,245,247],{"question":246},"Will OperatorStack's styles conflict with v0's shadcn/ui components?",[10,248,249],{},"No. OperatorStack renders inside a Shadow DOM, which isolates its CSS from the rest of the page. It will not inherit or leak styles with the Tailwind and shadcn/ui classes v0 generates, so the widget looks the same regardless of your v0 theme.",[226,251,253],{"question":252},"Does this work if I export the v0 code instead of using v0's own hosting?",[10,254,255],{},"Yes. Whether you deploy through v0's Deploy button, push the generated repo to your own Vercel project, or copy the code into an existing Next.js app, the script tag and SDK calls work identically. OperatorStack has no dependency on how the Next.js app is hosted.",[257,258,259,260],"content-related-articles",{},"\n  ",[261,262,259,266],"contentrelatedcard",{"href":263,"title":264,"description":265},"/blog/how-to/nextjs-integration","OperatorStack Next.js Integration Guide","Add waitlist, analytics, and chat to a Next.js app. Covers App Router layout setup, client components, and SSR guards.",[261,267,259,271],{"href":268,"title":269,"description":270},"/blog/guides/javascript-sdk","OperatorStack JavaScript SDK: All Methods with Examples","Complete reference for joinWaitlist, getShareLinks, trackEvent, and all other SDK methods with runnable examples.",[261,272,276],{"href":273,"title":274,"description":275},"/blog/how-to/set-up-waitlist","How to Set Up a Waitlist in Under 5 Minutes","Step-by-step setup guide for OperatorStack waitlists, including the default widget and custom SDK options.",[277,278],"cta-box",{"href":54,"label":279},"Get Started Free",{"title":95,"searchDepth":281,"depth":281,"links":282},2,[283,284,285,286,287,288],{"id":38,"depth":281,"text":39},{"id":67,"depth":281,"text":68},{"id":120,"depth":281,"text":121},{"id":144,"depth":281,"text":145},{"id":179,"depth":281,"text":180},{"id":199,"depth":281,"text":200},"how-to","2026-07-28",null,"Add a waitlist, analytics, and referral tracking to a v0-generated Next.js app with one script tag. Covers the App Router pattern and the preview-vs-deployed gotcha.",false,"md",[296,298,299,300,301],{"question":228,"answer":297},"Not reliably. v0's chat preview runs your app in a sandboxed iframe that does not consistently load third-party scripts. Add the script tag as described below, then click Deploy to push to a real Vercel URL before you test signups. The code is correct in preview; the network request just is not.",{"question":234,"answer":237},{"question":240,"answer":243},{"question":246,"answer":249},{"question":252,"answer":255},"operatorstack v0,v0 waitlist,add waitlist to v0 app,v0 by vercel waitlist,v0 landing page email capture,ai page builder waitlist",{},true,"Add a waitlist with referral tracking to a v0-generated app. One script tag, zero backend, works with the Next.js code v0 already wrote for you.","OperatorStack v0 Integration: Waitlist in a v0 App","/blog/how-to/operatorstack-v0","5 min","[object Object]","HowTo",{"title":5,"description":292},{"loc":307},"blog/how-to/operatorstack-v0",[],"summary_large_image","8iX4RHWlUYMZbpsbmo8BWBj1Z_qOb1LvuXz9ZiQgvHg",1785259029552]