🚧
Recomendamos que você use a versão estável mais recente do Flutter, definida em pubspec.yaml. A Inngage SDK foi verificado pela última vez na versão Flutter 3.0.0 • channel stable

Versões suportadas:
sdk: >=2.18.0 <4.0.0
flutter: >=2.5.0

Passos da integração:

1. Configuração do projeto no Firebase
2. Configuração no painel Inngage
3. Configuração nativa iOS
4. Configuração nativa Android

Após fazer as configurações necessárias para que o seu código tenha acesso nativo às push notifications do Firebase iremos instalar a SDK da Inngage.

1. Preparando o ambiente de produção

Instale a SDK no seu projeto, procure a ultima versão e instale no pubspec.yaml da seguinte forma:

inngage_plugin: ^x.y.z

2. Implementando a SDK

Importe "InngageSDK" do módulo da SDK, da seguinte forma:

import 'package:inngage_plugin/inngage_sdk.dart';

InngageSDK.subscribe(): este método deve ser chamado para que o usuário seja informado da chegada das notificações e assim inicializar o inngage dentro do seu app, quase sempre chamado dentro do ‘main.dart' mas dependendo da sua arquitetura pode ser chamado dentro do MyApp() essa função é responsável por autorizar o acesso à API da Inngage e ao Firebase Cloud Messaging e ativar os listeners de notificações.

void main() async {
  // it should be the first line in main method
  WidgetsFlutterBinding.ensureInitialized();
  await InngageSDK.subscribe(
   appToken: 'Trocar pelo App_Token do aplicativo',
   friendlyIdentifier: 'Trocar pelo objeto identificador do usuário',
   navigatorKey: navigatorKey,
   requestAdvertiserId:true,
   blockDeepLink: true,
   firebaseListenCallback:(data) => print(data['additional_data']),
 );
  runApp(MyApp());
}

Parametros requeridos ou obrigatórios:

@required appToken: App token do aplicativo
@required navigatorKey: No Flutter, as GlobalKeys podem ser usadas para acessar o estado de um
firebaseListenCallback: É possível passar uma função que seja chamada ao final do onBackgroundMessage do firebase. O parametro data é um Map<String, dynamic> com informações do push recebido proveniente do RemoteMessage message.data
StatefulWidget.
requestAdvertiserId: Valor booleano, se true solicita o Advertising Id do android e idfa no IOS, falso por padrão.

blockDeepLink: do tipo booleano é utilizado para bloquear a ação do deeplink em abrir um navegador, passe o valor true para efetivar esse bloqueio, valor padrão 'false'.

firebaseListenCallback: é um callback chamado quando há uma ação de click em um push notification, retornando no campo 'data' todas as informações do push recebido.

No main.dart, passamos nossa GlobalKey como NavigatorKey para nosso MaterialApp esta é a mesma navigatorKey que passamos no InngageSDK.subscribe()

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      home: HomePage(),
    );
  }

2.1 Configuração do Firebase

InngageNotificationMessage.subscribe();

InngageNotificationMessage.subscribe(): : este método deve ser chamado para fazer as configurações de push, inclusive para solicitar o acesso as notificações do usuário.

3. Adicionando Custom Fields / User Properties

A SDK permite ao desenvolvedor que está integrando a SDK, adicionar campos customizáveis, como Nome, e-mail, gênero etc. Esses parâmetros devem antes ser configurados na plataforma da Inngage.

final json = {
    "nome": "Leonardo",
    "dt_nascimento": "01/09/1970",
    "genero": "M"
  };

await InngageSDK.subscribe(
   appToken: 'Trocar pelo App_Token do aplicativo',
   friendlyIdentifier: '[email protected]',
   phoneNumber: '5511999998888',
   email: '[email protected]',
   customFields: json,
   navigatorKey: navigatorKey,
   requestAdvertiserId:true,
   blockDeepLink: true,
   firebaseListenCallback: (data) => print(data['additional_data']),
 );

A SDK permite ao desenvolvedor que está integrando a SDK, adicionar campos customizáveis, como Nome, e-mail, gênero etc. Esses parâmetros devem antes ser configurados na plataforma da Inngage.

Caso for necessário registrar um usuário em área não logada do App, o parâmetro firendlyIdentifier deve vir como null, assim atribuiremos o mesmo ao Device Token do mesmo.

4. Alterando Identifier e adicionando novos Custom Fields (Fora do subscription)

Caso o App precise registrar um identificador amigável no momento do login, o método Subscribe não precisa ser chamado novamente,

await InngageUtils.addUserData(
   identifier:'' ,
   registration:'', 
   	{
    	"nome": "Leonardo",
    	"dt_nascimento": "1970-09-10",
    	"genero": "M"
  	};
 );

Quando enviado um registration válido + identifier, a API realiza a troca do identifier para o informado na request, e adiciona os demais custom fields.

Caso apenas o identifier ou apenas registration for informado a API apenas realiza o registro dos Custom Fields

5. Registro de eventos

A SDK permite ao desenvolvedor que está integrando a SDK, enviar eventos customizados. Lembre-se de configura-los na plataforma Inngage.

await InngageEvent.sendEvent(
     eventName: 'compra',
     appToken: 'MyAppToken',
     identifier: '[email protected]',
     //registration: '', Firebase Token,
     conversion_event: true, //
     conversion_value: 1090.00, //Valor monetário da conversão
     conversion_notid: "2314klbkf41bsgav4hg12ab24v1h41", //ID da mensagem
     eventValues: {
     		'produto': 'Bola de tenis',//Exemplo
        'valor': '40'//Exemplo
    },
  );

Temos 3 valores que sao obrigatórios para podermos ter uma boa performance e integração com Inngage

eventName: Define o nome que voce ira enviar para voce poder identificar de forma rápida na plataforma
appToken: Precisamos validar suas credenciais.
Identifier ou registration (Firebase token): usamos pra identificar o usuario, pelo menos uma deve ser informada;

Você também pode adicionar valores avançados para esse evento,
eventValues: Array com chave e valor com dados que serão anexados ao evento.

A API de eventos também pode receber um evento de conversão, para isso existem os campos:
conversion_event: True
conversion_value: Valor monetário da conversão (Padrão FLOAT 11000.00)
conversion_notid: Opção para enviar o ID Único da Notificação da Inngage (NOTID), que foi recebido pelo app no momento do Push, para assim atribuir uma conversão a determinado Push

6. InngageWebViewProperties

A SDK permite ao desenvolvedor que está integrando a SDK, customizar a Web View e deixar mais amigável e com a cara do seu app 😉, vamos explorar estas propriedades?

A Web View será aberta automaticamente quando o usuário clicar em uma Notificação que contenha uma URL não Deep Link.

final inngageWebViewProperties = InngageWebViewProperties(
    appBarColor: Colors.pink,
    appBarText: Text(
      'AppTitle',
    ),
    backgroundColor: Colors.white,
    loaderColor: Colors.pink,
    debuggingEnabled: true,
    withJavascript: true,
    withLocalStorage: true,
    withZoom: true,
  );

Todos são parâmetros opcionais e maioria deles tem defaults caso voce não precisar customizar:

appBarColor: Opção para mudar a cor do app bar, a barra superior de navegação
appBarText: Opção para colocar um Texto na barra superior de navegação, podendo assim ganhar todo o poder do flutter (fontsize,styles,etc).
backgroundColor: Opção para alterar a cor do fundo da pagina da webview por default é white.
loaderColor: Opção para alterar a cor do loading da webview, a sdk utiliza o CircularProgressIndicator como componente de loading.
customLoading: Aqui deixamos uma propriedade bem legal caso você queira utilizar sua própria animação de loaging, ele recebe um widget como parâmetro, quando aplicada ele vai ignorar o loaderDefault do app e utilizar o componente que voce utilizar.

🚧
Caso tenha algum problema para abrir URLs no Android:
A partir da API31 (Android 12), seu aplicativo Android deve listar todos os aplicativos com os quais interage. Adicione:
in your android manifest to bypass it or specifically list them.
Para mais informações: https://developer.android.com/about/versions/11/privacy/package-visibility

7. In App Messages

A SDK Flutter da Inngage tem a capacidade de disponibilizar ao usuários In App Messages. As mensagens podem ser enviadas tanto pela plataforma e pela API, e automaticamente é apresentada de acordo com as configurações recebidas no payload do Firebase.

Para apresentar use o widget InngageInAppWidget nas paginas que deseja possibilitar a apresentação de uma in app message.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      home: InngageInAppWidget(child: HomePage()),
    );
  }

É possível bloquear a chamada do deeplink e receber um callback com o link recebido no inapp.

InngageInapp.blockDeepLink = true;
    InngageInapp.deepLinkCallback = (link){
      print(link);
    };

Integração Flutter

🚧

Passos da integração:

1. Preparando o ambiente de produção

2. Implementando a SDK

2.1 Configuração do Firebase

3. Adicionando Custom Fields / User Properties

4. Alterando Identifier e adicionando novos Custom Fields (Fora do subscription)

5. Registro de eventos

6. InngageWebViewProperties

🚧
Caso tenha algum problema para abrir URLs no Android:

7. In App Messages

🚧

Passos da integração:

1. Preparando o ambiente de produção

2. Implementando a SDK

2.1 Configuração do Firebase

3. Adicionando Custom Fields / User Properties

4. Alterando Identifier e adicionando novos Custom Fields (Fora do subscription)

5. Registro de eventos

6. InngageWebViewProperties

🚧Caso tenha algum problema para abrir URLs no Android:

7. In App Messages

🚧
Caso tenha algum problema para abrir URLs no Android: