Creating No-Code Screens
Qonversion No-Code Builder 2.0 introduces a key change in how the builder functions. This version is based on components and properties, allowing you to customize designs to fit your needs.
Limitations
While the No-Code SDK provides a powerful way to create paywalls without coding, there are a few limitations to be aware of:
- Separate SDK Distribution – The No-Code SDK is distributed separately from the Qonversion SDK. However, it relies on the Qonversion SDK as a dependency to enable purchases and restore access directly from the No-Code screens.
- Limited Platform Availability – Currently, the No-Code SDK is in beta for iOS, with other platforms still in development.
Understanding the No-Code Builder
| Element | Description | Function |
|---|---|---|
| Canvas | Your screen-shaped, adaptive artboard where you design your layout. | Holds and organizes all components |
| Components | Pre-designed UI elements such as headings, text, buttons, products, and slides that you can add to your canvas. | Used to build screens visually |
| Component Properties | Customizable attributes such as styles, decorations, sizes and more. | Controls appearance and behavior |
| Parent Components | Containers that hold other components | Group and control multiple elements together |
| Templates | Pre-built paywall templates that allow you to quickly create screens by adjusting them to your project instead of starting from scratch. | Helps create screens faster |
Components
| Component | Description | Function |
|---|---|---|
| Heading | Displays text or macros using the /h1 tag | Adds titles or important text elements |
| Text | Displays text or macros using the /p tag | Adds body text, descriptions, or instructions |
| Image | Displays an uploaded image or GIF | Displays an uploaded image or GIF |
| Product | Displays a selectable product with custom styling | Showcases in-app purchases or subscriptions |
| Slider | A parent component that holds multiple slides | Enables swipeable content sections |
| Container | A parent component that groups other components | Organizes and structures multiple elements |
| Slide | A child component inside a slider | Holds other components within a slider |
| Button | A clickable call-to-action element | Triggers a purchase attempt or other action |
Container-Based Components
A Container is a parent component that groups multiple components together, helping to organize and structure elements within your design. It acts as a flexible layout tool that allows you to control the positioning, spacing, and appearance of its child components.
Some components function as container-based elements but come pre-filled with content to simplify the design process. These include:
- Slides – Used within a Slider component to structure multi-step or swipeable content.
- Buttons – Pre-configured call-to-action elements designed to trigger user interactions, such as purchases.
- Products – Pre-filled with selectable in-app purchases, allowing for easy customization of product display and styling.
By using container-based components, you can efficiently organize and manage your screen’s layout without starting from scratch.
Getting Started with Qonversion No-Code Builder 2.0
Qonversion No-Code Builder 2.0 lets you design and customize paywall screens effortlessly—no coding required. This guide will walk you through the process step by step.
Creating a New Screen
- Navigate to No-Code Screens from the menu.
- Choose how you want to build your paywall:
- Use a Template – For a quick start, browse Templates and select a pre-built design.
- Start from Scratch – Click Create New Screen for full creative control.
Tip
Unless you have a highly custom design in mind, we recommend starting with a template. You can still tweak every detail to fit your needs—it simply gives you a solid foundation to build on.
Using the Editor
Once you've chosen a template or opted to design from scratch, you'll enter the No-Code Builder, which consists of the following sections:
- Left Sidebar – Displays the list of components in your paywall, their hierarchy, and options such as renaming and duplicating.
- Right Sidebar (Control Panel) – Shows configurable properties for the selected component, allowing you to customize styles, sizes, and other settings.
- Preview Area – Provides a real-time preview of your paywall as you edit.
- Flow Bar – Offers tools to:
- Add components to the canvas.
- Adjust screen size using preset device layouts.
- Zoom in and out for precise editing.
Adding and Modifying Components
Adding Components to the Canvas
You can add components to your canvas using the Flow Bar. Once a component is placed on your paywall, you can:
- Reorder Components – Drag a component vertically within the stack to change its position.
- Set Parent Components – Drag a component underneath a desired parent and indent it horizontally to nest it within that component.
Modifying Components
To customize a component:
- Click on the component directly on the canvas or select it from the Left Sidebar.
The component’s properties will appear in the Right Sidebar (Control Panel). - Adjust its styles, size, layout, and other configurable settings to match your design
Saving a Paywall
Paywalls are automatically saved every 5 seconds to ensure you don’t lose progress. However, saving and publishing are two different actions depending on your paywall’s readiness:
| Paywall State | Description |
|---|---|
| Draft | Never published and still a work in progress. It won’t show up in the SDK. |
| Modified | A published paywall that’s been updated but not re-published yet. The old version is still live until you publish the changes. |
| Published | Live and available through the SDK |
How to Save & Publish
- Auto-Save: No worries—your work saves every 5 seconds while you edit ✨
- Publishing: Click Publish Paywall to push your changes live. Modified paywalls won’t update until you re-publish.
Updated 9 days ago