SDK Installation

📘

Minimum supported versions

The minimum supported Android version is Jelly Bean (API 18)

The minimum supported iOS version is 13

Ionic framework 4.0 is needed to support Ionic native plugins. If you are using older versions of Ionic framework and want to use the Smartlook SDK, you can use the Cordova SDK.

👍

Capacitor support

The Smartlook Ionic plugin works well with the <https://capacitorjs.com/> engine.

Installation

1. Optional: install the Ionic plugin core. You need to do this once per-project.

npm install @awesome-cordova-plugins/core

2. Install the Smartlook Ionic native plugin:

npm install @awesome-cordova-plugins/smartlook --save

3. Add the Cordova plugin:

npm install cordova-plugin-smartlook --save

ionic cordova plugin add cordova-plugin-smartlook

Ionic/Angular integration

1. Inject the Smartlook SDK into app.module.ts:

import { Smartlook } from '@awesome-cordova-plugins/smartlook/ngx';

@NgModule({
  ...

  providers: [Smartlook, ...]

  ...
})
export class AppModule {}

2. Import Smartlook into app.component.ts and setup the SDK in the platform ready callback:

import { Smartlook } from '@awesome-cordova-plugins/smartlook/ngx';

@Component( ... )
export class AppComponent {
	constructor(private smartlook: Smartlook) {
  	this.platform.ready().then(() => {
      this.smartlook.setProjectKey({ key: "YOUR_API_KEY" });
      this.smartlook.start();
    }
  }
}

Ionic/Vue integration

1. Import the Smartlook SDK into App.vue

<script setup lang="ts">
  import { IonApp, IonRouterOutlet } from '@ionic/vue';
  ...

  import { Smartlook } from '@awesome-cordova-plugins/smartlook';

  Smartlook.setProjectKey({ key: 'YOUR_API_KEY' });
  Smartlook.start();
</script>

2. Run ionic cap sync to update native platform project(s) to include newly added plugin and plugin init code.

Ionic/React integration

1. Import the Smartlook SDK into App.tsx

import { Smartlook } from '@awesome-cordova-plugins/smartlook';

Smartlook.setProjectKey({ key: 'YOUR_API_KEY' });
Smartlook.start();

2. Run ionic cap sync to update native platform project(s) to include newly added plugin and plugin init code.

📘

Project API Key

To setup Smartlook, you need your project API Key. You can find your project key in the mobile project settings in the Smartlook app.

Smartlook now records all user sessions in your application. All new user sessions will appear in the Smartlook player.

📘

region property

The region property identifies the location of the data center where metadata for your organization is stored. However, this does not ensure that all user data is stored in this region. When implementing the SDK, be sure to input the REGION parameter value as shown in the Smartlook project settings. For more information on where to find your region, see Organization settings.

Smartlook can store metadata in the EU and North America. If you want to change your data storage location, contact Smartlook Sales or Support.

📘

Adaptive frame rate

Due to reported issues with video responsiveness on iOS, we recommend turning off the Adaptive Frame Rate feature, e.g. Smartlook.setAdaptiveFrameRateEnabled({isEnabled: false});.

Recording when on a mobile network

The Smartlook SDK only uploads sessions when the device is connected to wifi. If you would like to upload your data when the device is on mobile data, you can enable Upload on mobile (cellular) data in project settings. For more information, see When will session recordings appear on my dashboard?