Getting Started
Quick Setup

Chat Component

Introduction

The ethora-chat-component npm package addresses these needs. With just a few lines of code, you can quickly set up a lightweight version of the Ethora chat room functionality. Future updates will enhance the chat component, and we plan to introduce additional npm packages for Digital Wallet and AI functionalities.

Prerequisites

Before you get started with the ethora-chat-component, ensure you have the following:

Using Ethora Chat Component

Alpha version 24.07.03

Follow these steps to set up a new project and integrate the ethora-chat-component:

  1. Create a new Vite project:

    npm create vite@latest
  2. Select the project name and type (React/JavaScript) during the setup prompts.

  3. Navigate to the project directory:

    cd project-name
  4. Install the project dependencies:

    npm install
  5. Install the ethora-chat-component package:

    npm i projecet-2-ccomp
  6. Open the src/App.tsx file and replace its content with the following code:

    src/App.tsx
    import { ChatWrapper as Chat } from "projecet-2-ccomp";
    import { store } from "projecet-2-ccomp";
    import { Provider } from "react-redux";
    import "./App.css";
     
    function App() {
        return (
        <Provider store={store}>
        <Chat MainComponentStyles={{ width: "100%" }} />
        </Provider>
        );
    }
     
    export default App;

Configuring Widget Styles

  1. For styling you can alter App.css

    src/App.css
    #root {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    }
    src/index.css
    body {
    margin: 0;
    display: flex;
    place-items: center;
    min-width: 320px;
    min-height: 100vh;
    width: 100%;
    }
  2. Run the project with

    npm run dev

    This will start the development server at http://localhost:5173/ (opens in a new tab).

  3. Open your browser and navigate to the above URL. You should see the chat component running.

In the screenshot below, you can see how the chat component appears in the browser.

chat component