diff --git a/.playwright-mcp/console-2026-06-04T19-11-21-954Z.log b/.playwright-mcp/console-2026-06-04T19-11-21-954Z.log new file mode 100644 index 0000000..4f9fe86 --- /dev/null +++ b/.playwright-mcp/console-2026-06-04T19-11-21-954Z.log @@ -0,0 +1,4 @@ +[ 5171ms] [INFO] %cDownload the React DevTools for a better development experience: https://react.dev/link/react-devtools font-weight:bold @ http://127.0.0.1:8293/node_modules/.vite/deps/react-dom_client.js?v=2bce18ee:20102 +[ 5524ms] [ERROR] Failed to load resource: the server responded with a status of 404 (Not Found) @ http://127.0.0.1:8293/docs/favicon.ico:0 +[ 5631ms] [ERROR] Failed to load resource: the server responded with a status of 404 (Not Found) @ http://127.0.0.1:8293/docs/api/auth/session:0 +[ 5755ms] [ERROR] Failed to load resource: the server responded with a status of 404 (Not Found) @ http://127.0.0.1:8293/docs/api/auth/session:0 diff --git a/.playwright-mcp/page-2026-06-04T19-11-23-289Z.yml b/.playwright-mcp/page-2026-06-04T19-11-23-289Z.yml new file mode 100644 index 0000000..2ad6e16 --- /dev/null +++ b/.playwright-mcp/page-2026-06-04T19-11-23-289Z.yml @@ -0,0 +1,469 @@ +- generic [active] [ref=e1]: + - generic [ref=e2]: + - banner [ref=e3]: + - generic [ref=e4]: + - button "Search ⌘ K" [ref=e5]: + - img [ref=e6] + - text: Search + - generic [ref=e9]: + - generic [ref=e10]: ⌘ + - generic [ref=e11]: K + - generic [ref=e12]: + - link "Changelog" [ref=e14] [cursor=pointer]: + - /url: /docs/changelog + - link "Support" [ref=e15] [cursor=pointer]: + - /url: /docs/support + - img [ref=e16] + - link "GitHub" [ref=e19] [cursor=pointer]: + - /url: https://github.com/superwall/docs + - img [ref=e20] + - generic [ref=e22]: + - button "SDK" [ref=e23]: + - generic [ref=e24]: SDK + - img [ref=e26] + - link "Dashboard" [ref=e28] [cursor=pointer]: + - /url: /docs/dashboard + - img [ref=e31] + - generic [ref=e33]: Dashboard + - link "Agents" [ref=e34] [cursor=pointer]: + - /url: /docs/agents + - img [ref=e37] + - generic [ref=e40]: Agents + - link "Web Checkout" [ref=e41] [cursor=pointer]: + - /url: /docs/web-checkout + - img [ref=e44] + - generic [ref=e47]: Web Checkout + - link "Integrations" [ref=e48] [cursor=pointer]: + - /url: /docs/integrations + - img [ref=e51] + - generic [ref=e53]: Integrations + - complementary [ref=e54]: + - generic [ref=e56]: + - link "Superwall" [ref=e57] [cursor=pointer]: + - /url: /docs/ + - img "Superwall" [ref=e58] + - button "Collapse Sidebar" [ref=e59]: + - img [ref=e60] + - generic [ref=e64]: + - link "Welcome" [ref=e65] [cursor=pointer]: + - /url: /docs/dashboard + - generic [ref=e66]: Welcome + - paragraph [ref=e67]: + - generic [ref=e68]: Dashboard + - link "Overview" [ref=e69] [cursor=pointer]: + - /url: /docs/dashboard/overview-metrics + - generic [ref=e70]: Overview + - link "Paywalls & Flows" [ref=e71] [cursor=pointer]: + - /url: /docs/dashboard/paywalls + - generic [ref=e72]: Paywalls & Flows + - link "Templates" [ref=e73] [cursor=pointer]: + - /url: /docs/dashboard/templates + - generic [ref=e74]: Templates + - button "Creating Paywalls" [ref=e76]: + - generic [ref=e77]: Creating Paywalls + - img [ref=e78] + - button "Creating Flows" [ref=e81]: + - generic [ref=e82]: Creating Flows + - img [ref=e83] + - link "Web Flows" [ref=e85] [cursor=pointer]: + - /url: /docs/dashboard/guides/web-flows + - generic [ref=e86]: Web Flows + - button "Charts" [ref=e88]: + - generic [ref=e89]: Charts + - img [ref=e90] + - button "Demand Score" [ref=e93]: + - generic [ref=e94]: Demand Score + - img [ref=e95] + - link "Assets" [ref=e97] [cursor=pointer]: + - /url: /docs/dashboard/assets + - generic [ref=e98]: Assets + - button "Campaigns" [ref=e100]: + - generic [ref=e101]: Campaigns + - img [ref=e102] + - link "Adding Products" [ref=e104] [cursor=pointer]: + - /url: /docs/dashboard/products + - generic [ref=e105]: Adding Products + - link "Surveys" [ref=e106] [cursor=pointer]: + - /url: /docs/dashboard/surveys + - generic [ref=e107]: Surveys + - link "Users" [ref=e108] [cursor=pointer]: + - /url: /docs/dashboard/overview-users + - generic [ref=e109]: Users + - link "Subscription Management" [ref=e110] [cursor=pointer]: + - /url: /docs/dashboard/subscription-management + - generic [ref=e111]: Subscription Management + - link "Managing Localization Updates" [ref=e112] [cursor=pointer]: + - /url: /docs/dashboard/overview-localization + - generic [ref=e113]: Managing Localization Updates + - button "Settings" [ref=e115]: + - generic [ref=e116]: Settings + - img [ref=e117] + - link "Creating Projects" [ref=e119] [cursor=pointer]: + - /url: /docs/dashboard/creating-applications + - generic [ref=e120]: Creating Projects + - link "Account Management" [ref=e121] [cursor=pointer]: + - /url: /docs/dashboard/manage-account + - generic [ref=e122]: Account Management + - paragraph [ref=e123]: + - generic [ref=e124]: Guides + - link "Query ClickHouse" [ref=e125] [cursor=pointer]: + - /url: /docs/dashboard/guides/query-clickhouse + - generic [ref=e126]: Query ClickHouse + - link "Superwall Skill" [ref=e127] [cursor=pointer]: + - /url: /docs/dashboard/guides/superwall-skill + - generic [ref=e128]: Superwall Skill + - link "Superwall MCP" [ref=e129] [cursor=pointer]: + - /url: /docs/dashboard/guides/superwall-mcp + - generic [ref=e130]: Superwall MCP + - link "RevenueCat Migration Guide" [ref=e131] [cursor=pointer]: + - /url: /docs/dashboard/guides/migrating-from-revenuecat-to-superwall + - generic [ref=e132]: RevenueCat Migration Guide + - link "Pre-Launch Checklist" [ref=e133] [cursor=pointer]: + - /url: /docs/dashboard/guides/pre-launch-checklist + - generic [ref=e134]: Pre-Launch Checklist + - link "Using Flows for Onboarding" [ref=e135] [cursor=pointer]: + - /url: /docs/dashboard/guides/using-superwall-for-onboarding-flows + - generic [ref=e136]: Using Flows for Onboarding + - link "Showing Unique Paywalls" [ref=e137] [cursor=pointer]: + - /url: /docs/dashboard/guides/tips-paywalls-based-on-placement + - generic [ref=e138]: Showing Unique Paywalls + - link "Abandoned Transaction Paywalls" [ref=e139] [cursor=pointer]: + - /url: /docs/dashboard/guides/tips-abandoned-transaction-paywall + - generic [ref=e140]: Abandoned Transaction Paywalls + - link "First Touch Paywalls" [ref=e141] [cursor=pointer]: + - /url: /docs/dashboard/guides/tips-first-touch-paywall + - generic [ref=e142]: First Touch Paywalls + - link "Feature Gating" [ref=e143] [cursor=pointer]: + - /url: /docs/dashboard/guides/tips-paywalls-feature-gating + - generic [ref=e144]: Feature Gating + - link "Custom Actions" [ref=e145] [cursor=pointer]: + - /url: /docs/dashboard/guides/tips-using-custom-actions + - generic [ref=e146]: Custom Actions + - link "Presenting Paywalls from One Another" [ref=e147] [cursor=pointer]: + - /url: /docs/dashboard/guides/presenting-paywalls-from-one-another + - generic [ref=e148]: Presenting Paywalls from One Another + - link "Creating a Countdown Timer" [ref=e149] [cursor=pointer]: + - /url: https://superwall.com/blog/creating-countdown-timers-in-paywalls + - generic [ref=e150]: Creating a Countdown Timer + - link "Managing Connectivity Issues" [ref=e151] [cursor=pointer]: + - /url: https://superwall.com/blog/handling-connectivity-interruptions-with-superwall + - generic [ref=e152]: Managing Connectivity Issues + - link "Building Mult-Tier Paywalls" [ref=e153] [cursor=pointer]: + - /url: https://superwall.com/blog/how-to-build-multi-tiered-paywalls + - generic [ref=e154]: Building Mult-Tier Paywalls + - article [ref=e155]: + - heading "Web Flows" [level=1] [ref=e156] + - paragraph [ref=e157]: Build web-to-app flows that qualify campaign traffic, personalize offers, and activate users before sending them to your app. + - generic [ref=e158]: + - button "Copy Markdown" [ref=e159]: + - img [ref=e160] + - text: Copy Markdown + - button "Open" [ref=e163]: + - text: Open + - img [ref=e164] + - generic [ref=e166]: + - paragraph [ref=e167]: Web Flows are web-based acquisition and conversion flows for web-to-app growth. Use them to qualify users from paid campaigns, collect preferences, personalize the path ahead, attribute traffic sources, present web checkout, and then send users to download or open your app. + - paragraph [ref=e170]: + - text: Web Flows are part of Superwall's + - link "Flows" [ref=e171] [cursor=pointer]: + - /url: /docs/dashboard/dashboard-creating-flows/getting-started + - text: feature, adapted for web-to-app journeys. They are designed for the people running growth campaigns. If you are building in-app onboarding after install, start with app Flows. If you are sending traffic from Meta, TikTok, search, influencers, lifecycle email, or landing pages into a web-to-app journey, start here. + - generic [ref=e172]: + - img [ref=e174] + - paragraph [ref=e177]: "Web funnels are a function of Web Flows. In Superwall, the product capability is Web Flows: the same underlying editor and navigation system as Flows, used for web-based acquisition, ad attribution, targeting, web checkout, and app handoff." + - paragraph [ref=e178]: Here is an example of a live Web Flow built from the flow shown above. The user enters from a web URL, moves through the personalized steps, and then continues toward checkout, app download, or app activation. + - heading "Web Flows vs. app Flows" [level=2] [ref=e180]: + - link "Web Flows vs. app Flows" [ref=e181] [cursor=pointer]: + - /url: "#web-flows-vs-app-flows" + - img [ref=e182] + - paragraph [ref=e185]: "Web Flows and app Flows share editor concepts, but they solve different jobs:" + - table [ref=e187]: + - rowgroup [ref=e188]: + - row "Use case App Flows Web Flows" [ref=e189]: + - columnheader "Use case" [ref=e190] + - columnheader "App Flows" [ref=e191] + - columnheader "Web Flows" [ref=e192] + - rowgroup [ref=e193]: + - row "Primary audience Product and app teams Growth and marketing teams" [ref=e194]: + - cell "Primary audience" [ref=e195] + - cell "Product and app teams" [ref=e196] + - cell "Growth and marketing teams" [ref=e197] + - row "User context User is already in the app User starts on the web before app activation" [ref=e198]: + - cell "User context" [ref=e199] + - cell "User is already in the app" [ref=e200] + - cell "User starts on the web before app activation" [ref=e201] + - row "Common entry point SDK placement, app install, feature moment, account setup Ad click, social link, search campaign, influencer link, email, landing page" [ref=e202]: + - cell "Common entry point" [ref=e203] + - cell "SDK placement, app install, feature moment, account setup" [ref=e204] + - cell "Ad click, social link, search campaign, influencer link, email, landing page" [ref=e205] + - row "Main goal Onboard, educate, collect preferences, request permissions, set user attributes Qualify traffic, personalize the offer, track attribution, convert on web, send to app" [ref=e206]: + - cell "Main goal" [ref=e207] + - cell "Onboard, educate, collect preferences, request permissions, set user attributes" [ref=e208] + - cell "Qualify traffic, personalize the offer, track attribution, convert on web, send to app" [ref=e209] + - row "Technical focus App permissions, user attributes, native app behavior Campaign URLs, query parameters, audience filters, web checkout, attribution" [ref=e210]: + - cell "Technical focus" [ref=e211] + - cell "App permissions, user attributes, native app behavior" [ref=e212] + - cell "Campaign URLs, query parameters, audience filters, web checkout, attribution" [ref=e213] + - heading "When to use Web Flows" [level=2] [ref=e214]: + - link "When to use Web Flows" [ref=e215] [cursor=pointer]: + - /url: "#when-to-use-web-flows" + - img [ref=e216] + - paragraph [ref=e219]: "Use Web Flows when the first meaningful step in the user journey happens on the web:" + - list [ref=e220]: + - listitem [ref=e221]: + - strong [ref=e222]: Paid acquisition flows + - text: that start from Meta, TikTok, Google, social, search, influencer links, email, or a campaign landing page. + - listitem [ref=e223]: + - strong [ref=e224]: Quiz-style onboarding + - text: that collects goals, experience level, preferences, or intent before app install. + - listitem [ref=e225]: + - strong [ref=e226]: Personalized plan builders + - text: that branch users into different recommendations before checkout or download. + - listitem [ref=e227]: + - strong [ref=e228]: Web checkout flows + - text: that let users purchase on the web, then redeem or activate access in your app. + - listitem [ref=e229]: + - strong [ref=e230]: Web-to-app funnel workflows + - text: where Web Flows power the flow, checkout, targeting, testing, and app handoff from Superwall. + - heading "How Web Flows work" [level=2] [ref=e231]: + - link "How Web Flows work" [ref=e232] [cursor=pointer]: + - /url: "#how-web-flows-work" + - img [ref=e233] + - paragraph [ref=e236]: "A Web Flow combines campaign routing, flow screens, and web checkout:" + - list [ref=e237]: + - listitem [ref=e238]: + - link "Web Checkout links" [ref=e239] [cursor=pointer]: + - /url: /docs/web-checkout/web-checkout-creating-campaigns-to-show-paywalls + - text: make each campaign placement available as a URL, such as + - code [ref=e240]: https://yourapp.superwall.app/start + - text: . + - listitem [ref=e241]: Flow-style navigation defines the multi-step experience, including pages, routes, branching, transitions, and analytics. + - listitem [ref=e242]: Campaigns, audience filters, and query string parameters let you target and personalize the flow for each traffic source. + - paragraph [ref=e243]: "When a user visits the URL, Superwall presents the paywall or Flow assigned to that placement. From there, the Flow behaves like any other route-based Flow: buttons can move users between pages, routes can branch based on conditions, and Flow Journey analytics can show where users drop off." + - paragraph [ref=e244]: + - text: If the Web Flow includes a purchase, use + - link "Web Checkout" [ref=e245] [cursor=pointer]: + - /url: /docs/web-checkout + - text: to sell subscriptions or one-time products through Stripe. After checkout, use your configured + - link "post-purchase behavior" [ref=e246] [cursor=pointer]: + - /url: /docs/web-checkout/web-checkout-configuring-stripe-keys-and-settings#post-purchase-behavior + - text: to send the user to your app, a redemption flow, or a custom redirect URL. + - heading "Create a Web Flow" [level=2] [ref=e247]: + - link "Create a Web Flow" [ref=e248] [cursor=pointer]: + - /url: "#create-a-web-flow" + - img [ref=e249] + - generic [ref=e252]: + - img [ref=e254] + - paragraph [ref=e257]: + - text: Need help setting up your first web funnel with Web Flows? We have options to help. Reach out to us at + - link "support@superwall.com" [ref=e258] [cursor=pointer]: + - /url: mailto:support@superwall.com + - text: . + - heading "1. Set up Web Checkout" [level=3] [ref=e259]: + - link "1. Set up Web Checkout" [ref=e260] [cursor=pointer]: + - /url: "#1-set-up-web-checkout" + - img [ref=e261] + - paragraph [ref=e264]: "Create and configure your Web Checkout app first, even if your first version only sends users to download the app:" + - list [ref=e265]: + - listitem [ref=e266]: + - link "Create a Web Checkout app" [ref=e267] [cursor=pointer]: + - /url: /docs/web-checkout/web-checkout-creating-an-app + - text: . + - listitem [ref=e268]: + - link "Configure Stripe keys and settings" [ref=e269] [cursor=pointer]: + - /url: /docs/web-checkout/web-checkout-configuring-stripe-keys-and-settings + - text: . + - listitem [ref=e270]: + - link "Add Stripe products" [ref=e271] [cursor=pointer]: + - /url: /docs/web-checkout/web-checkout-adding-a-stripe-product + - text: if the flow will include a purchase. + - listitem [ref=e272]: + - link "Create a campaign and placement URL" [ref=e273] [cursor=pointer]: + - /url: /docs/web-checkout/web-checkout-creating-campaigns-to-show-paywalls + - text: . + - heading "2. Plan campaign targeting" [level=3] [ref=e274]: + - link "2. Plan campaign targeting" [ref=e275] [cursor=pointer]: + - /url: "#2-plan-campaign-targeting" + - img [ref=e276] + - paragraph [ref=e279]: "Decide how each traffic source should enter the flow. You can use separate placements for major campaigns, or use query string parameters for campaign details:" + - figure [ref=e280]: + - button "Copy Text" [ref=e282]: + - img [ref=e283] + - region [ref=e286]: + - code [ref=e288]: https://yourapp.superwall.app/start?utm_source=meta&utm_campaign=python-beginner&utm_content=video-a + - paragraph [ref=e289]: + - text: Use those parameters in + - link "audience filters" [ref=e290] [cursor=pointer]: + - /url: /docs/dashboard/dashboard-campaigns/campaigns-audience#using-user-properties-or-placement-parameters + - text: or as + - link "paywall variables" [ref=e291] [cursor=pointer]: + - /url: /docs/using-placement-parameters + - text: to change copy, route users into different branches, or compare performance by source. + - heading "3. Build the flow screens" [level=3] [ref=e292]: + - link "3. Build the flow screens" [ref=e293] [cursor=pointer]: + - /url: "#3-build-the-flow-screens" + - img [ref=e294] + - paragraph [ref=e297]: "Open the paywall assigned to the web placement and build the Web Flow:" + - list [ref=e298]: + - listitem [ref=e299]: + - text: Add a + - link "Navigation element" [ref=e300] [cursor=pointer]: + - /url: /docs/dashboard/dashboard-creating-paywalls/paywall-editor-navigation-component + - text: . + - listitem [ref=e301]: Switch the editor to Flow view. + - listitem [ref=e302]: Add pages for the flow steps, such as welcome, goals, preferences, commitment, offer, checkout, and app handoff. + - listitem [ref=e303]: + - text: Connect pages with + - link "routes" [ref=e304] [cursor=pointer]: + - /url: /docs/dashboard/dashboard-creating-flows/linking-pages + - text: . + - listitem [ref=e305]: + - text: Use + - link "conditional branching" [ref=e306] [cursor=pointer]: + - /url: /docs/dashboard/dashboard-creating-flows/how-flows-are-structured#branching + - text: to personalize the path based on what the user selects. + - paragraph [ref=e307]: + - text: For the full editor walkthrough, start with + - link "Getting Started with Flows" [ref=e308] [cursor=pointer]: + - /url: /docs/dashboard/dashboard-creating-flows/getting-started + - text: . + - heading "4. Design the web-to-app handoff" [level=3] [ref=e309]: + - link "4. Design the web-to-app handoff" [ref=e310] [cursor=pointer]: + - /url: "#4-design-the-web-to-app-handoff" + - img [ref=e311] + - paragraph [ref=e314]: "The final pages should make the next step clear. Depending on your setup, that might be:" + - list [ref=e315]: + - listitem [ref=e316]: + - text: Starting + - link "Stripe checkout" [ref=e317] [cursor=pointer]: + - /url: /docs/web-checkout/web-checkout-testing-purchases + - text: . + - listitem [ref=e318]: Redirecting to the App Store, another app download page, or your own install instructions. + - listitem [ref=e319]: Opening your app with a deep link or universal link. + - listitem [ref=e320]: Sending the user through Superwall's web checkout redemption flow. + - listitem [ref=e321]: Redirecting to your own account creation or activation page. + - paragraph [ref=e322]: + - text: If you are using Redeem mode, make sure your app is ready to handle the post-checkout deep link. See + - link "SDK setup for Web Checkout" [ref=e323] [cursor=pointer]: + - /url: /docs/web-checkout/web-checkout-sdk-setup + - text: . + - heading "Attribute and target campaign traffic" [level=2] [ref=e324]: + - link "Attribute and target campaign traffic" [ref=e325] [cursor=pointer]: + - /url: "#attribute-and-target-campaign-traffic" + - img [ref=e326] + - paragraph [ref=e329]: "For growth teams, the Web Flow URL is part of the campaign. Treat each URL as a trackable entry point:" + - list [ref=e330]: + - listitem [ref=e331]: Use UTM parameters for traffic source, campaign, ad set, creative, and keyword. + - listitem [ref=e332]: + - text: Pass known identifiers, such as + - code [ref=e333]: email + - text: or + - code [ref=e334]: app_user_id + - text: ", when you already have them." + - listitem [ref=e335]: Use audience filters to show different flows or offers by placement parameter. + - listitem [ref=e336]: Use paywall variables to personalize headlines, quiz copy, offer framing, and handoff pages. + - paragraph [ref=e337]: This keeps the acquisition workflow separate from in-app onboarding. A marketer can reason about traffic sources, targeting, creative, checkout, and drop-off without needing to think through native permission prompts or app state. + - heading "What is different from app Flows?" [level=2] [ref=e338]: + - link "What is different from app Flows?" [ref=e339] [cursor=pointer]: + - /url: "#what-is-different-from-app-flows" + - img [ref=e340] + - paragraph [ref=e343]: "Most editor behavior works the same way on the web. The main difference is context: a Web Flow runs in a browser, before the app can use native app capabilities." + - paragraph [ref=e344]: That means app-only tap behaviors will not work in a Web Flow. Avoid actions that require the installed app or native permissions, such as requesting location, camera, contacts, photos, or notification permissions. If you need those permissions, ask for them later inside the app after the user installs or opens it. + - paragraph [ref=e345]: "Web Flows are best for web-safe steps:" + - list [ref=e346]: + - listitem [ref=e347]: Multi-step education and onboarding. + - listitem [ref=e348]: Multiple-choice questions. + - listitem [ref=e349]: Personalization and branching. + - listitem [ref=e350]: Ad attribution and campaign-specific targeting. + - listitem [ref=e351]: Web checkout. + - listitem [ref=e352]: Campaign-specific messaging. + - listitem [ref=e353]: App download, app open, or account activation calls to action. + - heading "Track performance" [level=2] [ref=e354]: + - link "Track performance" [ref=e355] [cursor=pointer]: + - /url: "#track-performance" + - img [ref=e356] + - paragraph [ref=e359]: + - text: For route-based Flows, Superwall tracks Flow page views so you can inspect the user journey and identify drop-off. See + - link "Flow Journey analytics" [ref=e360] [cursor=pointer]: + - /url: /docs/dashboard/dashboard-creating-flows/analytics + - text: for details. + - paragraph [ref=e361]: + - text: For acquisition campaigns, add query string parameters to the Web Checkout link and use them in audience filters or paywall variables. This is useful for paid ads, creator campaigns, lifecycle email, and other sources where you want the flow to adapt to the traffic source. See + - link "query string parameters in Web Checkout links" [ref=e362] [cursor=pointer]: + - /url: /docs/web-checkout/web-checkout-creating-campaigns-to-show-paywalls#how-query-string-parameters-work + - text: . + - heading "Related docs" [level=2] [ref=e363]: + - link "Related docs" [ref=e364] [cursor=pointer]: + - /url: "#related-docs" + - img [ref=e365] + - list [ref=e368]: + - listitem [ref=e369]: + - link "Getting Started with Flows" [ref=e370] [cursor=pointer]: + - /url: /docs/dashboard/dashboard-creating-flows/getting-started + - listitem [ref=e371]: + - link "How Flows are Structured" [ref=e372] [cursor=pointer]: + - /url: /docs/dashboard/dashboard-creating-flows/how-flows-are-structured + - listitem [ref=e373]: + - link "Linking Pages" [ref=e374] [cursor=pointer]: + - /url: /docs/dashboard/dashboard-creating-flows/linking-pages + - listitem [ref=e375]: + - link "Web Checkout" [ref=e376] [cursor=pointer]: + - /url: /docs/web-checkout + - listitem [ref=e377]: + - link "Web Checkout Links" [ref=e378] [cursor=pointer]: + - /url: /docs/web-checkout/web-checkout-creating-campaigns-to-show-paywalls + - generic [ref=e380]: + - paragraph [ref=e381]: How is this guide? + - button "Good" [ref=e382]: + - img [ref=e383] + - text: Good + - button "Bad" [ref=e385]: + - img [ref=e386] + - text: Bad + - generic [ref=e388]: + - link "Tips Practical advice for building effective flows." [ref=e389] [cursor=pointer]: + - /url: /docs/dashboard/dashboard-creating-flows/tips + - generic [ref=e390]: + - img [ref=e391] + - paragraph [ref=e393]: + - generic [ref=e394]: Tips + - paragraph [ref=e395]: Practical advice for building effective flows. + - link "Charts View charts detailing important metrics about your app's subscription performance, paywalls, users, and revenue." [ref=e396] [cursor=pointer]: + - /url: /docs/dashboard/charts + - generic [ref=e397]: + - img [ref=e398] + - paragraph [ref=e400]: + - generic [ref=e401]: Charts + - paragraph [ref=e402]: View charts detailing important metrics about your app's subscription performance, paywalls, users, and revenue. + - generic [ref=e403]: + - heading "On this page" [level=3] [ref=e404]: + - img [ref=e405] + - text: On this page + - generic [ref=e409]: + - link "Web Flows vs. app Flows" [ref=e410] [cursor=pointer]: + - /url: "#web-flows-vs-app-flows" + - link "When to use Web Flows" [ref=e411] [cursor=pointer]: + - /url: "#when-to-use-web-flows" + - link "How Web Flows work" [ref=e412] [cursor=pointer]: + - /url: "#how-web-flows-work" + - link "Create a Web Flow" [ref=e413] [cursor=pointer]: + - /url: "#create-a-web-flow" + - link "1. Set up Web Checkout" [ref=e414] [cursor=pointer]: + - /url: "#1-set-up-web-checkout" + - link "2. Plan campaign targeting" [ref=e415] [cursor=pointer]: + - /url: "#2-plan-campaign-targeting" + - link "3. Build the flow screens" [ref=e416] [cursor=pointer]: + - /url: "#3-build-the-flow-screens" + - link "4. Design the web-to-app handoff" [ref=e417] [cursor=pointer]: + - /url: "#4-design-the-web-to-app-handoff" + - link "Attribute and target campaign traffic" [ref=e418] [cursor=pointer]: + - /url: "#attribute-and-target-campaign-traffic" + - link "What is different from app Flows?" [ref=e419] [cursor=pointer]: + - /url: "#what-is-different-from-app-flows" + - link "Track performance" [ref=e420] [cursor=pointer]: + - /url: "#track-performance" + - link "Related docs" [ref=e421] [cursor=pointer]: + - /url: "#related-docs" + - iframe [ref=e422]: + - button "Open chat" [ref=f1e3] [cursor=pointer]: + - img [ref=f1e4] \ No newline at end of file diff --git a/content/docs/agents/hosted-machines.mdx b/content/docs/agents/hosted-machines.mdx deleted file mode 100644 index 59b665d..0000000 --- a/content/docs/agents/hosted-machines.mdx +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: "Hosted Machines" -description: "Manage hosted machines for Superwall Agents work." ---- - -Superwall Agents runs from [superwall.ai](https://superwall.ai) against a hosted machine managed by Superwall. The active machine is where chat tools, Files, Terminal, automations, and webhook-triggered work execute. - - - A Machines settings page showing a hosted machine with status, version, activate, update, rename, and delete actions - - -Image to add: a screenshot of Settings -> Machine showing the active hosted machine, the Add Machine button, the status indicator, and machine actions. - -### When to use hosted machines - -Hosted machines are useful for: - -- Starting from the browser. -- Running agent work without relying on your computer. -- Isolating agent work from your computer. -- Scheduling automations and webhook-triggered workflows. -- Keeping Files and Terminal attached to the same remote environment. - -Hosted machines have their own filesystem and environment. They cannot see files on your laptop unless those files are uploaded, cloned, or otherwise made available to the machine. - -### Machine settings - -Open **Settings -> Machine** to: - -- Add a hosted machine. -- Activate a machine. -- Reconnect to the active machine. -- Update a hosted machine. -- Rename a hosted machine. -- Delete a hosted machine. - -The active machine determines where chat tools, Terminal, Files, automations, and webhook-triggered work run. - -### Working with code and files - -If you want the agent to inspect code, make the repo available to the hosted machine first. Common paths are: - -- Connect GitHub. -- Clone the repository from Terminal. -- Upload specific files in the chat composer. -- Use webhooks or integrations to send files into the chat. - -Then ask for the specific work: - -```text -Inspect the connected iOS repo and verify our Superwall SDK integration. -``` - -For analysis workflows, make the business question explicit: - -```text -Analyze the latest experiment results and generate a weekly report. -``` - -### Data and privacy - -Hosted machines store their own machine state in the hosted environment, while account state lives in the hosted control plane. - -Do not assume a hosted machine has access to a file or secret on your laptop. Upload the file, connect the repository, or add the environment variable in Settings before asking the agent to use it. diff --git a/content/docs/dashboard/dashboard-creating-paywalls/meta.json b/content/docs/dashboard/dashboard-creating-paywalls/meta.json index 44a2421..e539777 100644 --- a/content/docs/dashboard/dashboard-creating-paywalls/meta.json +++ b/content/docs/dashboard/dashboard-creating-paywalls/meta.json @@ -2,6 +2,8 @@ "title": "Creating Paywalls", "pages": [ "paywall-editor-overview", + "paywall-editor-ai-chat", + "paywall-editor-mcp", "paywall-editor-layout", "paywall-editor-styling-elements", "paywall-editor-local-resources", diff --git a/content/docs/dashboard/dashboard-creating-paywalls/paywall-editor-ai-chat.mdx b/content/docs/dashboard/dashboard-creating-paywalls/paywall-editor-ai-chat.mdx new file mode 100644 index 0000000..275441e --- /dev/null +++ b/content/docs/dashboard/dashboard-creating-paywalls/paywall-editor-ai-chat.mdx @@ -0,0 +1,84 @@ +--- +title: "AI Chat Builder" +description: "Use AI Chat in the paywall editor to build, inspect, and refine paywalls with natural language." +--- + +AI Chat is built into the paywall editor. Use it when you want Superwall to build a new paywall section, change copy, adjust layout, wire up products, add variables, or inspect why part of a design is not behaving the way you expect. + +![AI Chat sidebar open in the paywall editor](/images/paywall-editor-ai-chat-sidebar-placeholder.jpg) + +To get an idea of what AI Chat can do, build, or modify, try choosing one of the starter prompts: + +![AI Chat starter prompt examples](/images/ai_chat_examples.jpg) + +## Open AI Chat + +Open a paywall, then click **AI Chat** in the editor sidebar. + +AI Chat works on the paywall currently open in your browser. It can read the editor state, inspect the layout tree, look at screenshots, and make changes through the same editor tools you use manually. + +## Ask for a change + +Type what you want the assistant to do, then press **Enter** or click **Send**. Use **Shift + Enter** for a new line. + +Good prompts include the specific page, element, product, or behavior you want changed: + +```txt +Create a three-plan product selector with annual highlighted, monthly secondary, and lifetime below it. +``` + +```txt +Make this onboarding paywall feel more premium, keep the same products, and add a short trust row under the CTA. +``` + +```txt +Find why the restore button looks off-center on small devices and fix it. +``` + +AI Chat can make multiple tool calls during one response. You can watch tool activity in the chat while the editor updates. + +## Give the chat context + +Select one or more elements on the canvas or in the **Layout** tab before sending a message. The selected elements appear above the composer and are sent as context with your prompt. + +![AI Chat composer showing selected element context and an attached image](/images/paywall-editor-ai-chat-context-placeholder.jpg) + +You can also attach images by clicking the image button, dragging an image into the chat, or pasting an image from your clipboard. Supported image types are JPEG, PNG, GIF, and WebP. + +Use image attachments when you want the assistant to match a design, compare against a reference, or critique a visual result. + +## Manage chats + +AI Chat keeps separate chat sessions for the current application and paywall. + +- **New Chat:** Starts a fresh conversation for the current paywall. +- **Chat tabs:** Switch between previous conversations. +- **Copy Session ID:** Copies a chat session ID from the tab context menu. +- **Import Chat:** Imports a chat by session ID. +- **Archive Chat:** Removes a chat from the current session list. +- **Layout toggle:** Switches between the full-width chat and the two-panel view. + +Only one chat run can be active at a time. If a run is taking too long or moving in the wrong direction, click **Stop**. + +## Review and publish + +AI Chat changes the draft in the editor. Review the result before publishing: + +1. Use the canvas and device preview to check layout, copy, and interactions. +2. Use **History** or undo if you want to roll back a change. +3. Preview on device when purchase, navigation, permission, or callback behavior matters. +4. Click **Publish** when the draft is ready to go live. + + +AI Chat does not publish for you. Changes are only live after you publish the paywall. + + +## What AI Chat can edit + +AI Chat uses the editor's live tool surface, so it can work across most of the same paywall areas you can edit manually: + +- **Build and refine the design:** AI Chat can edit layout, element hierarchy, names, text, styles, ordering, images, and videos. It can also inspect screenshots and computed styles when you ask it to diagnose or polish a visual result. +- **Connect paywall data:** AI Chat can work with products and product references, theme tokens, style modes, token bindings, variables, current values, initial values, and dynamic values. Use it when a design needs to stay connected to the same data and products you would wire up manually. +- **Configure behavior and flows:** AI Chat can update tap behaviors, purchase actions, navigation actions, haptics, animations, routes, transitions, branching, localization, and trial-started notifications. It can also use search and find/replace when a change needs to touch more than one element. + +AI Chat is best for iterative building and refinement. For account-level setup, such as creating applications, campaigns, products, or webhooks, use the [Superwall MCP](/dashboard/guides/superwall-mcp) or [Superwall Skill](/dashboard/guides/superwall-skill). To connect your own external agent directly to the open editor, use [Editor MCP](/dashboard/dashboard-creating-paywalls/paywall-editor-mcp). diff --git a/content/docs/dashboard/dashboard-creating-paywalls/paywall-editor-mcp.mdx b/content/docs/dashboard/dashboard-creating-paywalls/paywall-editor-mcp.mdx new file mode 100644 index 0000000..3126859 --- /dev/null +++ b/content/docs/dashboard/dashboard-creating-paywalls/paywall-editor-mcp.mdx @@ -0,0 +1,107 @@ +--- +title: "Connect an Agent with MCP" +sidebarTitle: "Editor MCP" +description: "Connect Claude Code, Codex, Cursor, or another MCP-compatible agent to the paywall currently open in the Superwall editor." +--- + +Editor MCP lets an external AI agent control the paywall currently open in your browser. Use it when you want to keep working in Claude Code, Codex, Cursor, or another MCP-compatible agent while giving that agent live access to the editor. + +![Editor MCP connection panel showing install options and a pairing code](/images/paywall-editor-agent-connect.jpg) + + +Editor MCP is different from the [Superwall MCP](/dashboard/guides/superwall-mcp). The Superwall MCP manages account resources such as projects, applications, campaigns, products, and paywalls. Editor MCP controls the one paywall editor session open in your browser. + + +## Connect an agent + +1. Open the paywall you want the agent to edit. +2. Open **AI Chat** in the editor sidebar. +3. Click the agent connection pill. +4. Choose **Skill** or **MCP**. +5. Copy the install command shown in the editor. +6. Paste the pairing prompt into your agent. + +If you choose **Skill**, the editor shows: + +```bash +npx skills add superwall/skills +``` + +Then paste the generated prompt into your agent: + +```txt +Connect to the Superwall editor using the skill with pairing code: XXXX-XXXX-XXXX +``` + +If you choose **MCP**, select your client first. The editor generates the right command or configuration for Claude Code, Codex, Cursor, or another MCP client. Use the command shown in the editor because it includes the correct Editor MCP URL for your environment. + +The MCP prompt looks like this: + +```txt +Connect to the superwall-editor MCP with pairing code: XXXX-XXXX-XXXX +``` + +## Connected state + +After the agent attaches, the connection pill shows the connected client and tool activity. + +For example, this is what it looks like when an agent uses the pairing code to connect to the editor: + +![Example agent connecting to the Superwall editor over MCP](/images/ai_mcp_claude_connecting.jpg) + +After the connection completes, the editor shows the attached client and recent tool activity. + +![Editor MCP connection panel showing a connected agent and tool activity](/images/paywall-editor-agent-connected.jpg) + +The editor keeps the browser session open while the page is open. From the connection panel you can: + +- **Disconnect Agent:** Release the current agent while keeping the editor session available for another pairing. +- **End Session:** Close the browser editor session and invalidate the pairing code. + +Only one external controller can be attached to an editor session at a time. Disconnect the current agent before attaching a different one. + +## What agents can do + +Attached agents receive the editor's live tool list. The exact list can change as the editor evolves, but today agents can: + +- **Inspect and edit the paywall:** Agents can read the current paywall, selected elements, children, navigation pages, computed styles, and screenshots. They can then update text, styles, names, node order, hierarchy, or write native paywall HTML directly into the editor. +- **Work with content and resources:** Agents can upload image and video assets, create and edit products, manage style tokens, and update variables, variable values, and dynamic values. They can also add localization languages, run AI localization, and configure trial-started notifications. +- **Configure behavior and advanced flows:** Agents can add or clear tap behaviors such as purchase, restore, close, open URL, set state, select product, navigate page, request permission, request callback, scroll, focus input, delay, animation, and haptics. They can also edit routes, transitions, branches, advanced native elements, and use search or find/replace to make broader changes. + +## Session limits + +Editor MCP uses pairing codes and session tokens rather than your account-level MCP OAuth flow. + +| Limit | Behavior | +| --- | --- | +| Pairing code lifetime | Pairing codes expire after 10 minutes. | +| Editor session lifetime | Browser editor sessions expire after 24 hours. | +| Tool timeout | Tool calls time out after 30 seconds. | +| Browser reconnect | The browser has a short reconnect window if the page refreshes or briefly disconnects. | +| Failed pair attempts | Too many wrong pairing codes end the session. | + +If a pairing code expires, open the connection panel again and use the new code. + +## Troubleshooting + +### The agent cannot attach + +Check that the paywall editor tab is still open, the pairing code has not expired, and the agent is using the prompt from the current connection panel. + +### The session says another controller is connected + +Only one controller can be attached. Click **Disconnect Agent**, then attach the new agent with the latest pairing code. + +### Tool calls fail after a browser refresh + +Wait a moment for the editor to reconnect. If calls still fail, end the session and create a new connection from the editor. + +### The agent edited the wrong thing + +Use the editor's undo and history tools to review or roll back changes. Select the exact element you want changed before sending the next prompt so the agent receives that selection as context. + +## Related + +- [AI Chat Builder](/dashboard/dashboard-creating-paywalls/paywall-editor-ai-chat): Use Superwall's built-in chat builder inside the editor. +- [Superwall MCP](/dashboard/guides/superwall-mcp): Manage account resources from external AI tools. +- [Superwall Skill](/dashboard/guides/superwall-skill): Give coding agents Superwall docs, API helpers, and SDK integration guidance. diff --git a/content/docs/dashboard/dashboard-creating-paywalls/paywall-editor-overview.mdx b/content/docs/dashboard/dashboard-creating-paywalls/paywall-editor-overview.mdx index 039ddec..c173f27 100644 --- a/content/docs/dashboard/dashboard-creating-paywalls/paywall-editor-overview.mdx +++ b/content/docs/dashboard/dashboard-creating-paywalls/paywall-editor-overview.mdx @@ -23,6 +23,15 @@ The Paywall Editor consists of 3 sections: 2. **[Device Preview](/dashboard/dashboard-creating-paywalls/paywall-editor-previewing) \-** An interactive preview of your paywall on a mock device. 3. **Component Editor \-** Fully customize components, use variables and more on your paywall. +### Building with AI + +The editor also includes two AI-assisted ways to build and refine paywalls: + +- **[AI Chat Builder](/dashboard/dashboard-creating-paywalls/paywall-editor-ai-chat):** Use the built-in chat to ask Superwall to create sections, update layouts, wire products, inspect screenshots, or refine the current draft. +- **[Editor MCP](/dashboard/dashboard-creating-paywalls/paywall-editor-mcp):** Connect Claude Code, Codex, Cursor, or another MCP-compatible agent to the paywall currently open in your browser. + +Both options edit the same draft you see in the editor. Review the result and click **Publish** when you are ready to make it live. + ### Starting with a Template On the Superwall dashboard under **Paywalls**, click **\+ New Paywall** and select **Use Template**: diff --git a/content/docs/dashboard/guides/superwall-mcp.mdx b/content/docs/dashboard/guides/superwall-mcp.mdx index 4ec1ed0..9b1cea9 100644 --- a/content/docs/dashboard/guides/superwall-mcp.mdx +++ b/content/docs/dashboard/guides/superwall-mcp.mdx @@ -9,6 +9,10 @@ The Superwall MCP lets AI agents manage your Superwall account through the [Mode This is different from [Superwall Agents](/agents), which is the Superwall AI workspace for chats, analysis, automations, webhooks, and hosted machine work. The Superwall MCP is focused on giving external AI tools access to your Superwall account to create and manage resources. If you also want live docs and SDK integration guidance, use the [Superwall Skill](/dashboard/guides/superwall-skill). + +If you want an agent to edit the paywall currently open in the visual editor, use [Editor MCP](/dashboard/dashboard-creating-paywalls/paywall-editor-mcp) instead. Editor MCP uses a pairing code from the open paywall editor and exposes live editor tools for that single browser session. + + ## Installation Add the Superwall MCP to your platform of choice using the URL `https://superwall-mcp.superwall.com/mcp`. You'll be prompted to log in to your Superwall account on first use. @@ -63,6 +67,8 @@ The Superwall MCP can manage nearly everything you'd normally do in the dashboar - **Campaigns** — set up simple campaigns that show a paywall to 100% of users, or create advanced campaigns with A/B testing, holdout groups, and automatic optimization. - **Webhooks** — create and manage webhook endpoints, inspect event deliveries, rotate secrets, and retry failed deliveries. +It does not directly control the live paywall editor canvas. For live design edits, use [AI Chat Builder](/dashboard/dashboard-creating-paywalls/paywall-editor-ai-chat) inside the editor or connect an external agent with [Editor MCP](/dashboard/dashboard-creating-paywalls/paywall-editor-mcp). + ## Quick setup You can use the Superwall MCP to go from zero to a fully working paywall setup without ever opening the dashboard. Just ask your AI agent to set up Superwall for your app. You can give it your app name, platform, bundle ID, and store product IDs, and it can create the project, application, products, paywall, and campaign for you. @@ -73,4 +79,6 @@ When the agent creates an application, it returns a `public_api_key`. That's wha - [Superwall Agents](/agents): AI workspace for Superwall analysis with connected tooling, automations, webhooks, and hosted machines. - [Superwall Skill](/dashboard/guides/superwall-skill): Recommended if you want docs access, guided SDK integration, and account management in one tool. +- [Editor MCP](/dashboard/dashboard-creating-paywalls/paywall-editor-mcp): Connect an external agent to the paywall currently open in the editor. +- [AI Chat Builder](/dashboard/dashboard-creating-paywalls/paywall-editor-ai-chat): Build and refine paywalls with Superwall's built-in editor chat. - [Vibe Coding](/sdk/guides/vibe-coding): Overview of the AI tools available for working with Superwall. diff --git a/content/docs/dashboard/guides/superwall-skill.mdx b/content/docs/dashboard/guides/superwall-skill.mdx index 831da69..b07932e 100644 --- a/content/docs/dashboard/guides/superwall-skill.mdx +++ b/content/docs/dashboard/guides/superwall-skill.mdx @@ -9,6 +9,10 @@ The [Superwall Skill](https://github.com/superwall/skills) is a set of [Agent Sk This is different from [Superwall Agents](/agents), which is the Superwall AI workspace for chats, analysis, automations, webhooks, and hosted machine work. The Superwall Skill is for giving AI coding agents Superwall docs, API access, and SDK guidance. The Skill can perform all of the tasks the [Superwall MCP](/dashboard/guides/superwall-mcp) can, and is recommended when you are working in an external coding agent. + +The Skill can also connect to a live paywall editor session. Open **AI Chat** in the paywall editor, expand the agent connection panel, choose **Skill**, install the Skill if needed, then paste the pairing-code prompt into your agent. See [Editor MCP](/dashboard/dashboard-creating-paywalls/paywall-editor-mcp) for the full flow. + + ## Installation Install with the [skills.sh](https://skills.sh) CLI. This works with any agent that supports skills, including Claude Code, Cursor, and Codex. @@ -45,6 +49,7 @@ The `superwall` skill gives agents access to: - **Dashboard links**: URL patterns for every dashboard page, so agents can link you to the right place (settings, campaigns, paywalls, users, and more). - **SDK source cloning**: Agents can clone SDK repos locally to trace internal behavior when debugging. - **Webhook and integration catalog**: Fetched live from the Superwall integrations endpoint. +- **Editor pairing**: Agents can attach to the paywall currently open in the editor when you provide the pairing code from the editor's agent connection panel. ### Platform quickstart skills @@ -110,4 +115,6 @@ If you've installed the general skill with an API key, the agent can also look u - [Superwall Agents](/agents): For experiment analysis with connected Superwall tooling, automations, webhooks, and hosted machines. - [Superwall MCP](/dashboard/guides/superwall-mcp): For managing your Superwall account from AI tools. +- [Editor MCP](/dashboard/dashboard-creating-paywalls/paywall-editor-mcp): For connecting external agents to the paywall currently open in the editor. +- [AI Chat Builder](/dashboard/dashboard-creating-paywalls/paywall-editor-ai-chat): For using Superwall's built-in editor chat to build and refine paywalls. - [Vibe Coding](/sdk/guides/vibe-coding): All the AI tools available for working with Superwall listed in one place. diff --git a/content/docs/dashboard/guides/web-flows.mdx b/content/docs/dashboard/guides/web-flows.mdx index 445f1c1..82f2663 100644 --- a/content/docs/dashboard/guides/web-flows.mdx +++ b/content/docs/dashboard/guides/web-flows.mdx @@ -16,7 +16,7 @@ Web funnels are a function of Web Flows. In Superwall, the product capability is Here is an example of a live Web Flow built from the flow shown above. The user enters from a web URL, moves through the personalized steps, and then continues toward checkout, app download, or app activation.