Promotions & upselling surfaces

Every place on the web app that shows an upsell / promotion and reports it to analytics. Each card has a live preview of the UI. Use this to understand where and when we nudge users to upgrade.

promotion surfaces

creative variants

How to read this

view_promotion fires once when the promotion becomes visible on screen (an impression).
select_promotion fires when the user clicks the promotion’s CTA.
promotion_id / promotion_name — identify the promotion. {...} marks a part filled in at runtime.
creative_slot — where on the site the promotion appears. creative_name — the specific design / variant (used for A/B tests).
Live preview — modals open via a button; inline surfaces render in place. Previews use sample data, so credit counts / plan names may differ from production.

Studio in-context nudges

Inline prompts that appear inside the Studio editing flow when the user runs low on credits or hits a locked Pro tool.

Studio credit notice

view_promotionselect_promotion

promotion_id: studio_credit_notice_{trial|upgrade}

A yellow floating notice above the Studio toolbar. Shows when the user does not have enough credits to run the current action. Guests see the "trial" variant (CTA → auth); signed-in users see the "upgrade" variant (CTA → pricing).

creative_slot	creative_name	Notes
{location} e.g. studio_staging_generate	credit_notice_trial	Guests — CTA opens the sign-up / auth modal.
{location} e.g. studio_staging_generate	credit_notice_upgrade	Signed-in users — CTA opens the pricing table.

Live preview

Two variants by auth state — both shown here (the live component only renders one, depending on whether you’re logged in). CTAs open the same real modals: guest → sign-up/auth, signed-in → upgrade.

Logged out (guest) · studio_credit_notice_trial

크레딧을 모두 사용했습니다. 가입하시면 무료로 더 받을 수 있습니다.

Signed in · studio_credit_notice_upgrade

크레딧을 모두 사용했습니다. 업그레이드하시면 더 받을 수 있습니다.

src/components/studio/credit-notice.tsx

Studio Sidebar Upgrade

view_promotionselect_promotion

promotion_id: studio_sidebar_upgrade

An upgrade card pinned in the Studio sidebar listing the next tier’s features. Visible for non-paid users (hidden once the user is on a paid plan). CTA opens the pricing table modal.

creative_slot	creative_name	Notes
studio_sidebar	upgrade_card_{target} e.g. upgrade_card_starter / upgrade_card_pro	target = the next plan we nudge toward.

Live preview

Only renders when the current session has an available upgrade — hidden for top-tier plans and while permissions load.

src/components/studio/nav-upgrade-card.tsx

Studio replace lock

view_promotionselect_promotion

promotion_id: studio_replace_lock

A gold “locked” dot overlay on the Replace Furniture tool (a Pro-only feature) in the photo editor. Visible when the tool is locked for the user’s plan. Clicking opens the "Upgrade to Replace" modal.

creative_slot	creative_name	Notes
studio_replace_furniture	replace_furniture	The locked tool button itself.
modal	upgrade_to_replace	v1 modal it opens — feature grid + "View Plans".
modal	upgrade_to_replace_v2	v2 modal — before/after swap with a "Start Swapping" CTA. Same promotion_id for A/B comparison.

Live previewmock

Faithful replica of the real locked tool (the overlay is internal to the studio toolbar and not exported). It’s the normal “Replace Furniture” tool button with a small accent dot pinned top-right marking it Pro-locked. Click either button to open the real modal — v1 (upgrade-to-replace) or v2 (upgrade-to-replace-v2), the same funnel as the live tool.

v1 · upgrade-to-replace

v2 · upgrade-to-replace-v2

src/components/studio/staging/photo-edit/idle.tsx

Batch staging credit notice

view_promotionselect_promotion

promotion_id: studio_batch_staging_credit_notice_{trial|upgrade}

The batch-staging equivalent of the credit notice — a floating notice above the batch staging toolbar. Shows when the user lacks enough credits for a batch generation.

creative_slot	creative_name	Notes
studio_batch_staging_generate	credit_notice_trial	Guests — CTA opens auth.
studio_batch_staging_generate	credit_notice_upgrade	Signed-in users — CTA opens pricing.

Live previewmock

Faithful replica (the batch notice is internal to the batch-staging route and not exported). Uses the real `batchCreditsNeeded` copy. Both auth variants shown — the message is identical, only the CTA changes (Sign Up → auth vs Upgrade Now → pricing).

Logged out (guest) · studio_batch_staging_credit_notice_trial

이 룸들을 스테이징하려면 40 크레딧이 필요합니다 — 현재 12 크레딧이 남아 있습니다.

Signed in · studio_batch_staging_credit_notice_upgrade

이 룸들을 스테이징하려면 40 크레딧이 필요합니다 — 현재 12 크레딧이 남아 있습니다.

src/routes/studio/batch-staging/-toolbar.tsx

Upsell modals

Full dialogs that interrupt the flow when a free user hits a gated action (download, edit limit, replace, or a guest running out of credits).

Pricing Table

view_promotion

promotion_id: pricing_table

The full-screen pricing modal shown after most upgrade CTAs. Fires a view_promotion when opened; the click is attributed to whichever surface opened it (so no select_promotion here).

creative_slot	creative_name	Notes
modal	pricing_table	promotion_id / name inherit from the surface that opened it, falling back to pricing_table.

Live preview

src/components/modal/upselling/pricing-table.tsx

Upgrade to Download

view_promotionselect_promotion

promotion_id: upgrade_to_download

A free-vs-Pro comparison modal shown when a free user tries to download a result. CTA opens the pricing table.

creative_slot	creative_name	Notes
modal	v1_upgrade_to_download	—

Live preview

src/components/modal/upselling/upgrade-to-download.tsx

Studio replace lock (modal)

view_promotionselect_promotion

promotion_id: studio_replace_lock

The intermediate modal that explains why Replace Furniture is Pro-only, opened from the studio_replace_lock tool button. Shares the studio_replace_lock promotion_id for unified funnel tracking. "View Plans" opens the pricing table.

creative_slot	creative_name	Notes
modal	upgrade_to_replace	—

Live preview

src/components/modal/upselling/upgrade-to-replace.tsx

Upgrade to Edit (v1)

view_promotionselect_promotion

promotion_id: upgrade_to_edit

Shown when a free user reaches the edit limit (4 edits). v1 shows an edit-limit progress bar and benefits. CTA opens the pricing table.

creative_slot	creative_name	Notes
modal	v1_edit_limit	Progress-bar variant.

Live preview

src/components/modal/upselling/upgrade-to-edit.tsx

Upgrade to Edit (v2)

view_promotionselect_promotion

promotion_id: upgrade_to_edit

Alternate design for the edit-limit upsell: a two-column modal with an auto-advancing carousel of room images. Same trigger as v1 (edit limit reached); the two share promotion_id `upgrade_to_edit` and differ only by creative_name.

creative_slot	creative_name	Notes
modal	v2_edit_limit	Carousel variant — same promotion_id as v1 for A/B funnel comparison.

Live preview

src/components/modal/upselling/upgrade-to-edit-v2.tsx

Login for Credit

view_promotionselect_promotion

promotion_id: login_for_credit

Shown to a guest who tries an action that needs credits. Encourages signing in for free credits. CTA opens the auth modal.

creative_slot	creative_name	Notes
modal	v1_login_for_credit	—

Live preview

src/components/modal/upselling/login-for-credit.tsx

Editor sidebar panels

Persistent panels in the standalone editor’s sidebar for non-Pro or out-of-credit users.

Editor Upgrade To Pro

view_promotionselect_promotion

promotion_id: editor_upgrade_to_pro

A sparkle-icon upgrade panel in the editor sidebar, visible to non-Pro users. Click opens the pricing table.

creative_slot	creative_name	Notes
editor_sidebar	upgrade_to_pro	—

Live preview

이 기능은 Pro 요금제에 포함되어 있습니다. 업그레이드하여 계정에서 잠금을 해제하세요.

src/components/modal/editor/upgrade-to-pro.tsx

Editor Credit Empty

view_promotionselect_promotion

promotion_id: editor_credit_empty

A yellow "out of credits" panel in the editor sidebar. Visible only when remaining credits ≤ 0. CTA opens auth (guests) or pricing (signed-in).

creative_slot	creative_name	Notes
editor_sidebar	credit_empty	—

Live preview

Two variants by auth state — both shown. Same promotion_id / creative for each; only the copy and CTA differ. Guest → “Sign up to get more for free.” (opens auth); signed-in → “Upgrade to get more.” (opens pricing).

Logged out (guest)

크레딧을 모두 사용했습니다. 가입하시면 무료로 더 받을 수 있습니다.

Signed in

크레딧을 모두 사용했습니다. 업그레이드하시면 더 받을 수 있습니다.

src/components/modal/editor/credit-empty.tsx

Empty states

Upgrade prompts rendered in place of gated dashboard sections when the user has no data / no access.

API Key Empty State

view_promotionselect_promotion

promotion_id: api_key_empty_state

Shown in the API Keys section when no keys are configured (a Pro feature). Button opens the pricing table.

creative_slot	creative_name	Notes
empty_state	API Key Empty State	—

Live preview

API KEY: sk-****7f3a

API 액세스 잠금 해제

플랜을 업그레이드하여 API 키를 생성하고, 저희 AI 디자인 도구를 여러분의 앱과 워크플로에 통합하세요.

RESTful API

모든 AI 기능을 위한 간단한 엔드포인트

전체 문서

자세한 가이드와 코드 샘플

높은 처리량

속도 제한과 함께 빠른 응답

src/components/empty/api-key-empty-state.tsx

Team Empty State

view_promotionselect_promotion

promotion_id: team_empty_state

Shown in team management when no members have been added. Button opens the pricing table.

creative_slot	creative_name	Notes
empty_state	Team Empty State	—

Live preview

팀과 협업하세요

Team 요금제로 업그레이드하여 멤버를 초대하고, 프로젝트를 공유하며, 실시간으로 함께 디자인하세요.

멤버 초대

역할 기반 팀 액세스

공유 크레딧

모두가 공유하는 크레딧

src/components/empty/team-empty-state.tsx

Subscription Empty State

view_promotionselect_promotion

promotion_id: subscription_empty_state

A card prompting the user to upgrade, shown when a subscription-only feature is unavailable. Button opens the pricing table.

creative_slot	creative_name	Notes
empty_state	Team Empty Upgrade	—

Live preview

활성 구독 없음

현재 무료 요금제를 사용 중입니다. 업그레이드하여 프리미엄 기능을 잠금 해제하고 더 많은 것을 누리세요.

src/components/empty/subscription-empty-state.tsx

Marketing & global surfaces

Promotions that live on marketing pages or the global header, driving new/returning users into the funnel.

CTA Banner

view_promotionselect_promotion

promotion_id: cta_banner

The large hero banner with an upload dropzone and CTA buttons that appears at the footer of marketing pages. The slot marks which page (home_footer, pricing_footer, …). On click, creative_name records which specific CTA was used.

creative_slot	creative_name	Notes
{slot} e.g. home_footer / pricing_footer	cta_banner_v1	view_promotion — canonical creative version.
{slot} e.g. home_footer / pricing_footer	dropzone_upload / start_free / contact_sales	select_promotion — creative_name carries which CTA was clicked.

Live preview

당신의 다음 매물은
더 나은 비전을 누릴 자격이 있습니다

몇 초 만에 스테이징을 시작하세요. 신용카드도, 디자인 실력도 필요 없습니다.

매물 사진을 여기에 끌어다 놓으세요

JPG, PNG, WebP, AVIF, HEIC 지원

영업팀 문의

src/components/sections/cta-banner.tsx

Blog Sidebar

view_promotionselect_promotion

promotion_id: blog_sidebar

A sticky sidebar on blog article pages with a hero image and a "Start Staging" button that sends the reader into the staging flow.

creative_slot	creative_name	Notes
blog_sidebar	blog_sidebar_v1	view_promotion — impression.
blog_sidebar	start_staging	select_promotion — CTA click.

Live preview

Try Edensign for Free

src/components/blog/sidebar.tsx

Credit Balance

view_promotionselect_promotion

promotion_id: credit_balance

The credit pill in the global header. The promotion only fires when the user is out of credits (balance ≤ 0), at which point the pill turns red. Clicking it opens the pricing table.

creative_slot	creative_name	Notes
header_credit_balance	low_credits	—

Live preview

src/components/button/credit-balance.tsx

Studio in-context nudges

Studio credit notice

Studio Sidebar Upgrade

Studio replace lock

Batch staging credit notice

Upsell modals

Pricing Table

Upgrade to Download

Studio replace lock (modal)

Upgrade to Edit (v1)

Upgrade to Edit (v2)

Login for Credit

Editor sidebar panels

Editor Upgrade To Pro

Editor Credit Empty

Empty states

API Key Empty State

API 액세스 잠금 해제

Team Empty State

팀과 협업하세요

Subscription Empty State

Marketing & global surfaces

CTA Banner

당신의 다음 매물은더 나은 비전을 누릴 자격이 있습니다

Blog Sidebar

Credit Balance

당신의 다음 매물은
더 나은 비전을 누릴 자격이 있습니다