Build a sample app to evaluate the Tealeaf Flutter SDK

Before you start integrating the Tealeaf SDK into your Flutter-based app, we recommend installing our sample app with the SDK.

Requirements

• Acoustic Tealeaf. To view captured sessions and playback from the sample app, you need an active Tealeaf subscription.
• Development environment. To build and run the sample app, you need a standard Flutter environment.
• Mobile app compatibility. You can run the sample app on simulators and real devices. Supported operating systems: iOS 13-15, Android 5.0 (API level 21) and later.

Before you begin

During the setup, you will need to register the sample app with your Acoustic Tealeaf credentials. You can generate them yourself through the Tealeaf interface.

1. Log in to Acoustic Tealeaf as an administrator.
2. In the menu bar, click on your user profile and select Admin.

3. On the Admin page, open the Applications tab.

4. If a new app is required, click to add an app and fill out required settings.
5. Click the SDK link for your app. Copy access credentials from any tab: application code and post message URL. Keep them handy for the setup.

Setup instructions

1. Clone the sample app code from our GitHub repository.

git clone https://github.com/go-acoustic/Tealeaf-Flutter

2. Update the project using the pub package manager.

cd Tealeaf-Flutter
flutter clean && flutter pub get
cd example/gallery 
flutter clean && flutter pub get

3. Navigate to the iOS project directory, delete podfile.lock and then update Pods.

cd Tealeaf-Flutter/example/gallery/ios
rm podfile.lock
pod update

4. Open the primary configuration file: Tealeaf-Flutter/example/gallery/TealeafConfig.json. Update 2 keys in it using your Tealeaf credentials: AppKey and PostMessageUrl.
5. Start a target device (iOS or Android).
6. Change to the project directory and run the sample app from there.

cd Tealeaf-Flutter/example/gallery
flutter run 

If using an IDE, keep the following in mind:

• To open the iOS version with Xcode, use the Tealeaf-Flutter/example/gallery/iOS/Runner.xcworkspace file (not Tealeaf-Flutter/example/gallery/ios/Runner.xcodeproj).
• For the Android version, open the following directory in Android Studio: Tealeaf-Flutter/example/gallery.

Test session replay

Now you can check how user behavior data is captured.

1. Run the sample app and click around.
2. In your Tealeaf account, go to Optimise > Session search.
3. Find the session and click to play it back.

Notes:

• To learn more about the Sessions module, see Session replay in our marketing guide.
• User sessions in Tealeaf time out after 30 minutes of inactivity.