Getting Started with No-Code Screens
Qonversion’s No-Code Builder 2.0 – the fastest way to create, test, and deploy in-app paywalls and onboarding screens without writing a single line of UI code.
Welcome to No-Code Builder 2.0!
This guide walks you through the initial setup in three simple phases: Setup, Integration, and Launch. You can follow it start-to-finish, or skip steps and return anytime. Let’s get started.
1. Setup
Create Your First Screen
Head over to the Builder and start designing your first screen.
We recommend experimenting freely — no need to perfect it right away. Once you're happy with the layout, come back here to proceed with connecting products and integrations.
Your screen can be a paywall, onboarding experience, or any other user flow you want to test or ship fast.
Add Products (Optional, but recommended for paywalls)
👉 Learn about Entitlements
If your screen involves in-app purchases or subscriptions, you'll need to create products in your Qonversion project first.
- These products will appear in the Builder’s dropdown for easy linking.
- If you’re only designing onboarding or feature-explainer screens, you can skip this step for now.
Connect App Stores
Connecting your Apple App Store and Google Play accounts enables:
- Real-time subscription status tracking
- Purchase validation and fraud protection
- In-depth analytics on conversion, revenue, and retention
Setup typically takes under 10 minutes with our step-by-step guides.
2. Integrate SDK
Install Required SDKs
- Qonversion SDK — handles purchases, subscription management, and analytics
- No-Codes SDK — displays screens and enables interactions without native UI code
The No-Codes SDK is distributed separately, but it includes the Qonversion SDK as a dependency.
iOS installation
Supported integrations:
- CocoaPods
- Swift Package Manager
Install No-Codes SDK via Cocoapods
Add dependency to Podfile
.
pod 'NoCodes'
Run pod install
in the project directory to download the dependency.
pod install
Install No-Codes SDK via Apple Swift Package Manager
Open Xcode, go to File → App packages... and enter the package URL https://github.com/qonversion/no-codes-ios
to the search bar to import the package.
Android installation
Add the dependency to your package level build.gradle
file.
implementation 'io.qonversion:no-codes:0.0.1'
Migrating to the latest Qonversion SDK version
If you are utilizing our subscription management and analytics SDK (
io.qonversion.android.sdk:sdk
), please be aware that the No-Codes SDK includes the latest version of the Qonversion SDK. Therefore, you need to manage the migration from previous major versions to the latest ones. Our migration guides located in the relevant documentation section will assist you with this process.After that you can remove the Qonversion SDK dependency from your
build.gradle
file and leave only the No-Codes SDK dependency there.
Initialize SDKs and Set Delegates
To display screens and process purchases correctly, initialize both SDKs in your app and assign delegates for handling screen behavior.
Required steps:
- Initialize Qonversion SDK
import Qonversion
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
let qonversionConfig = Qonversion.Configuration(projectKey: "projectKey", launchMode: .subscriptionManagement)
Qonversion.initWithConfig(qonversionConfig)
return true
}
import com.qonversion.android.sdk.Qonversion
import com.qonversion.android.sdk.QonversionConfig
import com.qonversion.android.sdk.dto.QLaunchMode
public class App : Application {
override fun onCreate() {
super.onCreate()
val qonversionConfig = QonversionConfig.Builder(
this,
"projectKey",
QLaunchMode.SubscriptionManagement
).build()
Qonversion.initialize(qonversionConfig)
}
}
import com.qonversion.android.sdk.Qonversion;
import com.qonversion.android.sdk.QonversionConfig;
import com.qonversion.android.sdk.dto.QLaunchMode;
public class App extends Application {
@Override
public void onCreate() {
super.onCreate();
final QonversionConfig qonversionConfig = new QonversionConfig.Builder(
this,
"projectKey",
QLaunchMode.SubscriptionManagement
).build();
Qonversion.initialize(qonversionConfig);
}
}
- Initialize No-Codes SDK
// You can initialize using only project key
let noCodesConfig = NoCodes.Configuration(projectKey: "projectKey")
NoCodes.initialize(with: noCodesConfig)
import io.qonversion.nocodes.NoCodes
import io.qonversion.nocodes.NoCodesConfig
public class App : Application {
override fun onCreate() {
...
val noCodesConfig = NoCodesConfig.Builder(this, "projectKey").build()
NoCodes.initialize(noCodesConfig)
}
}
import io.qonversion.nocodes.NoCodes;
import io.qonversion.nocodes.NoCodesConfig;
public class App : Application {
override fun onCreate() {
...
final NoCodesConfig noCodesConfig = new NoCodesConfig.Builder(this, "projectKey").build();
NoCodes.initialize(noCodesConfig);
}
}
- Set No-Codes SDK delegates
NoCodes.shared.set(delegate: self)
NoCodes.shared.set(screenCustomizationDelegate: self)
// Delegates can be also passed via the initialization throught the configuration:
let noCodesConfig = NoCodes.Configuration(projectKey: "projectKey", delegate: self, screenCustomizationDelegate: self)
NoCodes.shared.setDelegate(this)
NoCodes.shared.setScreenCustomizationDelegate(this)
// Delegates can be also passed via the initialization throught the configuration:
val noCodesConfig = NoCodesConfig.Builder(this, "projectKey")
.setDelegate(this)
.setScreenCustomizationDelegate(this)
.build()
NoCodes.getSharedInstance().setDelegate(this);
NoCodes.getSharedInstance().setScreenCustomizationDelegate(this);
// Delegates can be also passed via the initialization throught the configuration:
final NoCodesConfig noCodesConfig = new NoCodesConfig.Builder(this, "projectKey")
.setDelegate(this)
.setScreenCustomizationDelegate(this)
.build();
- The first delegate is used for main events (e.g., screen opened, button tapped).
- The second is for screen customization (if you want to override default styles).
3. Launch
Display Your No-Code Screen
Once everything is set up, you’re ready to display your screen inside the app.
This is where your design meets the real world. Whether you’re launching to users or testing internally, the process is the same.
NoCodes.shared.showNoCode(withContextKey: "yourContextKey")
NoCodes.shared.showScreen("yourContextKey")
NoCodes.getSharedInstance().showScreen("yourContextKey");
Make Your First Purchase
It’s time to test the full flow — from screen to sale.
- Launch your app
- Display the screen you created
- Trigger a test purchase
- Confirm that everything works as expected: purchase completes, entitlements are unlocked, and analytics start flowing.
If you see revenue in your dashboard — congrats, you're live! 🥳
Final Tip
You’re now set up to build, iterate, and optimize without waiting on engineering. Want to get even more out of Builder 2.0? Try running A/B tests, tracking funnel metrics, and customizing screens based on user segments.
Updated 5 days ago