# Chat integration **URL:** \ **Category:** Ask us anything\ **Created:** [December 30, 2023, 12:43am UTC](https://community.weweb.io/t/chat-integration/6140 "2023-12-30T00:43:55Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![John.k](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@John.k](https://community.weweb.io/u/John.k)\ **Post date:** [December 30, 2023, 12:43am UTC](https://community.weweb.io/t/chat-integration/6140/1 "2023-12-30T00:43:55Z")
Is there a comprehensive guide or tutorial available that outlines the process of integrating a chat system with Weweb and any other backend? The objective is to enable logged-in users to engage in private and anonymous chats. I’m seeking a step-by-step walkthrough for inspiration before undertaking the development from scratch. Any recommendations or suggestions would be greatly appreciated. ---
**Author:** ![khara](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/khara/32/6776_2.png) [@khara](https://community.weweb.io/u/khara)\ **Post date:** [December 30, 2023, 4:12am UTC](https://community.weweb.io/t/chat-integration/6140/2 "2023-12-30T04:12:55Z")
I built chat recently and it ended up mostly: 1. collection list to display/select the list of people user is chatting with 2. collection list to display recent messages in chat (query a message DB with selected people chatting) 3. form input to submit next message - variables to track things like the next message, selected chat etc. I found it most helpful to take apart a couple of prebuilt flutterflow MVPs and see how they were built. But the experience of using flutterflow is terrible compared to WeWeb haha, so it was worth the work to switch over here. ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [December 30, 2023, 9:42am UTC](https://community.weweb.io/t/chat-integration/6140/3 "2023-12-30T09:42:31Z")
I’d say use Supabase Realtime, there is people like @Johnny who made this I think. I also managed to do so, but for a step by step tutorial, that would take time. ---
**Author:** ![MyHeroVA](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/myherova/32/7207_2.png) [@MyHeroVA](https://community.weweb.io/u/MyHeroVA)\ **Post date:** [January 19, 2024, 11:44am UTC](https://community.weweb.io/t/chat-integration/6140/4 "2024-01-19T11:44:41Z")
@John.k I’m still waiting for a chat tutorial as well. Most of us do not need it to be real time. Just something where one person sends a message (using a form), it gets stored in Xano, and the receiver can view the message when they reopen their page. I have figured out one part - Private messages. However, you know on the left sides of chats where it shows you who you’re talking too (name picture etc) and it does not repeat? I am struggling with that part. Here’s what I did for the private message part: ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/077e6556a69d30b989073bcd5796472a1a764ee6.png) Here’s the advice that CoPilot gave me that I’m working with: _To create a messaging feature where two people can have a private conversation with Xano as your backend, you would need to structure your database and create endpoints in Xano, then utilize these in your frontend application. Here is a basic step-by-step guide:_ _1. **Create necessary tables in Xano** : You need at least two tables: Users and Messages. The Users table stores your user data, and Messages table stores the messages sent between users. In the Messages table, you would likely need fields for sender_id, receiver_id, and message\_content at a minimum._ _2. **Create API endpoints in Xano** : You need to create at least two API endpoints: one for sending messages and one for retrieving messages. The ‘send message’ endpoint could be a POST request that creates a new message in the Messages table, with the sender_id, receiver_id, and message\_content provided in the request. The ‘get messages’ endpoint could be a GET request that retrieves all messages where the logged-in user is either the sender or receiver._ _3. **Implement functionality on your frontend** : In your frontend application, create a messaging interface. This would involve creating a form for sending messages, which makes a request to the ‘send message’ endpoint when submitted. You also need to create a way to display messages, which retrieves messages pertaining to the logged-in user from the ‘get messages’ endpoint and displays them._ _4. **Filter messages for privacy** : To ensure that a user can only see messages that are part of their private conversation, you could add a filter to the ‘get messages’ endpoint. This filter can check that the logged-in user is either the sender or receiver of the message before sending it to the frontend._ _5. **Handle real-time updates** : As Xano does not support websockets for real-time updates, you will need to periodically fetch new messages on the frontend. This could be done by periodically sending a request to the ‘get messages’ endpoint and updating the displayed messages whenever new ones are received._ ---
**Author:** ![John.k](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@John.k](https://community.weweb.io/u/John.k)\ **Post date:** [January 29, 2024, 12:35pm UTC](https://community.weweb.io/t/chat-integration/6140/5 "2024-01-29T12:35:33Z")
Thanks for your suggestion. Having said that, weweb guides with explanations on how to build full working components would be valuable rather than frankenstein something from Flutterflow. These guides could provide step-by-step instructions, helping users understand and replicate the process and its logic. This would promote best practices and fewer errors in the long term. ---
**Author:** ![MyHeroVA](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/myherova/32/7207_2.png) [@MyHeroVA](https://community.weweb.io/u/MyHeroVA)\ **Post date:** [January 31, 2024, 5:48pm UTC](https://community.weweb.io/t/chat-integration/6140/6 "2024-01-31T17:48:52Z")
I’m paying someone to finish our direct messenger now. I will post back here if it works with details on how to replicate. ---
**Author:** ![John.k](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@John.k](https://community.weweb.io/u/John.k)\ **Post date:** [February 16, 2024, 8:44pm UTC](https://community.weweb.io/t/chat-integration/6140/7 "2024-02-16T20:44:42Z")
@MyHeroVA Did you manage to get something out of it? It would be great if the WeWeb central team would be willing to actually build replicable tutorials for these essential features. ---
**Author:** ![MyHeroVA](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/myherova/32/7207_2.png) [@MyHeroVA](https://community.weweb.io/u/MyHeroVA)\ **Post date:** [February 17, 2024, 7:01pm UTC](https://community.weweb.io/t/chat-integration/6140/8 "2024-02-17T19:01:32Z")
I frankensteined it. But maybe something in this tutorial will help: [Loom | Free Screen & Video Recording Software | Loom](https://www.loom.com/share/0cb7d3b9fa4141979df912d91bb2fd97?sid=85e70d12-99ce-4b3a-a43e-155e91e1c689) ---
**Author:** ![John.k](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@John.k](https://community.weweb.io/u/John.k)\ **Post date:** [February 18, 2024, 11:29pm UTC](https://community.weweb.io/t/chat-integration/6140/9 "2024-02-18T23:29:49Z")
Thank you for sharing your current progress, I really appreciate it! ---
**Author:** ![Mark\_Pederson](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark_pederson/32/14758_2.png) [@Mark\_Pederson](https://community.weweb.io/u/Mark_Pederson)\ **Post date:** [February 19, 2024, 12:51am UTC](https://community.weweb.io/t/chat-integration/6140/10 "2024-02-19T00:51:44Z")
There is also [Talkjs.com](http://Talkjs.com) - [https://talkjs.com](https://talkjs.com) - if your app needs a very robust in-app chat experience with all the bells and whistles without even designing a chat UI. YES it costs some $$ - BUT - you can deploy very, very quickly and have every feature anyone would want or expect in a chat UI. To build everting you get immediately out of box with Talkjs would take a lot of dev time. Everything is realtime via Talkjs server - and then if you want, you can save messages to Xano or whatever backend you use with their Rest API. ---
**Author:** ![alexanderl](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexanderl/32/9235_2.png) [@alexanderl](https://community.weweb.io/u/alexanderl)\ **Post date:** [April 7, 2024, 3:59pm UTC](https://community.weweb.io/t/chat-integration/6140/11 "2024-04-07T15:59:34Z")
@Mark_Pederson that sounds amazing, I can’t get it to work tho. Can you guide me in the right direction where to put the javascript code? That would be awesome, thanks! ---
**Author:** ![iconicsam](https://avatars.discourse-cdn.com/v4/letter/i/4491bb/32.png) [@iconicsam](https://community.weweb.io/u/iconicsam)\ **Post date:** [April 22, 2024, 11:10pm UTC](https://community.weweb.io/t/chat-integration/6140/12 "2024-04-22T23:10:58Z")
you can actually do it using supabase realtime and weweb. thats quite easy to setup and also manage in the longrun. i recently built one using this stack you can view it here. [https://x.com/the\_icon\_x/status/1782498491496869936](https://x.com/the_icon_x/status/1782498491496869936)