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, acceptConsent, rejectConsent, and startService.

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

Integration Steps

Initialize the Plugin

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);
}

Accept Consent

To accept user consent, use the acceptConsent method:

CODE
async acceptConsent() {
  await UTIQ.acceptConsent();
}

Reject Consent

To reject user consent, use the rejectConsent method:

CODE
async rejectConsent() {
  await UTIQ.rejectConsent();
}

Start Service

To start the service, use the startService method:

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

AddListener

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

CODE
UTIQ.addListener('onIdsAvailable', (info: any) => {
    this.atid = Object.values(info)[0];
    this.mtid = Object.values(info)[1];
    console.log(`onIdsAvailable -> mtid: ` + this.mtid + ` , atid: ` + this.atid);
});

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.