> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gleap.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Introducing

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.io](https://app.gleap.io).

#### Supported platforms

| ✅ iOS | ✅ Android | ✅ Web |
| ----- | --------- | ----- |

### 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](https://pub.dev/packages/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:

```js theme={null}
// 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');
}
```

<img src="https://mintcdn.com/gleap-1d346ffa/b8_EVsZHbtxdB2pN/images/flutterflow_initialize_action.png?fit=max&auto=format&n=b8_EVsZHbtxdB2pN&q=85&s=07a42d257eacccc1baaf63268530bf47" alt="FlutterFlow intialize custom code" width="3474" height="2290" data-path="images/flutterflow_initialize_action.png" />

### Web Installation

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

```js theme={null}
<script>
!function(Gleap,t,i){if(!(Gleap=window.Gleap=window.Gleap||[]).invoked){for(window.GleapActions=[],Gleap.invoked=!0,Gleap.methods=["identify","setEnvironment","setTags","attachCustomData","setCustomData","removeCustomData","clearCustomData","registerCustomAction","trackEvent","log","preFillForm","showSurvey","sendSilentCrashReport","startFeedbackFlow","startBot","setAppBuildNumber","setAppVersionCode","setApiUrl","setFrameUrl","isOpened","open","close","on","setLanguage","setOfflineMode","initialize","disableConsoleLogOverwrite","logEvent","hide","enableShortcuts","showFeedbackButton","destroy","getIdentity","isUserIdentified","clearIdentity","openConversations","openConversation","openHelpCenterCollection","openHelpCenterArticle","openHelpCenter","searchHelpCenter","openNewsArticle","openNews","openFeatureRequests","isLiveMode"],Gleap.f=function(e){return function(){var t=Array.prototype.slice.call(arguments);window.GleapActions.push({e:e,a:t})}},t=0;t<Gleap.methods.length;t++)Gleap[i=Gleap.methods[t]]=Gleap.f(i);Gleap.load=function(){var t=document.getElementsByTagName("head")[0],i=document.createElement("script");i.type="text/javascript",i.async=!0,i.src="https://sdk.gleap.io/latest/index.js",t.appendChild(i)},Gleap.load()}}();
</script>
```

<img src="https://mintcdn.com/gleap-1d346ffa/b8_EVsZHbtxdB2pN/images/flutterflow_web_configuration.png?fit=max&auto=format&n=b8_EVsZHbtxdB2pN&q=85&s=74bb588daf9955a8a3789d407a6a088e" alt="FlutterFlow web installation" width="3474" height="2290" data-path="images/flutterflow_web_configuration.png" />

### 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.

<img src="https://mintcdn.com/gleap-1d346ffa/b8_EVsZHbtxdB2pN/images/flutterflow_main_initialize.png?fit=max&auto=format&n=b8_EVsZHbtxdB2pN&q=85&s=4e496e674ce2799937ecd13558312498" alt="FlutterFlow configure the SDK" width="3474" height="2290" data-path="images/flutterflow_main_initialize.png" />

### Run your app

Deploy and run your app to experience Gleap in action.

<img src="https://mintcdn.com/gleap-1d346ffa/b8_EVsZHbtxdB2pN/images/flutterflow_web_demo.png?fit=max&auto=format&n=b8_EVsZHbtxdB2pN&q=85&s=02e55eee2ef4134a5bbbef845b1704bd" alt="FlutterFlow in action" width="3474" height="2290" data-path="images/flutterflow_web_demo.png" />

### 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](/flutter).

<img src="https://mintcdn.com/gleap-1d346ffa/b8_EVsZHbtxdB2pN/images/flutterflow_custom_action_overview.png?fit=max&auto=format&n=b8_EVsZHbtxdB2pN&q=85&s=ae6c35a8b5a7d5df628fe87cf4aa1350" alt="FlutterFlow configuration options" width="3466" height="1526" data-path="images/flutterflow_custom_action_overview.png" />

### 🎉 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! [hello@gleap.io](mailto:hello@gleap.io)