.png?alt=media&token=85387050-8d77-435e-ba11-27a7ea87ff4b)
💬
Chat: CometChat
You can now create Support 1:1 chats, get all the support chats in the admin separate chat app, and also get Group chats for more social experiences. Here we have the docs necessary to configure the Chat feature in Bravo.
In order to set up this integration, you'll need:
- A CometChat account. CometChat offers a free tier supporting up to 25 users for the chats, which you can use to get started.
Intro on how to integrate CometChat
- 1.
- 2.Once you create your account, create a new CometChat app.
- 3.After doing that, you'll land in a dashboard page with some identifiers. You'll need these later when setting up the feature in Bravo.
This integration supports the following chat use cases:
It’s a 1-1 chat for support, for example, users can access and send requests directly to a specific user, in this case, a support account.
With this setup, two different apps will be needed:
- One admin app. This app will receive all the messages from the client apps. The chats will be shown in a page that needs to have the following tag at page-level:
[page:chat:conversations]. Also, this app will need to have an authentication method in place, and we'll need to create one admin account for it. - One or more client apps. Here, the following tag will need to be used at page-level:
[page:chat:messages:user:<user_id>].<user_id>(without the <>) will be the user ID of the admin account created for the admin app. It needs to be obtained your authentication provider (for example, Firebase) and pasted in the Bravo tag.
It’s a 1-1 chat integrated with the bravo apps, users can access and send requests to a group room. For example, this could be used to create an app for an event, where all the event attendees can share a group chat.
To create a screen with this group chat, the following tag needs to be used at page-level:
[page:chat:messages:group:<group_id>]. In that tag,
<group_id> (without the <>) will be the identifier for a group that needs to be added in the CometChat app created above. To do that, follow these steps:- 1.In the left panel of the CometChat dashboard, click on Groups.
- 2.After that, click on Add groups. You'll be displayed a form, where you'll be able to choose a group name and a group ID (GUID). This GUID is the one you need to use in the Bravo tag in your design.
It is also possible to create page which gather's all chat rooms that a user has. For example, an educational app that has one chat room for each of the classes a student is doing, each user has specific chat rooms where to ask doubts to the teacher privately.
To create a screen with multiple group chat, the following tag needs to be used at page-level:
[page:chat:conversations]
The logic of creating new group chats and adding users to group chats should be handled by API and requests to Cometchat.
Once the design file and the CometChat account are ready, it's time to create a new Bravo app with the design. After importing the design, follow these steps to set up the integration with CometChat:
- 1.In Integrations -> Chat, activate the toggle for the CometChat integration. Remember that your app needs to be on the business app plan in order to use this feature.
- 2.In case you haven't done that yet, set up the Firebase assets for both Android and iOS for the bundle where you want to use the chats. You can read here how to obtain them.
3. Finally, get these identifiers from your CometChat app and paste them in the section indicated below.
Duplicate the design file below to see an example of how to set up this feature.
