Using Vanilla Javascript

Installation

To get started, you will need to install MinChat Javascript SDK in your Javascript front-end project.

npm

npm install @minchat/js

yarn

yarn add @minchat/js

pnpm

pnpm install @minchat/js

Initialize SDK

Next, initialize the MinChat SDK passing the MINCHAT_API_KEY as a parameter as well as a user. The API Key can be found on the Minchat dashboard.

add to imports section

import MinChat from '@minchat/js'

const currentUser = {
        username: "micheal",
        name: "Micheal Saunders",
}

const minchat = await MinChat.getInstance(MINCHAT_API_KEY).connectUser(currentUser)

You can view more details about the user parameters here.

Each connection to MinChat has to specify the current User to send messages as, this is achieved with connectUser(...)

note: connectUser(...) automatically creates a new user in the system, if a user with the same username already exists then it will reuse that user.

Creating a user

In MinChat, a User is a person that uses your app. Typically, you will have one MinChat User for each user in your own database.

Usually, you would create users based on the data from your database. A User is represented by a JSON object.

before you can start a conversation with another user, the user would first need to be created.

const otherUser = await minchat.createUser({ 
                                  username: "example-username", 
                                  name: "Example Name",
                            })
                            

You can view more details about the user parameters here.

note: createUser(...) automatically creates a new user in the system, if a user with the same username already exists then it will reuse that user.

Fetching a user

You can fetch an already existing user using either their username or their id.

const otherUser = await minchat.fetchUser("example-username")
                            

const otherUser = await minchat.fetchUserById("example-id")

Starting a conversation

There's not much point in a chat app with only one person using it, with a User created we can start a new conversation with them.

A Conversation(Chat) is a place for two or more users to chat. That could mean a simple direct message between users, or it might be something fancier. MinChat works with all kinds of conversations, from group chats to one-on-one conversations.

One-on-One Conversation

const chat = await minchat.chat(otherUser.username)

You can view more details about the response and parameters here.

Group Chat

const chat = await minchat.groupChat({
                                title: "Epic Group Chat", 
                                memberUsernames: [ otherUser.username , thirdUser.username ] 
                            })

You can view more details about the response and parameters here.

Send Message

To send a message, call a function on the chat object.

chat.sendMessage({ text: "Hello World!" })
  

You can view additional optional parameters here.

Get Messages

Messages retrieved in a conversation are paginated to 25 messages at a time.

async/await

const { messages , page , totalMessages , totalPages } = await chat.getMessages(1 /** page to query **/ )

callback

chat.getMessages(1 /** page to query **/)
  .then(({  messages , page , totalMessages , totalPages }) => {
       
         //do something with the messages  
         
  })

You can view more details about the response and parameters here.

Listen for new messages

add a listener to listen for new messages received in the chat.

chat.onMessage((message) => {

        //do something with message
        
})

You can view more details about the response and parameters here.

Get list of conversations of current user

You can get a list of the conversations of the current user. conversations retrieved are paginated to 25 chats at a time.

async/await

const { chats , page , totalChats , totalPages  } = await minchat.getChats(1 /** page to query **/ )

callback

minchat.getChats(1 /** page to query **/)
  .then(({ chats , page , totalChats , totalPages }) => {
 
       //do something with the list of chats
   
  })

You can view more details about the response and parameters here.

Listen for new conversations

Add a listener to listen for conversations that receive a new message.

minchat.onChat((chat) => {
    //do something with the chat
})

You can view more details about the response and parameters here.

This concludes our setup instructions for our most basic form of integration. In this short guide, you've taken your javascript application to the next level with powerful user-to-user chat. You also learned more about the fundamentals of MinChat, and how it all fits together. Most importantly, you've built a starting point to try out all the features MinChat offers.

For more additional features, view the Reference Docs.