Skip to main content
Skip table of contents

Capacitor SDK Integration

This guide provides instructions on how to integrate the Capacitor plugin into your Ionic app with Angular. The plugin includes the following features: initialize, checkMNOEligibility, showConsentManager, acceptConsent, rejectConsent, isConsentAccepted, fetchIdConnectData, idConnectData, handleDataClear and addListener.

Prerequisites

Before you start, ensure you have the following:

  • Node.js and npm installed

  • Ionic CLI installed

  • Capacitor CLI installed

  • An existing Ionic project with Angular

Installation

To install the plugin, run the following command in your project directory:

CODE
npm install utiq-tech@latest
npx cap sync

To install a specific version, visit https://github.com/Utiq-tech/Capacitor-JS-SDK/tags and replace “latest" with the desired version number.

Integration Steps

Initialize

To use the plugin, you need to initialize it in your app. Add the following code in your app.component.ts or a suitable service file.

CODE
import { Component } from '@angular/core';
import { UTIQ } from 'utiq-tech';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})

export class AppComponent {
  constructor() {
  this.initialize();
}

async initialize() {
    const config = { sdkToken: 'SDK_TOKEN', configParams: JSON.stringify(environment.utiq), sdkOptions: { enableLogging: true } };
    await UTIQ.initialize(config);
}

Check MNO Eligibility

To check the eligibility, use the checkMNOEligibility method:

CODE
UTIQ.checkMNOEligibility({ stubToken: STUB_TOKEN });

Show Consent Manager( web only )

To show the consent manager on web, use the showConsentManager method:

CODE
UTIQ.showConsentManager();

Accept Consent

To accept user consent, use the acceptConsent method:

CODE
UTIQ.acceptConsent();

Reject Consent

To reject user consent, use the rejectConsent method:

CODE
UTIQ.rejectConsent();

Is Consent Accepted

To check the user consent, use the isConsentAccepted method:

CODE
const { status: isConsentAccepted } = await UTIQ.isConsentAccepted();

Fetch IDConnect Data

To start the service and get the IDConnect data, use the fetchIdConnectData method:

CODE
await UTIQ.fetchIdConnectData({ stubToken: STUB_TOKEN });

IDConnect Data

Get the IDConnect data previously fetched , use the idConnectData method:

CODE
const { adTechPass, marTechPass } = await UTIQ.idConnectData();

Handle Data Clear

Remove all the data generated or used by UTIQ, use the handleDataClear method:

CODE
UTIQ.handleDataClear();

AddListener

To interact with Utiq events, you need to add the listeners for the Utiq events, use the addListener method:

CODE
UTIQ.addListener('onIdsAvailable', ({ adTechPass, marTechPass }) => {
    console.log(`onIdsAvailable -> mtid: ` + marTechPass + ` , atid: ` + adTechPass);
});

iOS Specific Notes

  1. Permissions: Ensure you have added the necessary permissions in your Info.plist file.

  2. Build Configuration: Make sure to run npx cap sync ios after installing the plugin to update the native iOS project.

  3. Additional Setup: Some plugins might require additional setup in Xcode. Refer to the plugin documentation for more details.

Android Specific Notes

  1. Permissions: Ensure you have added the necessary permissions in your AndroidManifest.xml file.

  2. Build Configuration: Make sure to run npx cap sync android after installing the plugin to update the native Android project.

  3. Proguard Rules: If you are using Proguard, you might need to add specific rules for the plugin. Refer to the plugin documentation for more details.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.