Gleap setup for FlutterFlow

The Gleap SDK for FlutterFlow is the easiest way to integrate Gleap into your apps. Communicate with your users directly and build better software by discovering their everyday pain points. Gleap is your all-in-one customer feedback tool for apps and websites.

For the SDK to work, you need an API key, which you can get for free at app.gleap.ai.

Supported platforms

Installing the Gleap SDK

1. Navigate to the Custom Code section in FlutterFlow and create a new Custom Action called gleapInitialize.

2. Add the latest Flutter Gleap SDK as a dependency, then refresh the code editor to load the pubspec dependencies.

3. Copy and paste the following code to initialize Gleap, replacing 'YOUR_API_KEY' with your actual API key, and save the configuration:

// Automatic FlutterFlow imports
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:gleap_sdk/gleap_sdk.dart';

Future gleapInitialize() async {
  Gleap.initialize(token: 'YOUR_API_KEY');
}

Web Installation

For web support, go to App Settings > Web Deployment, and paste the following script into the Custom Headers section:

<script>
!function(){if(!(window.Gleap=window.Gleap||[]).invoked){window.GleapActions=[];var e=new Proxy({invoked:!0},{get:function(e,n){return"invoked"===n?e.invoked:function(){var e=Array.prototype.slice.call(arguments);window.GleapActions.push({e:n,a:e})}},set:function(e,n,t){return e[n]=t,!0}});window.Gleap=e;var n=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://sdk.gleap.io/latest/index.js",n.appendChild(t)}}();
</script>

SDK Configuration

To configure the SDK, navigate to main.dart under Custom Files, and add the newly created gleapInitialize function to the Final Actions section. Save the configuration.

Data region

Gleap stores and processes your data in the region you selected at signup: EU (default) or US. FlutterFlow uses the Flutter Gleap SDK, so if your project lives in the US region, select the region in your gleapInitialize custom action before Gleap.initialize (requires gleap_sdk v18.0.0 or newer). EU projects don't need this call.

Future gleapInitialize() async {
  await Gleap.setRegion(region: 'us');
  Gleap.initialize(token: 'YOUR_API_KEY');
}

See Data regions for all hosts and details.

Run your app

Deploy and run your app to experience Gleap in action.

Utilizing the Gleap SDK

You can utilize all the features provided by the Flutter Gleap SDK by creating custom actions for each method. For more information on configuration options, visit the Flutter Gleap documentation.

🎉 You're All Set!

Congratulations! Your Gleap integration is complete, and you're ready to collect valuable user feedback.

🤝 Need help?

We are here to help! [email protected]