In-App Chat

Showcase
1

Hi All,

Chat applications are super important right now. Most people are probably using at least one chat app, such as Facebook Messenger, Slack, Discord, etc.

There’s been posts here before inquiring about chat solutions so I took some time to investigate some plug-n-play solutions today. Of course, there’s always the option of building a messaging system inside of Tadabase but we’re going to do something different instead.

The 2 solutions I’ve found today are DeadSimpleChat and Now4Real. Both have Free tiers available for testing. Both of these solutions look like real solid ways to offer an in-app chat for internal app usage.

You can check them out here -> https://timyoung.tadabase.io/integrated-chat#!/dead-simple-chat

I will post a more detailed write up and installation tutorial a little bit later.

4 Likes
2

Thanks @tim.young , I just need this

2 Likes
3

Glad you can find it useful, if you need help installing any of these - please let me know.

I’ve added 2 additional chat platforms to that app for testing.

1 Like
5

Hi @tim.young, how can I install the chat platforms?
We need a chat platforms in own site.

6

Hi @dtellogaete

Here is a video showing how to install Dead Simple Chat (https://deadsimplechat.com/)

And here is the CSS I mentioned in the video

/* Cnat Window Settings */
.chatWindow {
    color: white;
    background: #FAFAFA;
    height: 100vh;
    width: 500px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    outline: none;
}
4 Likes
7

Thanks @tim.young.

1 Like
8

Thank you for posting this. I was hoping to use the chat bubble instead of iFrame but when I add it to a page it doesn’t work. I added it to the header code and it works but the app won’t load any content other than the menu and the chat room. Any suggestions? Would also like to move the chat bubble up and over a little too if that’s an option.

9

Which chat service are you trying to implement?

10

Hi all! I have been working on a native chat/comments app for the last few months that I’m happy to share with the community.

It is all native tadabase, and the comments are stored in tables. I borrowed Tim’s pop-out sidebar design and used that as the starting point. I’ll try and share a copy of it this week for anyone who is interested.

Here is a snippet of what it looks like:

4 Likes
11

I love this - it gives me so many ideas on how to possibly make stuff like this native features of Tadabase.

Please post this to #showcase if you can!

12

@tim.young how hard would it be for Tadabase to upgrade to TinyMCE 6? With version 6 I think I could create a pretty sophisticated native chat/comments app like Slack without any other 3rd party plugins necessary.

TinyMCE 6 has:

  • support for @mention (here)
  • real-time co-editing of text (here)
  • checklist support (here)
  • ability to style the editor and add a “send” button for in app chat (how to here and codepen demo here)

I could just insert this at the bottom of the sidebar using Tiny styling:

Screenshot by Dropbox Capture

2 Likes
13

Hi James,

I’m still interested to see your native chat/comment app.

Neil Campbell

14

I still have to put the “how to” together, but I think I’ve got the app mostly solved

Here is the LINK to the demo, let me know if it is not working or you see any bugs.

You can enter a new comment by:

  1. clicking the “chat” icon (located in the breadcrumbs bar) from anywhere in the app to open a popup modal. Then use the dropdowns to relate the comment to the proper project
  2. entering a new comment in the sidebar of the specific project details page
15

Looks amazing, James. Keen to peek under the hood.

I’m thinking of adding a communication feature like this to my app.