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.

18
promotion surfaces
24
creative variants
5
categories

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_slotcreative_nameNotes
{location} e.g. studio_staging_generatecredit_notice_trialGuests — CTA opens the sign-up / auth modal.
{location} e.g. studio_staging_generatecredit_notice_upgradeSigned-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_slotcreative_nameNotes
studio_sidebarupgrade_card_{target} e.g. upgrade_card_starter / upgrade_card_protarget = 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.

升級到 Starter

  • 無限虛擬軟裝
  • 多角度軟裝
  • 物件與雜物移除
  • 室內翻新預覽
  • 2D 轉 3D 平面圖
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_slotcreative_nameNotes
studio_replace_furniturereplace_furnitureThe locked tool button itself.
modalupgrade_to_replacev1 modal it opens — feature grid + "View Plans".
modalupgrade_to_replace_v2v2 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_slotcreative_nameNotes
studio_batch_staging_generatecredit_notice_trialGuests — CTA opens auth.
studio_batch_staging_generatecredit_notice_upgradeSigned-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_slotcreative_nameNotes
modalpricing_tablepromotion_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_slotcreative_nameNotes
modalv1_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_slotcreative_nameNotes
modalupgrade_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_slotcreative_nameNotes
modalv1_edit_limitProgress-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_slotcreative_nameNotes
modalv2_edit_limitCarousel 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_slotcreative_nameNotes
modalv1_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_slotcreative_nameNotes
editor_sidebarupgrade_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_slotcreative_nameNotes
editor_sidebarcredit_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_slotcreative_nameNotes
empty_stateAPI Key Empty State—
Live preview

解鎖 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_slotcreative_nameNotes
empty_stateTeam Empty State—
Live preview

與團隊協作

升級到團隊方案，邀請成員、共享專案，即時協作設計。

邀請成員
基於角色的團隊權限
共享點數
所有成員共享點數
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_slotcreative_nameNotes
empty_stateTeam 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_slotcreative_nameNotes
{slot} e.g. home_footer / pricing_footercta_banner_v1view_promotion — canonical creative version.
{slot} e.g. home_footer / pricing_footerdropzone_upload / start_free / contact_salesselect_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_slotcreative_nameNotes
blog_sidebarblog_sidebar_v1view_promotion — impression.
blog_sidebarstart_stagingselect_promotion — CTA click.
Live preview
Try Edensign for Free
Edensign
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_slotcreative_nameNotes
header_credit_balancelow_credits—
Live preview
src/components/button/credit-balance.tsx