Help adding Intercom SDK to the Flutter Shell

Flutter
1

Hello,

I am currently adding the Intercom SDK to the flutter shell provided by Backendless (GitHub - Backendless/native-mobile-app-shell: Mobile native app shell is a native wrapper for a UI Builder application. It can be used to package a UI Builder app so it can run on a mobile device in a hybrid mode. The app can be published to the Apple and Google Play stores.).

The Intercom documentation requires that a user is logged in to Intercom using JS code once they have logged in to the app.

image
image1349×641 31.8 KB

https://developers.intercom.com/installing-intercom/docs/android-installation

I can’t figure out how to then pass that information back to Intercom to register the unique user ID.

2

Hi Luc,

It sounds like a question for intercom support…

Regards,
Mark

3

Hey Mark,

I’ve already engaged with them and haven’t been able to help.

Sorry I didn’t describe the issue very well first time - the problem I have is that when a user logs in to the Backendless app, I need to run JS code to pass the user ID to Intercom so the user can be identified and logged in to Intercom using the Intercom SDK.

Usually with Flutter everything would be set up on the app side, but with the Backendless/Flutter shell all the code is in JS and we are just showing the webview, so we’ve not been able to work out how we can get and post data in flutter from any JS code implemented in Backendless.

It seems that this is a limitation of using a webview in a Flutter shell, but I wondered if you had any ideas about how we could overcome this, maybe the Backendless SDK can help us to get data from Flutter and pass it back?

Appreciate the help. Being able to use a native app shell is a big positive, but it’s been difficult working out how to add 3rd party services and start using native mobile functions.

4

Hello @Luc_Zentar,

the problem I have is that when a user logs in to the Backendless app, I need to run JS code to pass the user ID to Intercom so the user can be identified and logged in to Intercom using the Intercom SDK.

If I understood you correctly, you can use the afterLogin event handler in the Cloud Code section for this purpose. This hook (event handler) will be called automatically by the Backendless after each successful login into Backendless, and there you’ll be able to run a request for login into a third-party service.

Best Regards,
Stanislaw

5

This doesn’t help as it doesn’t get the data passing between the Backendless code and the native SDKs in Flutter. With Intercom there is a requirement for the two to be able to pass data back and forth.

So for this case, the Intercom login wouldn’t be associated with the mobile phone user.

6

Hello, @Luc_Zentar.

There is a way to do this. I’ll give an example below of how it works:
For example I need login user in JS code, then I need to pass it into Flutter code. Perform some actions with it and return some answer back into JS. This is code in Codeless:

image
image1326×290 45.4 KB

When you click on this button, flutter receives a request to execute the “your_custom_func” method, in order to process this request, I will add this code to the bridge_manager class(58-65 into switch block):

image
image2340×1026 304 KB

        case 'your_custom_func':
          {
            //something code
            //For example intercom api
            return buildResponse(
                data: requestContainer,
                response: 'Completed'); //maybe result of intercom api
          }

The buildRequest() method then returns the response to the JS code.

If you have any questions, please ask, I will gladly try to help you.

Best Regards, Nikita.

7

Thank you, I have this error when trying to run the execute native method:

sdk.js:14 Can not send a request to the native code, because the Device Provider is not configured

  1. {type: ‘IntercomLogin’, payload: ‘1D689771-90F2-4738-B349-272E79590215’}

  2. payload: “1D689771-90F2-4738-B349-272E79590215”

  3. type: “IntercomLogin”

  4. [[Prototype]]: Object

Is there any documentation or videos for how the native methods work? I haven’t been able to find anything

8

Hello, @Luc_Zentar.

Unfortunately, this is a new feature and is currently under development, so it has not yet been documented. So you can find out about the functionality of this feature only here :frowning:

Please provide the custom code or codeless blocks you are calling to build and send this request.

Best Regards, Nikita.

9

No problem! Just wanted to make sure I wasn’t asking questions here that could be answered by reading a document or watching a video :slight_smile:

App ID = 8518B92E-A6AA-5589-FFA0-B863E4A63F00
Container = frontEnd
Page = login

image
image1042×668 47.3 KB

image
image1642×605 28.5 KB

10

Hello, @Luc_Zentar.

Codeless logic looks like good. Can you please provide the flutter code that is responsible for processing this request?

Best Regards, Nikita.

11

I missed this nuance. The bridge is only available from the native app shell FOR MOBILE DEVICES. As far as I can tell, are you trying to run in a regular browser from a PC? It won’t work.

12

Hello @Nikita_Fedorishchev - that was my mistake, but I have now tested using Android Studio and it is still not working.

This is the code in the bridge_manager file

class BridgeManager {
static const String _OPERATION_REGISTER_DEVICE = ‘REGISTER_DEVICE’;
static const String _SOCIAL_LOGIN = ‘SOCIAL_LOGIN’;
static const String INTERCOM_LOGIN = ‘IntercomLogin’;

static Future executeRequest(Map data) async {
final requestContainer = RequestContainer(
data[‘payload’][‘id’], data[‘payload’][‘type’],
userToken: data[‘payload’][‘userToken’]);

try {
  var result;
  switch (requestContainer.operations) {
    case INTERCOM_LOGIN:
      {
        result =
        await BridgeUIBuilderFunctions.registerForPushNotifications();
        if (result == null) throw Exception('Cannot register device');
        return buildResponse(
          data: requestContainer,
          response: {
            'deviceToken': (result as DeviceRegistrationResult).deviceToken
          },
        );
      }
13

What error are you getting when testing from Android Studio?

14

There is no error, it just doesn’t execute and the login button seems to not be working.

I have checked the user table in the database, the login is successful as the last login date is updated.

15

@Nikita_Fedorishchev I can share the git repository with you if this helps so you can see all the code and view in Android Studio

16

I was able to reproduce your error and find a solution.
If you pass a whole user object, then everything works without problems. It looks like a bug, we will look into this problem.
Can you try?

Best Regards, Nikita.

17

Like this?

image
image1269×550 94.8 KB

18

Yes, this solved the problem for me.

19

Did the problem go away?

20

I’m waiting for confirmation…will let you know

1 Like