Top
Login
Contents x
Integrate Whatfix Mobile SDK with Ionic(Android/iOS)
  • 10 Dec 2024
  • 4 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Contents

Integrate Whatfix Mobile SDK with Ionic(Android/iOS)

  • Updated On 10 Dec 2024
  • 4 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Article summary

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:

your title goes here

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.0.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//MainActivity.class). 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.0.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.

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

Was this article helpful?
Related Articles
What's Next
Privacy Policy | Whatfix Glossary | Whatfix Platform Status
Copyright © 2024 WHATFIX TM. All rights reserved.
Change password!
Changing your password will log you out immediately. Use the new password to log back in.
Change profile
Success!
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.
Logout