Ionic (Android/iOS)
This guide will help you set up the Leap platform for Android/iOS devices. You can follow the steps below to integrate Leap SDK before using your dashboard to create in-app experiences.

SDK Installation

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

Step 1. Integrate Leap Plugin

1.a Add Leap dependency

Download Leap Ionic Plugin package from npm using the following command
npm install [email protected]
ionic capacitor sync

1.b Start Leap SDK

To start Leap add the following in your App component
Ionic React
Ionic Angular
Ionic Vue (Components API)
Ionic Vue (Options API)
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"})
}
}
}
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"})
}
}
}
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"})
}
}
});
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"})
}
}
});
For Android, LeapPlugin has to be registered in MainActivity class. (android/app/src/main/java/<your-package-name>/MainActivity.class). Follow the below code snippet to do it.
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 Leap Studio, you will need to enable the 'Creator mode' in your app. This can be done by integrating the Leap Creator Plugin.
2.a Add Dependencies
Note - The Leap Creator Plugin must be removed before going live to PlayStore
Download Leap Creator Capacitor Plugin package from npm using the following command
npm install [email protected]
ionic capacitor sync
2.b Start Leap Creator Plugin
To start Leap creator add the following in App component
Ionic React
Ionic Angular
Ionic Vue (Components API)
Ionic Vue (Options API)
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')) {
LeapCreatorPlugin.start({apiKey: "API_KEY"})
}
// For iOS Support
if(isPlatform('ios')) {
LeapCreatorPlugin.start({apiKey: "API_KEY"})
}
}
}
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')) {
LeapCreatorPlugin.start({apiKey: "API_KEY"})
}
// For iOS Support
if(this.platform.is('ios')) {
LeapCreatorPlugin.start({apiKey: "API_KEY"})
}
}
}
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')) {
LeapCreatorPlugin.start({apiKey: "API_KEY"});
}
// For iOS Support
if(isPlatform('ios')) {
LeapCreatorPlugin.start({apiKey: "API_KEY"});
}
}
});
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')) {
LeapCreatorPlugin.start({apiKey: "API_KEY"});
}
// For iOS Support
if(isPlatform('ios')) {
LeapCreatorPlugin.start({apiKey: "API_KEY"});
}
}
});
Copy link
On this page
SDK Installation