---
title: "Integrate Whatfix Mobile SDK with Ionic"
slug: "integrate-whatfix-mobile-sdk-with-ionic"
updated: 2026-08-06T15:34:25Z
published: 2026-08-06T15:34:25Z
canonical: "support.whatfix.com/integrate-whatfix-mobile-sdk-with-ionic"
---

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

# Integrate Whatfix Mobile SDK with Ionic(Android/iOS)

To create Whatfix Mobile in-app experiences on your Ionic (Android/iOS) apps, you need to first set up Whatfix Mobile. You can add the Whatfix Mobile SDK provided for Ionic (Android/iOS) apps to the source code of your app and then create and publish content.

### Integration steps for Ionic(Android/iOS)

Use the following steps to integrate the Whatfix Mobile SDK with your Ionic (Android/iOS) project:

          Info

          

Ensure that you complete both the steps, to create and test the in-app experience in your integrated build.

#### Step 1: Integrate Whatfix Mobile plugin

**a**. **Add the Whatfix Mobile dependency**

Download the Whatfix Mobile Ionic Plugin package from npm using the following command:

```
npm install leap-capacitor@2.2.6
ionic capacitor sync
```

**b.** **Start the Whatfix Mobile SDK**

To start Whatfix Mobile, add the following code in your App component:

Ionic React

```
import { isPlatform } from '@ionic/react';
import { LeapPlugin } from 'leap-capacitor';

// Start leap inside componentDidMount
class App extends React.Component {
  componentDidMount() {
      // For Android Support
      if(isPlatform('android')) {
          LeapPlugin.start({apiKey: "API_KEY"})
      }
      
      // For iOS Support
      if(isPlatform('ios')) {
          LeapPlugin.start({apiKey: "API_KEY"})
      }
  }
}
```

Ionic Angular

```
import { Platform } from '@ionic/angular';
import { LeapPlugin } from 'leap-capacitor';

// Start leap inside ngOnInit
@Component({
  selector: 'your-app-root',
  templateUrl: 'your-app.component.html',
  styleUrls: ['your-app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(public platform: Platform) {}

  ngOnInit(): void {
    // For Android Support
    if(this.platform.is('android')) {
      LeapPlugin.start({apiKey: "API_KEY"})
    }
    
    // For iOS Support
    if(this.platform.is('ios')) {
      LeapPlugin.start({apiKey: "API_KEY"})
    }
  }
  
}
```

Ionic Vue (Components API)

```
import { isPlatform } from '@ionic/vue';
import { LeapPlugin } from 'leap-capacitor';

import { defineComponent } from 'vue';

// Start leap inside setup
export default defineComponent({
  name: 'App',
  components: {},
  setup() {
    // For Android Support
    if(isPlatform('android')) {
      LeapPlugin.start({apiKey: "API_KEY"})
    }
    
    // For iOS Support
    if(isPlatform('ios')) {
      LeapPlugin.start({apiKey: "API_KEY"})
    }
  }
});
```

Ionic Vue (Options API)

```
import { isPlatform } from '@ionic/vue';
import { LeapPlugin } from 'leap-capacitor';

import { defineComponent } from 'vue';

// Start leap inside mounted
export default defineComponent({
  name: 'App',
  components: {},
  mounted() {
    // For Android Support
    if(isPlatform('android')) {
      LeapPlugin.start({apiKey: "API_KEY"})
    }
    
    // For iOS Support
    if(isPlatform('ios')) {
      LeapPlugin.start({apiKey: "API_KEY"})
    }
  }
});
```

          your title goes here

          

For Android, the LeapPlugin has to be registered in the MainActivity class (android/app/src/main/java/<your-package-name data-tomark-pass="">/MainActivity.class)</your-package-name>. Use the following code snippet:

```
import is.leap.capacitor.LeapPlugin;
import is.leap.capacitor.creator.LeapCreatorPlugin;

public class MainActivity extends BridgeActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        registerPlugin(LeapPlugin.class);
        // Remove LeapCreatorPlugin before publishing to playstore
        registerPlugin(LeapCreatorPlugin.class);
    }
}
```

#### Step 2: Enable Creator mode in your app

To create in-app experiences in the Whatfix Mobile Studio, you have to enable the **Creator mode** in your app. This is done by integrating the Whatfix Mobile Creator Plugin.

**a.** **Add dependencies**

Download the Whatfix Mobile Capacitor Plugin package from npm using the following command:

```
npm install leap-creator-capacitor@2.2.6
ionic capacitor sync
```

          your title goes here

          

- The Whatfix Mobile Creator SDK must be removed before the app goes live on the Play Store/App Store.
- While both Whatfix Mobile Creator SDK and Whatfix Mobile SDK need to be integrated in the development and testing versions, the production version should only have the Whatfix Mobile SDK.

**b.** **Start the Whatfix Mobile Creator Plugin** To start the Whatfix Mobile creator, add the following code in your App component:

Ionic React

```
import { isPlatform } from '@ionic/react';
import { LeapCreatorPlugin } from 'leap-creator-capacitor';

// Start leap inside componentDidMount
class App extends React.Component {
  componentDidMount() {
      // For Android Support
      if(isPlatform('android')) {
          LeapCreatorPlugin.start({apiKey: "API_KEY"})
      }
      
      // For iOS Support
      if(isPlatform('ios')) {
          LeapCreatorPlugin.start({apiKey: "API_KEY"})
      }
  }
}
```

Ionic Angular

```
import { Platform } from '@ionic/angular';
import { LeapCreatorPlugin } from 'leap-creator-capacitor';

// Start leap inside ngOnInit
@Component({
  selector: 'your-app-root',
  templateUrl: 'your-app.component.html',
  styleUrls: ['your-app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(public platform: Platform) {}

  ngOnInit(): void {
    // For Android Support
    if(this.platform.is('android')) {
      LeapCreatorPlugin.start({apiKey: "API_KEY"})
    }
    
    // For iOS Support
    if(this.platform.is('ios')) {
      LeapCreatorPlugin.start({apiKey: "API_KEY"})
    }
  }
  
}
```

Ionic Vue (Components API)

```
import { isPlatform } from '@ionic/vue';
import { LeapCreatorPlugin } from 'leap-creator-capacitor';

import { defineComponent } from 'vue';

// Start leap inside setup
export default defineComponent({
  name: 'App',
  components: {},
  setup() {
    // For Android Support
    if(isPlatform('android')) {
      LeapCreatorPlugin.start({apiKey: "API_KEY"});
    }
    
    // For iOS Support
    if(isPlatform('ios')) {
      LeapCreatorPlugin.start({apiKey: "API_KEY"});
    }
  }
});
```

Ionic Vue (Options API)

```
import { isPlatform } from '@ionic/vue';
import { LeapCreatorPlugin } from 'leap-creator-capacitor';

import { defineComponent } from 'vue';

// Start leap inside mounted
export default defineComponent({
  name: 'App',
  components: {},
  mounted() {
    // For Android Support
    if(isPlatform('android')) {
      LeapCreatorPlugin.start({apiKey: "API_KEY"});
    }
    
    // For iOS Support
    if(isPlatform('ios')) {
      LeapCreatorPlugin.start({apiKey: "API_KEY"});
    }
  }
});
```

          your title goes here

          

Only Android apps have the Proguard capability.

#### Proguard Rules

If you are using Proguard for your builds, use the following rules in your proguard-rules.pro file,

```
-dontwarn is.leap.android.**

-keep class is.leap.android.** {*;}
```

If you are using Android Gradle Plugin (AGP) version 8.0 or newer, it may be necessary to include specific OkHttp rules in your proguard-rules.pro file. This step is crucial to ensure the proper execution of release builds, as the LeapCreator SDK relies on the OkHttp library. The required rules are as following:

```
#For Okhttp
-dontwarn okhttp3.internal.platform.** 
-dontwarn org.conscrypt.** 
-dontwarn org.bouncycastle.** 
-dontwarn org.openjsse.**
```

For more information, see [Okhttp R8 / ProGuard](https://github.com/lysine-dev/okhttp/blob/main/docs/features/r8_proguard.md).

After integrating the code, you can start creating your in-app experience using Whatfix Mobile.

## Related

- [Add an App to your Dashboard](/create-a-project.md)
- [Create a Project](/create-a-project-1.md)
- [How to connect to the Sample App](/how-to-connect-to-the-sample-app.md)