Cordova, formerly called as PhoneGap, is a platform to build native mobile applications using HTML5, CSS and JavaScript. It acts a container for running a web application written in HTML, CSS, JS. Ionic uses Cordova to deploy native apps.

Here's how you can integrate the WebEngage SDK with your hybrid app:

1. Install WebEngage plugin

Use the below command to install WebEngage plugin for both Android and iOS platforms.

cordova plugin add cordova-plugin-webengage --fetch

Steps for iOS

Step 1: Download the SDK file here. Extract the downloaded ZIP file.

• You will find two directories in the extracted ZIP: xc10 and xc11. If you are using Xcode 10 use the Webengage.framework within the xc10 directory. For Xcode 11 and above use the one in xc11.

Step 2: Select the name of the project in the project navigator. The project editor appears in the Editor area of the Xcode workspace window.

Step 3: Click on the General tab at the top of project editor.

Step 4: In the section Embedded Binaries click on the "+" button to open the file chooser for your project. Open WebEngage.framework and select Copy if needed option. This will copy the framework to your project directory.

Step 5: Under Linked Frameworks and Libraries click the "+" button and add SystemConfiguration.framework and CoreLocation.framework.

Step 6: In the 'Build Settings' tab of the project editor, search for Other Linker Flags option. Add -lsqlite3 and -ObjC under it as shown below.

Step 7: Enable Push Notifications.

a. Enter Project Navigator view.

b. Select your main app target from the expanded sidebar or from the dropdown menu, then select the Capabilities tab.

c. If Push Notifications isn't enabled, click the switch to add the "Push Notifications" entitlement to your app. If you are using Xcode 8 or above, ensure that a YOUR-APP-NAME.entitlements file has been added to your project.

2. Integrate the SDK

Open config.xml file from the root directory of your project and add the following snippet in it.

Please note the following:

1. License code: Obtain your license code from the Account Setup section of your WebEngage dashboard and paste it to replace YOUR_WEBENGAGE_LICENSE_CODE in both Android and iOS specific sections in the below snippet.

2. Debug: This is optional. Debug logs from WebEngage SDK are printed if
   a. the value of com.webengage.sdk.android.debug tag is true for Android and
   b. the value of WEGLogLevel tag is VERBOSE for iOS.
   (Default value of the corresponding tags is false for Android and DEFAULT for iOS.)

<widget ... xmlns:android="http://schemas.android.com/apk/res/android">
    ...
    <!-- For Android -->
    <platform name="android">
        <config-file parent="/manifest/application" target="AndroidManifest.xml">
            ...
            <meta-data android:name="com.webengage.sdk.android.key" android:value="YOUR_WEBENGAGE_LICENSE_CODE" />
            <meta-data android:name="com.webengage.sdk.android.debug" android:value="false" />

        </config-file>
    </platform>

    <!-- For iOS -->
    <platform name="ios">
        ...
        <config-file parent="WEGLicenseCode" target="*-Info.plist">
            <string>YOUR_WEBENGAGE_LICENSE_CODE</string>
        </config-file>
        <config-file parent="WEGLogLevel" target="*-Info.plist">
            <string>DEFAULT</string>
        </config-file>
    <.platform>

</widget>

Make sure you replace YOUR_WEBENGAGE_LICENSE_CODE with your WebEngage license code

As shown above, naviagte to the Account Setup section to find your license code. Your License Code might start with tilde (~).

3. Initialize the SDK

In your onDeviceReady callback, call webengage.engage.

onDeviceReady: function() {

/**
Additional WebEngage options and callbacks to be 
registered here before calling webengage.engage()
**/

webengage.engage();
}

Attribution Tracking (Android only)

Add the following install-referrer library in /platforms/android/app/build.gradle file.

dependencies {
    ...
    implementation 'com.android.installreferrer:installreferrer:1.1.1'
}

🚧

Please note

App Installed event and First Acquisition Details data in user profile will not be tracked on your Android app unless you follow the above step.

4. Additional steps (Optional)

For other integration such as location tracking, please refer to the Advanced section.

🚧

Congratulations!

You have successfully integrated WebEngage with your Hybrid app and are sending user session data to WebEngage. Please note that it may take up to a few minutes for data to reflect in your dashboard.

Please feel free to drop in a few lines at [email protected] in case you have any further queries. We're always just an email away!