> ## 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 with No-Code Builder 2.0

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

This guide walks you through the initial setup in three simple phases: **Setup**, **Integration**, and **Launch**.

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

<Info>
  Your screen can be a paywall, onboarding experience, or any other user flow you want to test or ship fast.
</Info>

### Add Products (Optional, but recommended for paywalls)

If your screen involves in-app purchases or subscriptions, you'll need to [create products](/docs/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.

Learn about [Entitlements](/docs/entitlements).

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

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

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

```groovy theme={null}
implementation 'io.qonversion:no-codes:1.+'
```

<Info>
  **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.
</Info>

### 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. If not, add the latest version to your project following [the installation 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.

### 1. Initialize Qonversion SDK

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    import Qonversion

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

  <Tab title="Kotlin">
    ```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)
        }
    }
    ```
  </Tab>

  <Tab title="Java">
    ```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);
        }
    }
    ```
  </Tab>

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

  <Tab title="Flutter">
    ```dart theme={null}
    final config = new QonversionConfigBuilder(
      'projectKey',
      QLaunchMode.subscriptionManagement
    ).build();
    Qonversion.initialize(config);
    ```
  </Tab>

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

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

  <Tab title="Capacitor">
    ```typescript theme={null}
    const config = new QonversionConfigBuilder(
      'projectKey',
      LaunchMode.SUBSCRIPTION_MANAGEMENT
    ).build();
    Qonversion.initialize(config);
    ```
  </Tab>
</Tabs>

### 2. Initialize No-Codes SDK

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let noCodesConfig = NoCodesConfiguration(projectKey: "projectKey")
    NoCodes.initialize(with: noCodesConfig)
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    import io.qonversion.nocodes.NoCodes
    import io.qonversion.nocodes.NoCodesConfig

    val noCodesConfig = NoCodesConfig.Builder(this, "projectKey").build()
    NoCodes.initialize(noCodesConfig)
    ```
  </Tab>

  <Tab title="Java">
    ```java theme={null}
    import io.qonversion.nocodes.NoCodes;
    import io.qonversion.nocodes.NoCodesConfig;

    final NoCodesConfig noCodesConfig = new NoCodesConfig.Builder(this, "projectKey").build();
    NoCodes.initialize(noCodesConfig);
    ```
  </Tab>

  <Tab title="React Native">
    ```typescript theme={null}
    const noCodesConfig = new NoCodesConfigBuilder('projectKey')
      .build();
    NoCodes.initialize(noCodesConfig);
    ```
  </Tab>

  <Tab title="Flutter">
    ```dart theme={null}
    final noCodesConfig = new NoCodesConfigBuilder(projectKey).build();
    NoCodes.initialize(noCodesConfig);
    ```
  </Tab>

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

  <Tab title="Cordova">
    ```typescript theme={null}
    const noCodesConfig = new Qonversion.NoCodesConfigBuilder('projectKey')
      .build();
    Qonversion.NoCodes.initialize(noCodesConfig);
    ```
  </Tab>

  <Tab title="Capacitor">
    ```typescript theme={null}
    const noCodesConfig = new NoCodesConfigBuilder('projectKey')
      .build();
    NoCodes.initialize(noCodesConfig);
    ```
  </Tab>
</Tabs>

### 3. Set No-Codes SDK Delegates (Optional)

<Info>
  On Android, `NoCodes.shared` is the Kotlin idiom and `NoCodes.getSharedInstance()` is the Java accessor for the same singleton (annotated `@JvmName("getSharedInstance")`). Use whichever matches your language.
</Info>

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    NoCodes.shared.set(delegate: self)
    NoCodes.shared.set(screenCustomizationDelegate: self)

    // Or pass via initialization:
    let noCodesConfig = NoCodesConfiguration(
      projectKey: "projectKey",
      delegate: self,
      screenCustomizationDelegate: self
    )
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    NoCodes.shared.setDelegate(this)
    NoCodes.shared.setScreenCustomizationDelegate(this)

    // Or pass via initialization:
    val noCodesConfig = NoCodesConfig.Builder(this, "projectKey")
      .setDelegate(this)
      .setScreenCustomizationDelegate(this)
      .build()
    ```
  </Tab>

  <Tab title="Java">
    ```java theme={null}
    NoCodes.getSharedInstance().setDelegate(this);
    NoCodes.getSharedInstance().setScreenCustomizationDelegate(this);

    // Or pass via initialization:
    final NoCodesConfig noCodesConfig = new NoCodesConfig.Builder(this, "projectKey")
      .setDelegate(this)
      .setScreenCustomizationDelegate(this)
      .build();
    ```
  </Tab>

  <Tab title="React Native">
    ```typescript theme={null}
    const noCodesConfig = new NoCodesConfigBuilder('projectKey')
      .setNoCodesListener(this)
      .build();
    ```
  </Tab>

  <Tab title="Flutter">
    ```dart theme={null}
    _screenShownStream = NoCodes.getSharedInstance().screenShownStream.listen((event) {
        // handle screen shown
    });

    _finishedStream = NoCodes.getSharedInstance().finishedStream.listen((event) {
        // handle finished
    });

    _actionStartedStream = NoCodes.getSharedInstance().actionStartedStream.listen((event) {
        // handle action started
    });
    ```
  </Tab>

  <Tab title="Unity">
    ```csharp theme={null}
    var noCodesConfig = new NoCodesConfigBuilder("projectKey")
        .SetNoCodesDelegate(this)
        .Build();
    ```
  </Tab>

  <Tab title="Cordova">
    ```typescript theme={null}
    const noCodesConfig = new Qonversion.NoCodesConfigBuilder('projectKey')
      .setNoCodesListener(this)
      .build();
    ```
  </Tab>

  <Tab title="Capacitor">
    ```typescript theme={null}
    const noCodesConfig = new NoCodesConfigBuilder('projectKey')
      .setNoCodesListener(this)
      .build();
    ```
  </Tab>
</Tabs>

## 4. Launch

### Display Your No-Code Screen

Once everything is set up, display your screen inside the app using its **Context Key**.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    NoCodes.shared.showScreen(withContextKey: "yourContextKey")
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    NoCodes.shared.showScreen("yourContextKey")
    ```
  </Tab>

  <Tab title="Java">
    ```java theme={null}
    NoCodes.getSharedInstance().showScreen("yourContextKey");
    ```
  </Tab>

  <Tab title="React Native">
    ```typescript theme={null}
    NoCodes.getSharedInstance().showScreen('yourContextKey');
    ```
  </Tab>

  <Tab title="Flutter">
    ```dart theme={null}
    NoCodes.getSharedInstance().showScreen('yourContextKey');
    ```
  </Tab>

  <Tab title="Unity">
    ```csharp theme={null}
    NoCodes.GetSharedInstance().ShowScreen("yourContextKey");
    ```
  </Tab>

  <Tab title="Cordova">
    ```typescript theme={null}
    Qonversion.NoCodes.getSharedInstance().showScreen('yourContextKey');
    ```
  </Tab>

  <Tab title="Capacitor">
    ```typescript theme={null}
    NoCodes.getSharedInstance().showScreen('yourContextKey');
    ```
  </Tab>
</Tabs>

### Make Your First Purchase

It's time to test the full flow:

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