Skip to main content
Once your SDK is installed and initialized, you can start building your first in-app screen directly from the Qonversion dashboard. No builds. No releases. Everything happens visually — right inside your browser.

​
Accessing the Builder in Dashboard

  1. Open your project in the Qonversion Dashboard.
  2. Navigate to the No-Code Builder section in the left sidebar.
  3. Click Create New Screen to begin.
You’ll first choose what type of screen you want to create:
  • Mobile Paywall – single-page layout for offers or subscriptions.
  • Mobile Onboarding – multi-page layout for tutorials or funnels.
Once selected, you can start from a template or design from scratch.

​
Overview of the Interface

The Builder interface is designed to feel familiar to both designers and developers — a simple layout with real-time preview and drag-and-drop control.

​
Canvas & Settings

The main working area where your screen layout lives. You can add, move, and resize components directly on the canvas and see updates instantly. The Canvas is your adaptive artboard — where your entire screen layout lives.
Before adding components, it’s important to configure your Canvas Settings, as these define how your design behaves and looks across devices.
  • Set your Default Product (if applicable).
  • Choose your Font Family and Layout Direction.
  • Enable Safe Area to automatically apply 20 px horizontal and 59 / 34 px vertical padding.
You can access Canvas Settings from the Right Panel when Canvas Layer is Selected. Canvas settings act as the foundation of your design. They define global appearance and structure before you start adding components.

​
Screen & Safe Area

Tip: Keep “Apply Safe Area” enabled to prevent overlapping with system UI elements

​
Default Product

If your screen includes purchase options, set a Default Product here. This determines which product is pre-selected when the screen loads — for example, your most popular subscription plan.

​
Typography

Choose a global Font Family to apply across all text components on the screen. Individual components can override this setting later.

​
Layout

Controls how elements are positioned and spaced within the screen. This setting determines stacking direction, alignment, and gaps between child components.
For most paywalls, use Vertical Direction → Space Between Distribution. Space Between Setting disables Gap Setting

​
Spacing

Fine-tune how your Canvas interacts with the overall screen space. These values ensure that essential content is always visible on all modern device screens.

​
Background

Apply a base background to your screen — solid color, gradient, or image.
Use solid backgrounds for paywalls, or gradients/images for onboarding and promotional flows.
The Left Sidebar is your main navigation panel inside the Builder. It helps you manage your project’s structure, screens, and all components. It includes three tabs: Pages, Layers, and Assets.

Left Sidebar: Pages, Layers, Assets

​
Pages

Manage and organize your app screens within a project.
  • Create and manage multiple pages within the same screen set (e.g., paywall + thank-you page).
  • Click + Add Page to create a new one.
  • Reorder or rename pages at any time.
  • The currently active page is highlighted (e.g., Start Page).
This is where you’ll switch between single-page and multi-page screens when building onboarding flows.

​
Layers

View and organize all elements currently on your selected page.
  • Manage the hierarchy and nesting of containers and components.
  • Lock or hide specific layers for easier editing.
  • Reorder components with drag-and-drop.
Layers reflect your current Canvas structure in real time.

​
Assets

Access and add ready-to-use components and elements. Elements:
  • Basic – headings, text, buttons, containers
  • Interactive – toggles, sliders, tabs
  • Media – images, GIFs, Lottie files, (video coming soon)
  • Structure and Sections – pre-built headers, footers, and layout blocks
Components:
  • Product Blocks – pre-filled elements linked to your Qonversion products
You can also use the search bar to quickly find a component or element type.
Shows detailed settings for the selected component. Here you can customize:
  • Layout and positioning
  • Icons, Actions, Content and Variables
  • Typography and colors
  • Borders, shadows, and backgrounds
  • Visibility and behavior
and more.

Right Sidebar

​
Flow Bar

The Flow Bar gives you quick access to the most commonly used tools and preview controls. It includes:
  • A set of frequently used components for faster editing
  • Zoom controls to adjust your view of the Canvas
  • A device selector to preview your layout on iOS, Android, and tablet screens
Use it to fine-tune your design across devices and ensure responsive layout behavior.

Flowbar

​
Publishing & Versioning

Before publishing your screen, you’ll need to assign a Context Key — a unique identifier that links the screen you build in Qonversion to your app through the SDK.
  • Click Settings in the top bar and enter a descriptive name (for example, main_paywall or onboarding_flow).
  • Once the key is set, click Publish in the top-right corner.
Publishing makes your screen available to be called via SDK — no app update or store release required. However, the screen will only appear in your app after you call its Context Key from your code.
Product Setup & Store Connection Components