How to add live chat to Flutter application.

Ivan Fytsyk
3 min readMar 23, 2021

--

When developing a Flutter application you may face a problem with your users' feedback. If something is not working in your app you may receive bad reviews on App Store or Play Store. So it’s quite a late feedback channel and better to have something inside the app to instantly receive users’ feedbacks.

Here we have a few options. The easiest and free way is to redirect the user to the email app using url_launcher. This is as simple as a single line of code:

With all this simplicity email approach has some cons:

  • The user may not want to expose his email address.
  • Email chatting is not so common and convenient as messenger apps.
  • Managing chats in email applications is not simple. There is no way to add additional info about the user, like his locale, operation system, app version.
  • The problem usually needs to be fixed instantly. Users won’t wait till you check your inbox next time.
  • Your reply can get lost in the user spam filter.

As a good alternative, you can consider live chat for your app. Live chat allows your users to send messages to you the same way they get used to with their favorite messengers.

You can try to build your own solution. In that case, you should be ready to invest your time building all messaging infrastructure needed for supporting sending/receiving/storing messages.

There are a lot of live chat solutions on the market. Intercom, talk.to, Gist, LiveChat is not the full list of possible solutions. They are great tools with a large community. The only problem they have in our case — they don’t support Flutter.

You can try SupChat — a live chat that is developed especially for Flutter applications. It allows you to have live chat functionality with literally a single line of code.

To start using SupChat first of all you have to download the app from Google Play or App Store. After the simple registration process, you will be redirected to the chats screen.

Here you have to click on the “Account” icon and open the Settings screen. You can change your display name, avatar and you can get your API key that is needed for product integration in your app.

To add SupChat to your Flutter app you need to add it to the dependencies section in your pubspec.yaml:

Then, when you need to launch live chat — just put this line of code:

customUserDetails here is an optional parameter that you can use to provide additional info of your user to better identify him.

Probably you also have a website and you would also like to gather feedback from your site visitors. It’s not a problem because SupChat supports the web too.

The web integration is so simple as the mobile version. Just copy this code just before closing </body> tag and insert your API KEY.

That’s all. It will add a circle button to the bottom right corner of your website and you will receive all messages from mobile and web inside the application.

I hope you liked this article and SupChat. And feel free to ask questions below. Thank you for reading!

--

--