Getting Started

About sChat

sChat (or SimpleChat or SimpleChat.Support) is an open source and very basic live chat app written by a JavaScript/Meteor developer. It is free and MIT licensed. You can create your own self-hosted copy of the app. If you need to, you can also take a look at the code and copy some parts of the app. This is a great option when you already have your Meteor app and you just need to integrate SimpleChat admin panel into it. You can modify the app as you want and leaving a link to the original version somewhere would be much appreciated.

How it works?

SimpleChat Meteor app is divided into two logical parts. First is the main Meteor app - a good example is this website with an administration panel for logged in operators/administrators. The second part is a client app widget, which is just two files - JavaScript and CSS file. The client app widget could be also a Meteor package or any other future, ready-to-use integration. The two parts are separate and communicate using only special protocol named DDP.

As an operator, this allows you to log in and see all chat sessions from your all connected client websites - the websites where you've installed the client widget. This way, your visitors will be able to see the chat widget and write directly to you and you’ll be able to log in to your admin account and reply. You can also enable e-mail notifications, so with every new chat session, an e-mail will be sent to your mailbox.

This app is similar to many other available live chat apps out there. It only has basic functionality and the main app is built with Meteor. If you don't like this approach or you need something with more features, this is not for you. But if you just need a chat box widget for free with flexible options and simple Meteor integration (just add the package in your Meteor app), this app is for you.

How to start?

You can download (git clone) the entire app from the GitHub repository. This is a standard Meteor app so you need to have Meteor installed and you also need Meteor hosting for production. You'll read more about it here: Self-hosted Option.

Self-hosted Option

sChat is an open source and MIT licensed app so you can just copy it, modify it, and use it on your own Meteor server. It is built with Meteor, so basic knowledge of Meteor and related packages is necessary here. If you don't know Meteor and want to learn it, just go to the tutorials website. You can also see the Meteor Guide. If you just want a working app and need a Meteor developer, you can check the website: We Work Meteor or you can just hire me :) In that case, take a look at the sChat Support section.

sChat App Structure

sChat is a standard Meteor app with Blaze as a view layer. For now, it’s Blaze because it is sufficient and really simple to learn so many people who want to use the self-hosted version will be able to start very quickly. However, if there are more features and problems with performance and code management in the future, it is more likely that it will be rewritten in, for example, React. But for now it is Blaze and it will stay here.

The folder and file structure is quite standard. We have 'client', 'server', 'both' and 'public' folders - standard Meteor folders. In the ‘client', you'll find some other parts which are self-explanatory. There are Blaze views with logic, client side collections and, of course, styles. In the 'server' folder, we have all server side logic so publications, methods, and configurations. In the 'both' folder, we have the collection initialization and also routing settings.

Meteor packages

There are some Meteor packages used in this app, some of which are community based. You can find the list in the '.meteor/packages' file. You can also run the command 'meteor list' to list all used packages. If you want to know more about them, just Google them or try to find them on Atmospherejs.com.

sChat App Settings

There are some settings which are needed to run your own instance of sChat App. These are located in the standard Meteor's .json files. Here we have 2 types of settings files in the 'settings' folder. There is 'prod.json' file and also 'dev.json' file. This is because, in most cases, you want to have one configuration for local development and one for production. Remember that you shouldn't put theses files in your public repositories. Those are private settings which shouldn't be published anywhere.

Let's see what we can set up here:

{
            "public": {
                "hostName": "www.simplechat.support",
                "maxClientApps": 3,
                "maxChatHistoryInDays": 3,
                "ga": {
                    "account": "UA-********-*"
                }
            },
            "private": {
                "mainAppEmail": "your-email-address@gmail.com",
                "mailGun": "smtp://{Default SMTP Login}:{Default Password}@{SMTP Hostname}:587",
                "google": {
                    "clientId": "{your google API client id here}",
                    "secret": "{your google API secret key here}"
                },
                "facebook": {
                    "appId": "{your facebook API app id here}",
                    "secret": "{your facebook API secret key here}"
                }
            }
        }
        

Host name and main app e-mail are needed to configure e-mail messages. Max client apps and max chat history are just limitations for available client apps per account and chat message history in days. Next, you have very important settings related to 3rd party services. sChat app needs some e-mail service to be able to send e-mails. Here we use MailGun. You need to create your account at Mailgun.com and then fill in the 'mailGun' field with your credentials in the settings files.

Next we have special Google and Facebook API keys which are needed when you want to use 'login with Google', 'login with Facebook' buttons. You can disable these features in 'both/accounts/s-id-config.js'. It is provided by the sId Meteor package. You can read more about it here: s-id.meteor.com.

Google Analitics code ('ga' property) is of course optional.

Important: When you provide all those settings, you need to run your Meteor app with '--settings' flag. Example.

$ meteor --settings settings/dev.json
        
$ meteor --settings settings/prod.json
        

Where can I host my custom sChat app?

You need NodeJS based hosting and also MongoDB hosting.

There are couple of options. You can use special Meteor apps dedicated to the cloud hosting called Galaxy. There is a developer option which is much cheaper than others. Galaxy is great because it gives you many preconfigured features, like simple SSL installation, one-line-command deploys, statistics and support. It is managed by Meteor Development Group, so the support team knows exactly what Meteor apps need.

But many people host their Meteor apps in many other ways, for example on DigitalOcean using the tool called MUP. There is also Modulus, which is very popular in the Meteor community.

With Galaxy and other options, you’ll also need MongoDB hosting. There are some services, for example Compose.io or MongoLab. If you want, you can also create your own hosting environment. Many people host MongoDB and app files in one place, for example on DigitalOcean.

SimpleChat.Support is hosted on Galaxy and MongoLab.

I need help!

If you don't want to use sChat here as a SaaS free option, and you need your own version of the app but you don't know how to run your own, you could search for help in the Meteor forums or We Work Meteor website.

I can also offer you my help. Take a look here: sChat/Meteor Support.

sChat admin panel features

There are some major features which we should describe here. First of all, when you log in, you'll see all your existing client apps. You can go and see chat sessions in a particular app by clicking on the 'Open Chats' button. This will redirect you to the chat sessions view. On the left you'll have the chat sessions list and on the right chat boxes panel. You can open a chat box by clicking on the list's item in the sidebar on the right side. When the chat box opens, you are ready to reply.

The chat sessions list has some very useful icon buttons. We will describe them in the sections below.

Chat sessions list

This is a list of all chat sessions. They could be current chats or those from the archive. So, how do you know which is an active chat and which is not?

This is really quite simple. All chats which you haven’t yet replied to will have the 'bell icon' beside it. This icon looks like that: . It will appear when there is a new message from your client. When you answer the icon disappears. What if you don't answer? The icon will still be there, but you can always check the last message date and time on the list and decide if there is a need to answer.

All chat sessions will be automatically deleted when the first client message in the session is older than three days.

When you click on an item on the list, chat box will open. Also you will find the 'message' icon near the clicked list item which looks like: . This means that the current chat session is open and displayed as a chat box.

There are two more icon buttons on the chat sessions list. With these icons, you can ban users by IP. The icon looks like: and also you can remove all chat messages by user IP or Session ID. The icon looks like . Icons will appear when your mouse cursor is over a particular item, which is hard to miss. When you click on the 'ban' icon, there should be a modal box with confirmation, but you’re able to undo this operation if you choose. If you click on the 'remove' icon, there should be a modal box with two radio inputs (remove by IP and remove by Session Id).

Ban list and E-mail notifications

On the particular client app view where you can open chat boxes in the top right corner, you’ll find some of the icons which are responsible for managing banned IP addresses and e-mail notifications.

When you want to add or remove an IP address to/from your ‘ban-list’, you can click on the flag icon which should look like . It will open a modal box with all banned IP addresses and you can add more or remove some as you wish.

E-mail notifications is a really cool feature because it can send you a new e-mail when a new chat session appears, so you don't need to track your chat sessions list all the time. In the future, there will be more notification options.

Other icons here are just help icons and they aren’t that important.

User account operations

You can, of course, delete your user account any time you want. Just remember that all your client apps will be removed too and all your chat boxes will stop working. You can also change your password. All the buttons are in the top right corner of the website, of course when you are logged in.

sChat Privacy and Security Policy

SimpleChat.Support is a self hosted solution only. This is just a static landing page without any tracking code, even analitics. We don't track and store any data.

sChat or/and Meteor support

There is no ongoing work on this project. There aren't any support guarantiees anymore.

You can check who I am and what I do by visiting my website at julian.io. You can also check my GitHub. Feel free to fork the project and let me know what you've built.

You can contact me by writing an e-mail to: julian.cwirko@gmail.com or you can write to me on Twitter.

Check out psd2Meteor -> www.psd2meteor.com

I'm available for hire and consulting work. Let me know!