> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.qonversion.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started

> 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)

[👉 Create Products](/docs/create-products)

👉 Learn about [Entitlements](/docs/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 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.

👉 [Connect Stores](/docs/quickstart#2-create-a-project-and-register-your-app)

## 2. Integrate SDK

### Android

<Info>
  On Android the No-Codes SDK is distributed as a separate package, but it includes the Qonversion SDK as a dependency.
</Info>

Add the dependency to your package level `build.gradle` file.

```groovy build.gradle theme={null}
implementation 'io.qonversion:no-codes: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.

### iOS and other platforms

For iOS and other supported cross-platform frameworks, No-Codes SDK comes with the Qonversion SDK. If you already use Qonversion SDK, then simply upgrade it to the minimal required version, described [here](docs/installation/supported-platforms). If not, add the latest version to your project following [this guide](/docs/installation).

## 3. 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:

1. **Initialize Qonversion SDK**

```swift theme={null}
import Qonversion

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    let qonversionConfig = Qonversion.Configuration(projectKey: "projectKey", launchMode: .subscriptionManagement)
    Qonversion.initWithConfig(qonversionConfig)
  	return true
}
```

```kotlin theme={null}
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)
    }
}
```

```java theme={null}
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);
    }
}
```

```typescript React Native theme={null}
const config = new QonversionConfigBuilder(
  'projectKey',
  LaunchMode.SUBSCRIPTION_MANAGEMENT
).build();
Qonversion.initialize(config);
```

```typescript Flutter theme={null}
final config = new QonversionConfigBuilder(
  'projectKey',
  QLaunchMode.subscriptionManagement
).build();
Qonversion.initialize(config);
```

```csharp Unity theme={null}
QonversionConfig config = new QonversionConfigBuilder(
  "projectKey",
  LaunchMode.SubscriptionManagement
).Build();
Qonversion.Initialize(config);
```

```typescript Cordova theme={null}
const config = new Qonversion.ConfigBuilder(
  'projectKey',
  Qonversion.LaunchMode.SUBSCRIPTION_MANAGEMENT,
).build();
Qonversion.initialize(config);
```

```typescript Capacitor theme={null}
const config = new QonversionConfigBuilder(
  'projectKey',
  LaunchMode.SUBSCRIPTION_MANAGEMENT
).build();
Qonversion.initialize(config);
```

2. **Initialize No-Codes SDK**

```swift theme={null}
// You can initialize using only project key
let noCodesConfig = NoCodesConfiguration(projectKey: "projectKey")
NoCodes.initialize(with: noCodesConfig)
```

```kotlin Kotlin theme={null}
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)
    }
}
```

```java theme={null}
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);
    }
}
```

```typescript React Native theme={null}
const noCodesConfig = new NoCodesConfigBuilder('projectKey')
  .build();
NoCodes.initialize(noCodesConfig);
```

```typescript Flutter theme={null}
final noCodesConfig = new NoCodesConfigBuilder(projectKey).build();
NoCodes.initialize(noCodesConfig);
```

```csharp Unity theme={null}
var noCodesConfig = new NoCodesConfigBuilder("projectKey")
    .Build();
NoCodes.Initialize(noCodesConfig);
```

```typescript Cordova theme={null}
const noCodesConfig = new Qonversion.NoCodesConfigBuilder('projectKey')
  .build();
Qonversion.NoCodes.initialize(noCodesConfig);
```

```typescript Capacitor theme={null}
const noCodesConfig = new NoCodesConfigBuilder('projectKey')
  .build();
NoCodes.initialize(noCodesConfig);
```

3. **Set No-Codes SDK delegates** *- optional*

```swift theme={null}
// The first delegate is used for main events (e.g., screen opened, button tapped).
NoCodes.shared.set(delegate: self)
// The second is for screen customization (if you want to override default styles).
NoCodes.shared.set(screenCustomizationDelegate: self)

// Delegates can be also passed via the initialization throught the configuration:
let noCodesConfig = NoCodesConfiguration(projectKey: "projectKey", delegate: self, screenCustomizationDelegate: self)
```

```kotlin Kotlin theme={null}
// The first delegate is used for main events (e.g., screen opened, button tapped).
NoCodes.shared.setDelegate(this)
// The second is for screen customization (if you want to override default styles).
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()
```

```java theme={null}
// The first delegate is used for main events (e.g., screen opened, button tapped).
NoCodes.getSharedInstance().setDelegate(this);
// The second is for screen customization (if you want to override default styles).
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();
```

```typescript React Native theme={null}
// Set the listener via the initialization throught the configuration
// It is used for main events (e.g., screen opened, button tapped).
const noCodesConfig = new NoCodesConfigBuilder('projectKey')
  .setNoCodesListener(this)
.build();

// Set presentation style config before showing screen if needed
const screenConfig = new ScreenPresentationConfig(ScreenPresentationStyle.FULL_SCREEN, true);
NoCodes.getSharedInstance().setScreenPresentationConfig(screenConfig, 'yourContextKey');
```

```typescript Flutter theme={null}
// Set presentation style config before showing screen if needed
final config = NoCodesPresentationConfig(
    animated: true,
    presentationStyle: NoCodesPresentationStyle.fullScreen,
);

NoCodes.getSharedInstance().setScreenPresentationConfig(config, contextKey: 'yourContextKey');

// Subscribe to separate NoCodes event streams
_screenShownStream = NoCodes.getSharedInstance().screenShownStream.listen((event) {
    // add functionality here
});

_finishedStream = NoCodes.getSharedInstance().finishedStream.listen((event) {
    // add functionality here
});

_actionStartedStream = NoCodes.getSharedInstance().actionStartedStream.listen((event) {
    // add functionality here
});

_actionFailedStream = NoCodes.getSharedInstance().actionFailedStream.listen((event) {
    // add functionality here
});

_actionFinishedStream = NoCodes.getSharedInstance().actionFinishedStream.listen((event) {
    // add functionality here
});

_screenFailedToLoadStream = NoCodes.getSharedInstance().screenFailedToLoadStream.listen((event) {
    // add functionality here
});
```

```csharp Unity theme={null}
// Set the delegate via the initialization through the configuration
// It is used for main events (e.g., screen opened, button tapped).
var noCodesConfig = new NoCodesConfigBuilder("projectKey")
    .SetNoCodesDelegate(this)
    .Build();

// Set presentation style config before showing screen if needed
var screenConfig = new ScreenPresentationConfig(ScreenPresentationStyle.FullScreen, true);
NoCodes.GetSharedInstance().SetScreenPresentationConfig(screenConfig, "yourContextKey");
```

```typescript Cordova theme={null}
// Set the listener via the initialization throught the configuration
// It is used for main events (e.g., screen opened, button tapped).
const noCodesConfig = new Qonversion.NoCodesConfigBuilder('projectKey')
  .setNoCodesListener(this)
.build();

// Set presentation style config before showing screen if needed
const screenConfig = new Qonversion.ScreenPresentationConfig(Qonversion.ScreenPresentationStyle.FULL_SCREEN, true);
Qonversion.NoCodes.getSharedInstance().setScreenPresentationConfig(screenConfig, 'yourContextKey');
```

```typescript Capacitor theme={null}
// Set the listener via the initialization throught the configuration
// It is used for main events (e.g., screen opened, button tapped).
const noCodesConfig = new NoCodesConfigBuilder('projectKey')
  .setNoCodesListener(this)
.build();

// Set presentation style config before showing screen if needed
const screenConfig = new ScreenPresentationConfig(ScreenPresentationStyle.FULL_SCREEN, true);
NoCodes.getSharedInstance().setScreenPresentationConfig(screenConfig, 'yourContextKey');
```

## 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.

```swift theme={null}
NoCodes.shared.showNoCode(withContextKey: "yourContextKey")
```

```kotlin theme={null}
NoCodes.shared.showScreen("yourContextKey")
```

```java theme={null}
NoCodes.getSharedInstance().showScreen("yourContextKey");
```

```typescript React Native theme={null}
NoCodes.getSharedInstance().showScreen('yourContextKey');
```

```typescript Flutter theme={null}
NoCodes.getSharedInstance().showScreen('yourContextKey');
```

```csharp Unity theme={null}
NoCodes.GetSharedInstance().ShowScreen("yourContextKey");
```

```typescript Cordova theme={null}
Qonversion.NoCodes.getSharedInstance().showScreen('yourContextKey');
```

```typescript Capacitor theme={null}
NoCodes.getSharedInstance().showScreen('yourContextKey');
```

### Make Your First Purchase

It’s time to test the full flow — from screen to sale.

1. Launch your app
2. Display the screen you created
3. Trigger a test purchase
4. 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.