Chat platform

API and customizable widget
for your React App

Add chat functionality to your website in few lines of code

Features

Replies

Message search

Custom message types

Emoji reactions

Persistent message history

Analytics

Private 1-1 chat

File sharing

Data export

Group chat

Media attachments

User roles

Notifications

Unread message count

Channel list

Solutions for every use case

Marketplaces

Connect buyers and sellers to increase conversions and build trust

Online Education

Create chats for study groups, student-teacher communication, and live webinars

Customer Support

Provide fast and convenient support for your users directly within your site or app

Integration steps

1Create
an account

2Add new
application

3Add library to your
React App

bash

npm install @streamtalk/react

4Add the Chat
component

typescript

import { StreamtalkInitializer } from '@streamtalk/react';

async function initializeChat(payload: YourPayloadType) {
  const streamtalkInitializer = new StreamtalkInitializer();

  try {
    await streamtalkInitializer.initialize({
      url: 'https://myhost/api/chat/auth',
      body: payload,
    });
    // handle success initialization
  } catch (error) {
    // handle error
  }
}

5Display the chat

tsx

import StreamtalkChat from "@streamtalk/react";
import { mimeTypes } from "./allowed-mimes.ts";

import "@streamtalk/react/lib/index.css";

export const MyChat = ({ chatId }: { chatId: string }) => {
  return (
    <StreamtalkChat
      onInit={(chat) => {
        console.info("chat", chat);
      }}
      chat={{
        id: chatId,
      }}
      mimeTypes={mimeTypes}
      newMessageConfig={{
        attach: {
          filesMaxCount: 5,
          fileMaxSize: 12,
        },
      }}
    />
  );
};