📘
A versão mais recente da SDK React Native é a v4.0.0-beta.3, que está disponível atualmente.

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

Instalação

Ambiente de desenvolvimento

Antes de começar a utilizar nossa SDK, instale as dependências externas utilizadas:

"dependencies": {
  "@notifee/react-native": "^9.1.8",
  "@react-native-async-storage/async-storage": "^2.2.0",
  "@react-native-firebase/app": "^23.4.1",
  "@react-native-firebase/messaging": "^23.4.1",
  "react-native-device-info": "^14.1.1",
  "react-native-inappbrowser-reborn": "^3.7.0",
  "react-native-localize": "^3.5.4",
  "react-native-permissions": "^5.4.2",
}

📘
Recomendação: Certifique-se de instalar as versões compatíveis; ver mais aqui. Para a dependência react-native-inappbrowser-reborn, siga as instruções da seção "Getting Started" na documentação oficial para garantir o funcionamento adequado na abertura de URLs do tipo Weblink. Consulte o link a seguir para mais detalhes:
https://www.npmjs.com/package/react-native-inappbrowser-reborn

Importando o FCM Token (API Key)

Para aproveitar nossos SDKs, será necessário importar o FCM Token (API Key) do seu projeto Firebase em nossa plataforma. Siga o passo a passo neste link para executar essa ação.

Instalando o package utilizando o NPM ou YARN

Para adicionar o SDK Flutter da Inngage ao seu projeto, execute o seguinte comando utilizando o NPM:

npm i inngage-react

Este comando adiciona a seguinte linha no arquivo package.json de seu pacote:

"dependencies": {
	"inngage-react": "^4.0.0-beta.3",
}

📘
Se a instalação via npm não funcionar corretamente, você pode instalar a dependência utilizando o yarn.

Para instalar a SDK com o yarn, siga os passos abaixo:

No arquivo package.json, adicione a seguinte dependência em dependencies: "inngage-react": "^4.0.0-beta.3".
No terminal, dentro da pasta do seu projeto, execute o comando: yarn install. Isso irá instalar a SDK corretamente.

Inclusão da dependência

Após configurar o SDK React Native da Inngage, é simples importá-lo em seu projeto. Para isso, basta adicionar o pacote ao seu código:

import Inngage from 'inngage-react'

🚧
Recomendamos que você utilize a versão estável mais recente do React Native, definida no arquivo package.json. A Inngage SDK React Native 4.0.0-beta.2 foi verificada pela última vez na versão: React Native 0.82.0 • canal estável.

Implementando a SDK

Notificações push

As notificações serão enviadas do servidor da Inngage para um ou mais dispositivos móveis, mesmo quando o aplicativo estiver em primeiro plano, segundo plano ou até mesmo fechado. Essas mensagens têm o objetivo de alertar o usuário sobre informações importantes, atualizações ou qualquer outro dado relevante relacionado ao seu aplicativo.

As notificações push aparecem na tela de bloqueio ou na barra de notificações do dispositivo. Quando o usuário toca na notificação, o aplicativo é aberto e pode direcioná-lo para uma página específica ou exibir mais detalhes sobre o conteúdo da notificação.

Inngage.Subscribe()

Esta função desempenha a função de registrar ou inscrever o usuário na plataforma Inngage, sendo aplicável em diversas ocasiões, como ao abrir o aplicativo, durante o processo de login, ou ao se cadastrar, entre outras situações oportunas. Geralmente, é chamado no arquivo index.ts, mas, dependendo da arquitetura do seu aplicativo, pode ser chamado dentro de uma classe ou função.

let subscription = {
  appToken: "Trocar pelo App Token do aplicativo",
  friendlyIdentifier: "Trocar pelo objeto Identificador do usuário",
  customFields: {}, // Campo opcional.
  phoneNumer: "Trocar pelo telefone do usuário", // Campo opcional. Ex: "5511999991234"
  email:'Trocar pelo email do usuário', // Campo opcional. Ex: "[email protected]"
}

async function InngageSubscribeSDK() {
  await Inngage.subscribe(subscription);
}

InngageSubscribeSDK();

O trecho de código menciona alguns parâmetros e funcionalidades do Inngage SDK no contexto do React Native. Aqui está uma explicação das principais informações:

appToken: É o token do aplicativo na plataforma Inngage, essencial para a comunicação com os serviços da Inngage.
friendlyIdentifier: É usado para identificar o usuário dentro do sistema. Esse parâmetro deve ser preenchido para que o usuário possa ser corretamente associado e receber as notificações push de forma personalizada.
customFields: Este parâmetro permite ao desenvolvedor adicionar campos personalizados, como: nome, email, gênero, etc. Eles devem antes ser configurados na plataforma da Inngage.
phoneNumber: Você pode registrar o número de telefone/celular do usuário. O parâmetro é opcional.
email: Você pode registrar o email do usuário. O parâmetro é opcional.

📘
Para assegurar uma rastreabilidade completa das atividades do usuário, Recomendamos que esse método seja chamado a cada nova sessão do usuário. Essa prática é particularmente relevante, pois utilizamos esse método para registrar as sessões do usuário na plataforma Inngage.

Inngage.notificationListener()

Essa função é responsável em realizar as configurações de push no aplicativo e, principalmente, solicitar o acesso às notificações do usuário.

Inngage.notificationListener((notification: any) => {
  console.log(notification) // Callback dos dados do firebase 
}

Permite que uma função seja passada para ser chamada quando o aplicativo estiver em segundo plano e receber uma notificação push contendo os dados da notificação pelo remoteMessage.

Ao executar essa função, o aplicativo informa ao sistema operacional que deseja receber notificações push e é autorizado a fazê-lo, desde que o usuário conceda permissão para receber tais notificações.

Para configurar um manipulador de segundo plano e fechado, é preciso chamar o método messagingHeadlessTask() contendo o setBackgroundMessageHandler no index.js. Adicione o seguinte código:

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

import { messagingHeadlessTask } from 'inngage-react'; // Importe a função da Inngage.

messagingHeadlessTask(); // Adicione este método.

AppRegistry.registerComponent(appName, () => App);

📘
Caso queiram verificar os logs da Inngage enquanto estão desenvolvendo, basta implementar no seu código o método Inngage.setDebugMode(true).

Personalização (para sua identidade)

Atualizando e/ou adicionando novos Campos Personalizados

Com o método addUserData(), você poderá atualizar o valor do campo personalizado configurado no Inngage.Subscribe(). Além disso, é possível adicionar um novo campo, inserindo-o no método. Dessa maneira, mesmo que você chame o Subscribe novamente sem ter configurado o novo campo nele, ele será carregado automaticamente.

await Inngage.addUserData({
  "name": "Inngage",
  "age": 20,
  "login": "ativo"
})

É importante ressaltar que todos os campos personalizáveis devem ser configurados na plataforma, sendo o nome do campo na plataforma exatamente igual ao que for configurado no código.

🚧
Se o campo tiver um valor definido no método Subscribe, ao passar por ele novamente, o valor do campo será definido conforme estiver nesse método, e não como foi configurado no addUserData.

Envio de eventos

A SDK permite que o desenvolvedor que está integrando a SDK envie eventos customizados. É importante configurá-los na plataforma Inngage para garantir uma boa performance e integração.

let event = {
    eventName: "dados_usuario",
    conversionEvent: true, // Campo opcional
    conversionValue: 1090.00, // Valor monetário da conversão. Campo opcional
    conversionNotId: "2314klbkf41bsgav4hg12ab24v1h41", // ID da mensagem. Campo opcional
    eventValues: {
      "produto": 'Bola de tenis',
    	"valor": '40' 
    } // Exemplo de valores. (Opcional)
}

async function InngageSendEvent() {
  await Inngage.sendEvent(event)
}

InngageSendEvent();

Existem três valores obrigatórios para garantir o correto funcionamento:

eventName: Define o nome do evento, que será usado para identificá-lo rapidamente na plataforma.

Você também pode adicionar valores avançados para esse evento usando o parâmetro event_values, que é um array contendo chaves e valores 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 seguintes campos:

conversion_event: Defina como True para indicar que é um evento de conversão.
conversion_value: Esse campo permite inserir o valor monetário da conversão. O valor 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. Isso possibilita atribuir uma conversão a um determinado Push."

In App Messages

A SDK React Native da Inngage permite a exibição de Mensagens In App para os usuários. Essas mensagens podem ser enviadas tanto pela plataforma quanto pela API e são automaticamente apresentadas com base nas configurações recebidas no payload do Firebase.

Importando o Componente InApp

Para apresentar as mensagens In App, importe o componente InApp em seu projeto:

import { InApp } from 'inngage-react';

Configuração da In App no projeto

Para garantir que as mensagens In App funcionem corretamente em todos os cenários (aplicativo aberto, em segundo plano e fechado), siga estas etapas:

Adicionar um Estado para Controlar a Exibição da In App

Crie um estado para controlar quando a mensagem In App deve ser exibida. O useInAppHandler detectará a chegada de mensagens In App e exibirá no aplicativo ao abri-lo do cenário em segundo plano ou fechado:

import { useInAppHandler } from 'inngage-react'

const { showInApp, setShowInApp } = useInAppHandler();

Ouvir as notificações

Utilize o notificationListener da Inngage para ouvir a chegada das mensagens In App no cenário aberto e atualizar o estado de exibição:

Inngage.notificationListener((notification: any) => {
  if(notification?.additional_data)
    setShowInApp(true);
});

Adicionar o Componente InApp no Retorno do Componente Principal

Adicione a tag <InApp /> juntamente com a função onDismiss para que a mensagem possa ser exibida e assim que fechada, possa ser aberta novamente quando enviada pela plataforma:

return (
  <View>
  	{showInApp && <InApp onDismiss={() => setShowInApp(false)} />}
  	// ...
  </View>
)

👍
Você está pronto para começar!

Seguindo os passos acima da documentação você estará pronto para utilizar todas as ferramentas necessárias para as funcionalidades da SDK. 👏

React Native SDK v4.0.0-beta

📘
A versão mais recente da SDK React Native é a v4.0.0-beta.3, que está disponível atualmente.

Passos da integração

Instalação

Ambiente de desenvolvimento

Importando o FCM Token (API Key)

Instalando o package utilizando o NPM ou YARN

📘
Se a instalação via `npm` não funcionar corretamente, você pode instalar a dependência utilizando o `yarn`.

Inclusão da dependência

🚧
Recomendamos que você utilize a versão estável mais recente do React Native, definida no arquivo package.json. A Inngage SDK React Native 4.0.0-beta.2 foi verificada pela última vez na versão: React Native 0.82.0 • canal estável.

Implementando a SDK

Notificações push

Inngage.Subscribe()

📘
Para assegurar uma rastreabilidade completa das atividades do usuário, Recomendamos que esse método seja chamado a cada nova sessão do usuário. Essa prática é particularmente relevante, pois utilizamos esse método para registrar as sessões do usuário na plataforma Inngage.

Inngage.notificationListener()

📘
Caso queiram verificar os logs da Inngage enquanto estão desenvolvendo, basta implementar no seu código o método `Inngage.setDebugMode(true)`.

Personalização (para sua identidade)

Atualizando e/ou adicionando novos Campos Personalizados

🚧
Se o campo tiver um valor definido no método Subscribe, ao passar por ele novamente, o valor do campo será definido conforme estiver nesse método, e não como foi configurado no addUserData.

Envio de eventos

In App Messages

Importando o Componente InApp

Configuração da In App no projeto

👍
Você está pronto para começar!

📘A versão mais recente da SDK React Native é a v4.0.0-beta.3, que está disponível atualmente.

Passos da integração

Instalação

Ambiente de desenvolvimento

Importando o FCM Token (API Key)

Instalando o package utilizando o NPM ou YARN

📘Se a instalação via npm não funcionar corretamente, você pode instalar a dependência utilizando o yarn.

Inclusão da dependência

🚧Recomendamos que você utilize a versão estável mais recente do React Native, definida no arquivo package.json. A Inngage SDK React Native 4.0.0-beta.2 foi verificada pela última vez na versão: React Native 0.82.0 • canal estável.

Implementando a SDK

Notificações push

Inngage.Subscribe()

📘Para assegurar uma rastreabilidade completa das atividades do usuário, Recomendamos que esse método seja chamado a cada nova sessão do usuário. Essa prática é particularmente relevante, pois utilizamos esse método para registrar as sessões do usuário na plataforma Inngage.

Inngage.notificationListener()

📘Caso queiram verificar os logs da Inngage enquanto estão desenvolvendo, basta implementar no seu código o método Inngage.setDebugMode(true).

Personalização (para sua identidade)

Atualizando e/ou adicionando novos Campos Personalizados

🚧Se o campo tiver um valor definido no método Subscribe, ao passar por ele novamente, o valor do campo será definido conforme estiver nesse método, e não como foi configurado no addUserData.

Envio de eventos

In App Messages

Importando o Componente InApp

Configuração da In App no projeto

👍Você está pronto para começar!

📘
A versão mais recente da SDK React Native é a v4.0.0-beta.3, que está disponível atualmente.

📘
Se a instalação via `npm` não funcionar corretamente, você pode instalar a dependência utilizando o `yarn`.

🚧
Recomendamos que você utilize a versão estável mais recente do React Native, definida no arquivo package.json. A Inngage SDK React Native 4.0.0-beta.2 foi verificada pela última vez na versão: React Native 0.82.0 • canal estável.

📘
Para assegurar uma rastreabilidade completa das atividades do usuário, Recomendamos que esse método seja chamado a cada nova sessão do usuário. Essa prática é particularmente relevante, pois utilizamos esse método para registrar as sessões do usuário na plataforma Inngage.

📘
Caso queiram verificar os logs da Inngage enquanto estão desenvolvendo, basta implementar no seu código o método `Inngage.setDebugMode(true)`.

🚧
Se o campo tiver um valor definido no método Subscribe, ao passar por ele novamente, o valor do campo será definido conforme estiver nesse método, e não como foi configurado no addUserData.

👍
Você está pronto para começar!