Skip to main content
Gainsight Inc.

Integrate Gainsight PX Editor with your Mobile Platform

This document explains the procedure to integrate Gainsight PX Editor with different mobile platforms and frameworks.

Overview

Gainsight PX Mobile Editor helps you manage PX engagements and Product Mapper from your mobile application. 

The In-app Editor allows you to:

  • Preview engagements in the mobile app
  • View the Product Tree
  • Create, edit and delete Module/Features 
  • Add Tap Rules for Module/Features

To use the in-app editor, you need to integrate your mobile application with the following platforms that Gainsight supports:

  • Android
  • iOS
  • React Native
  • Native Script
  • Flutter
  • Xamarin

Overview.jpg

You can activate the editor using deep linking and forwarding the link to the SDK. While forwarding the information, you as a developer have the ability to implement your own logic and permissions before launching the editor.

Integrate Gainsight PX with Android

Prerequisite: Deep linking must be enabled to access the Gainsight PX Editor. For more information on how to create deep links, refer to the Android documentation article.

Integration Procedure

To integrate Gainsight PX with the Android platform:

  1. Add the following to your app AndroidManifest.xml file, in the main activity part:
<intent-filter>       
        <data android:scheme="{SCHEME}" />
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.BROWSABLE" />
        <category android:name="android.intent.category.DEFAULT" />
</intent-filter>               

Note: Setting host attribute is not required.

  1.  After initializing the GainsightPX instance, call the following on the code for the same activity:
  if ((null != intent) && (null != intent.getScheme())) {
            GainsightPX.with(this).enterEditingMode(intent);
  }

Note: You can use the same code on onNewIntent method as well:

if ((null != intent) && (null != intent.getScheme())) {
           GainsightPX.with(this).enterEditingMode(intent);
 }          

Integrate Gainsight PX with iOS

To integrate Gainsight PX with iOS:

  1. Register for editor scheme in Info.plist as per the guidelines mentioned in 

https://developer.apple.com/documentation/xcode/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app

  1. Perform `EnterEditing` in `openURL` method and also in `applicationContinueUserActivity` to support custom URL and deep linking as below:

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : 
Any] = [:]) -> Bool {
          GainsightPX.shared.enterEditingMode(url: url)
          return true
}

func application(_ application: UIApplication, continue userActivity: NSUserActivity,
restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
         guard let incomingURL = userActivity.webpageURL else {
                 return false
         }
         GainsightPX.shared.enterEditingMode(url: incomingURL)
         return true
}                 
          

This integration is supported by all deep linking plugins. However, the procedure is subject to the dependencies as stated here.

Android

To perform the integration, add the following to your android/app/src/main/AndroidManifest.xml file, in the activity object:

<intent-filter>
        <data android:scheme="{SCHEME}" />
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.BROWSABLE" />
        <category android:name="android.intent.category.DEFAULT" />
</intent-filter>        

iOS

Perform the following steps:

  1. Navigate to your iOS/ folder. 

  2. Select the required option from the approaches available to add an editor scheme to the iOS project, as shown in the image below.

IOS.png

  1. Use the Xcode Project settings:

    1. Open the project(Real.xcworkspace) in the iOS folder using Xcode.

    2. From the project settings, select the Info tab.

    3. Add a new URL item by choosing Add items under URL Types.

    4. Add {SCHEME} to URL Schemes.

  2. Info.plist using Xcode:

    1. Open Info.plist using Xcode. 

    2. Add URL Types to plist file.

    3. Add {SCHEME} for URL Schemes items.

Info.plist.png

  1. Open Info.plist as TextEdit:

    1. Add the following code snippet in the file:

<array>
       <dict>
             <key>CFBundleTypeRole</key>
             <string>Editor</string>
             <key>CFBundleURLName</key>
             <string>{APP_BUNDLE_ID}</string>
             <key>CFBundleURLSchemes</key>
             <array>
                    <string>{SCHEME}</string>
             </array>
       </dict>
</array>                       

Prerequisite: Custom URL/deep linking in iOS and Android must be implemented. For more information, refer to the Linking article.

Perform the following integration steps:

iOS

After initialising Gainsight, in componentDidMountState of the App.js, listen to the `url` event of the Linking component and remove the listener for `url` on componentWillUnmount.

Android

After initialising Gainsight, in componentDidMountState of the App.js, implement `getInitialURL` callback.

A sample implementation using Linking is given below:

componentDidMount() {
     //Initialise GainsightPX
     If (Platform.OS == “ios”) {
              Linking.addEventListener(“url”, this.handleOpenURL);
     }
     Linking.getInitialURL().then( url => {
             if (url != null) {
                       GainsightPX.getInstance().enterEditing(url);
             }
     });
}
componentWillUnmount() {
     Linking.removeEventListener(“url”, this.handleOpenURL);
}
handleOpenURL = event => {
       if (event.url != null) { GainsightPX.getInstance().enterEditing(url);}
}                                                

Integrate Gainsight PX with Native Script

The integration procedure is based on Urlhandler plugin method, but supported by all deep linking plugins:

Android

To perform the integration, add the following to your app/App_Resources/Android/src/main/AndroidManifest.xml file, in the activity object:

<intent-filter>
        <data android:scheme="{SCHEME}" />
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.BROWSABLE" />
        <category android:name="android.intent.category.DEFAULT" />
</intent-filter>        
               

iOS

Navigate to your app/App_Resources/ios/ folder. Perform the following steps to add editor scheme to ios project.

  1. Info.plist using Xcode:
    1. Open Info.plist using Xcode.
    2. Add URL Types to plist file.
    3. Add {SCHEME} for URL Schemes items.

infor.plist 2.png

  1. Info.plist as TextEdit:

    1. Open Info.plist using TextEdit file.

    2. Add the following code snippet in the file:

<array>
       <dict>
             <key>CFBundleTypeRole</key>
             <string>Editor</string>
             <key>CFBundleURLName</key>
             <string>{APP_BUNDLE_ID}</string>
             <key>CFBundleURLSchemes</key>
             <array>
                    <string>{SCHEME}</string>
             </array>
      </dict> 
</array>                 

On NativeScript application

Add the following code to your app ts file:

handleOpenURL((appURL: AppURL) => {
    Gainsight.enterEditing(appURL.toString());
})    

Integrate Gainsight PX with Flutter

The integration procedure is based on Uni Link plugin method, but supported by all deep linking plugins:

Android


On your android/app/src/main/AndroidManifest.xml, add the following code in the MainActivity section:

<intent-filter>
               <data android:scheme="{SCHEME}" />
               <action android:name="android.intent.action.VIEW" />
               <category android:name="android.intent.category.BROWSABLE" />
               <category android:name="android.intent.category.DEFAULT" />
</intent-filter>               

iOS

Prerequisite: The scheme must be added to your iOS project, by referring to this article.

Alternatively, you can follow one of the following approaches to add the editor scheme to iOS project:

  1. Use Xcode Project settings:

    1. Open the project(Runner.xcodeproj or Runner.xcworkspace if pods are present) in the ios folder using Xcode.

    2. In project settings, select the Info tab.

    3. Add a new URL item by choosing Add items under URL Types.

    4. Add {SCHEME} to URL Schemes.

flutter andriod.png

  1. Using Xcode:

    1. Navigate to ios/Runner/ folder.

    2. Open Info.plist using Xcode.

    3. Add URL Types to plist file.

    4. Add {SCHEME} for URL Schemes items.

5.png

  1.  using Xcode:

    1. Navigate to ios/Runner/ folder.

    2. Open the info.plist file as a TextEdit file.

    3. Add the following code snippet in the file:

<array>
       <dict>
             <key>CFBundleTypeRole</key>
             <string>Editor</string>
             <key>CFBundleURLName</key>
             <string>{APP_BUNDLE_ID}</string>
             <key>CFBundleURLSchemes</key>
             <array>
                    <string>{SCHEME}</string>
             </array>
       </dict>
</array>                   

While starting the app state, call the following code if the app was started using deep linking:

{
  String initialLink = await getInitialLink();
  if (initialLink != null) GainsightPX.instance.enterEditing(initialLink);
} on PlatformException {
         print('Failed to get initial link.');
} on FormatException {
         print('Failed to parse the initial link as Uri.');
}                    

Also, if you want to use deep linking even when the application is active in the background, you must register to the link stream. It is recommended to save the stream so that it can be canceled when exiting the app:

Use the following code to register:

getLinksStream().listen((String link) {
         if (link != null) {
                   GainsightPX.instance.enterEditing(link);
         }
}, onError: (err) {
       print('got err: $err');
});                          

Integrate Gainsight PX with Xamarin

Android

Perform the following steps to integrate:

  1. In the main activity (or the activity you want to open when starting the editor) .cs file, add the following before the class definition:

Modifying your code from:

[Activity(Label = "{Your App Name}", MainLauncher = true, Icon = "@mipmap/icon")]
public class MainActivity : Activity {...}

to:

 [Activity(Label = "{Your App Name}", MainLauncher = true, Icon = "@mipmap/icon")]
 [IntentFilter(new [] { Intent.ActionView },
         Categories = new[] { Intent.CategoryBrowsable, Intent.CategoryDefault },
          DataScheme = “{Gainsight PX SCHEME}”)]
  public class MainActivity : Activity {...}         
  1. Check the intent used for triggering the activity if it has data information. This needs to be done on the onCreate method, but you can also add the check on onNewIntent method (depending on your launch options).

Add the following code:

Intent intent = this.Intent;
if ((null != intent) && (null != intent.Data))
{
   Gainsight.EnterEditingMode(intent.Data.ToString());
 }   

iOS

Perform the following steps:

  1. Open the Info.plist in the file listings of Xamarin iOS Application in Visual Studio. 

  2. Choose Advanced tab for Info.plist file.

6.png

  1. Choose  “Add URL Type” and add the {Gainsight PX SCHEME} in the “URL Schemes” field.

On Xamarin Application

Override the “OpenUrl” and “ContinueUserActivity” methods in AppDelegate.cs file and send the URL absoluteString value to Gainsight EnterEditingMode method as shown below:

[Export("application:openURL:options:")]
  public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
{ 
          Gainsight.EnterEditingMode(url.AbsoluteString);
          return true;
}
[Export("application:continueUserActivity:restorationHandler:")]
public override bool ContinueUserActivity(UIApplication application,
    NSUserActivity userActivity,
    UIApplicationRestorationHandler completionHandler)
{
    NSUrl incomingURL = userActivity.WebPageUrl;
     if (incomingURL == null)
     {
             Return false;
     }
     Gainsight.EnterEditingMode(incomingURL.AbsoluteString);
     return true;
}                  
             

 

  • Was this article helpful?