Build a sample app to evaluate the Tealeaf Flutter SDK

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

Requirements

• Acoustic Connect. 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. We recommend using Flutter 3.16.0 with Gradle 7.5.1.
• Mobile app compatibility. You can run the sample app on simulators and real devices. Supported operating systems: iOS 13 and later, 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 Tealeaf-Flutter/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.

Firstly, run the sample app and click around.

Secondly, search the terminal emulator log or the debug area of your IDE for the session ID. Here is an example from a terminal emulator:

Killswitch has enabled Tealeaf with following session id:FA695124CCA445034996E52DE7C94A82

You will find the session ID repeated throughout the log.

I/EOCore  ( 4061): PostTask with session id:FA695124CCA445034996E52DE7C94A82

Thirdly, log in to your Tealeaf account. Go to Optimise > Session search. Find the session by the ID and click to play it back. To learn more about the Sessions module, see Session replay in our help centre.

📘

Note

User sessions in Tealeaf time out after 30 minutes of inactivity.