Group Chat Template

Hi All,

I have been working on a Group Chat app, that is based on existing Chat App Template (accessible through New App in Editor)

Here it is,

Older version,

The reason I am building this is to be integrated to existing apps, even though this can be as a whole app by itself.

Benefits of integrating Group Chat in your App :

  1. More engagements, users are likely to use the app and doing conversations related to the content in the app using in-app Chat function

  2. Recorded conversations, making it easy for users to communicate around past issues and can be used as learning tool for other users

  3. Fair distribution of information, timely information dispersed to users will make them have equal opportunity to act accordingly

  4. User generated contents are encouraged and can be leveraged for further enhancements of the app

  5. More people linked to each other, more ideas will come up

The main features of this Group Chat App Template are Multiple Users Conversation, Group Admin and Blocking Users.

And using single Read Status, which does not accumulate to lots of records.

And can send picture and view in full screen.

Existing Chat App Template using New App in Editor

  1. Sender can add the person who is already in Conversation before, so it will make duplicate conversation

  2. While in Conversation screen, there is no action to add more users to become Group Chat

  3. Because there is no group chat, there is no Admin for Group Chat too

  4. There is no feature to block user

  5. Read Status are created every time user go to conversation screen, so it will create lots of records that can decrease the performance

How Blocking Users works ?

When first chatter is troubled with another chatter (second chatter), he/she can block that troubled chatter (second chatter) in the Conversation screen, by clicking menu icon (hamburger menu) and click Block Users.

In this Block Users screen, first chatter can also see other blocked users blocked by him/her, but second chatter will not know he/she is blocked by first chatter.

After clicking a person in the list of users and confirm OK in the modal screen, the profile picture of the blocked user will show a red stop icon, it means this person has successfully been blocked.

Blocked users will not know that they are blocked, so it will not provoke them for confrontation, there is no indication that they have been blocked by other users, such as first chatter, in the above example.

So, blocked users can still continue the conversation or start new chat to the persons that are blocking them, this is crucial in order to prevent conflicts.

Blocking users can span to multiple conversations, even though the process of blocking users are within conversation screen.

Other way to block users are in the profile screen, there is a button to Block Users and another button to Unblock Users.

How Admin in Group Chat works ?

First chatter that initiate first conversation to other chatter and then add another users in the conversation will become Admin and then can assign other chatter within the same conversation as Admin too.

An Admin can add other users or remove users in the conversation.

Admin is related to conversation and cannot be used to block users.

For next few days, I will be posting examples of the usage, from simple conversation to group chat.

Please try the Add Admin and Block Users function too.

If you have questions regarding how to use, please ask here.

If you are interested in integrating this into your app, please private message me.


1 Like

The existing users are,

email password a b c d e f g h i

Messaged you @Yongki

Hi @Yongki! Very well done! I would like to intergrate this into my app! Can you help me with that?


Hi @minriemacapugay ,

Thank you very much. :grinning:

Sent you reply.

Hi @niels ,

Certainly can.

Sent you private message regarding more information.

You can walkthrough me about how you want to achieve your goal.

Context in-app messaging is another level of advantage that can be easily seen by our users.

Happy to help. :grinning:


Change log, April 20, 2021

Show App Bar Picture Profile, because using new feature of App Bar which is background image, we need to use different profile picture that can be ratio of 16:9, because it is wider instead of circle.

Bug fixing, visibility in Menu Window for star icon that indicates creator of the conversation.

Example of single Read Status

Read Status will be created only once for every conversation and user, it is not created again everytime user read conversation.

This saves a lot of records.

Nice project !
I will keep an eye on this =)

Hi @Nicolas ,

Thank you for checking in.

The very reason for me to enhance the Chat App is because of this multiple read statuses like this.

Our performance just cannot take a hit like this.

Oh, by the way, when you try out, we use an image picker that is built using form and attach it to message and can be viewed in full screen too.

** How to Start Conversation (Chatroom) **

First Chatter is Grand Golden (at the left), she wants to start new conversation to Hello Hola (at the right), she clicks + action button and choose Hello Hola and click OK

New Conversation screen come up and she can type message with it.

Second Chatter (Hello Hola) open new conversation and begin typing message too.

(fast forward 4 times)

There is a light blue dot that marks that the conversation has new messages, but this dot will not appear if the other chatter is blocked.

** No Duplicate Conversation. **

When starting new conversation, the list of users will be filtered, so duplicate conversations can be avoided.

Change log, April 21, 2021

Group Chat picture can now be customized, previously using image placeholder.

** How to start Group Chat **

Click + Add button at bottom right corner,
Then choose who do you want to chat with, then click OK, this is like starting normal conversation

Now, click on menu icon, on the top right corner, so you can access additional menu, then click Add Users,
Add as many users as you want,
This action of Add Users make this conversation becomes Group Chat, after adding users you are presented to change the name of the group.

After making a conversation as Group Chat, more menus are shown, such as Add Admin, you can add members of this group chat as Admin, and this new Admin can add other users too, so more people can join.

** How to message in Group Chat **

Usually the creator of the group chat will initialize the first messages, then other members can read and join.

Change log, April 22, 2021

Adding integration feature.
Conversations can now be linked into existing collection.
Available on v1.50 and above

Which collections to be linked can be customized.
How Group Chat is linked can be customized.

Hi @Yongki this looks great, would it be possible to clone the project and re-use some elements myself?