Developer's Guide To Installing The Pendo Flutter SDK

Note: This article refers to iOS setup 

Overview

Pendo captures product usage data, gathers user feedback, and lets you communicate in-app to onboard, educate, and guide users to value. Pendo tagging and guides are codeless, no engineering resources are required. However, we need engineers to install the SDK and initialize Pendo in your app. Information about Pendo and the general installation process is available in the Installation Planning article. With preparation, the technical installation of the Pendo SDK is straightforward.

The SDK is the only technical piece of the initial Pendo installation. Once the SDK is properly installed anyone can use Pendo. The SDK tracks a visitor’s activity in your app, loads guides, and captures session metadata. Additional development may be done later to optimize and expand the use of Pendo for mobile, like track events. The SDK in your mobile app also needs to be updated when we release new versions to use the latest Pendo features.

Pendo has integrations with other popular CRM, analytics, and collaboration tools. The scope of integrations ranges from native integrations with a codeless installation wizard to custom development and will not be covered in this article. Check our Integrations articles for help with our popular integrations or reach out to a Pendo representative for help with integrations in your subscription after completing the SDK installation.

Requirements

Install Pendo Flutter Plugin SDK

 In the application folder, run the following command:

flutter pub add pendo_sdk

 

Pendo Setup and Initialization

The SDK initialization has two parts, importing the SDK and initializing the SDK when the visitor is identified. The Pendo SDK is imported during application onCreate. The initialization call can occur in any activity where you want to identify the current visitor and the start a session.

Pendo must be initialized to identify the user, begin data collection, and display guide content. The SDK can be initialized when the visitor is authenticated and metadata is known or with an anonymous visitor. Initialization can occur when the application starts, later when the visitor is identified, or any time you need to identify the current visitor and start a new session.

Identified visitors use a defined schema to create visitor and account objects with associated metadata in Pendo. Refer to the article on Visitor and Account Metadata for additional information on how this data is defined and used in Pendo. Passing null or "" as the visitorId will generate an anonymous visitor ID.

  • visitorId - String containing a unique User ID (e.g. "user-SFGH-56gh"), this ID should match the visitor ID for any other Pendo web or mobile apps
  • accountId - String containing unique Account ID, affiliation of the visitor to a specific company or group (e.g. Acme Inc), this ID should match the visitor ID for any other Pendo web or mobile apps
  • visitorData - Visitor metadata (e.g email, phone, country, etc.) 
  • accountData - Account metadata (e.g tier, level, ARR, etc)

1. In the application AppDelegate file add the following code:

import Pendo

Add or modify the function application:openURL:options::

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {

        if url.scheme?.range(of: "pendo") != nil {

            PendoManager.shared().initWith(url)

            return true

        }

        return true

    }

Pendo SDK Integration

In the application main file (lib/main.dart), add the following code:

import 'package:pendo_sdk/pendo_sdk.dart';

Configure Pendo Track Events to capture analytics to notify Pendo of analytics events. Add the following code in the initState method:

dynamic initParams = {
    'visitorId': 'John Smith',
    'accountId': 'Acme inc.',
    'visitorData': {
        'age': 25,
        'country': 'USA'
    },
    'accountData': {
        'Tier': 1,
        'Size': 'Enterprise'
    }
};

var pendoKey = '[PENDO_KEY]';
PendoFlutterPlugin.initSDK(pendoKey,
        initParams); // initParams is optional.

 

Track Events

In the application files where you want to track an event, add the following code:

import 'package:pendo_sdk/pendo_sdk.dart';
PendoFlutterPlugin.trackEventWithProperties('name', { 'firstProperty': 'firstPropertyValue', 'secondProperty': 'secondPropertyValue'});

Setup Device Connection

Follow these steps to enable Mobile device connectivity for testing.

  1. Under Info > URL Types, create a new URL by clicking the + button
  2. Set Identifier to pendo-pairing or any name of your choosing
  3. Set URL Scheme to pendo-[PENDO_SCHEME]

Test your changes

  • Test using Xcode:
    Run the app while attached to Xcode.
    Review the device log and look for the following message:
    Pendo Mobile SDK was successfully integrated and connected to the server.
  • Test using the Pendo UI:
    Confirm that you can see your app under subscription settings as Integrated.