Welcome to Chitchat!

We are pleased that you have chosen CHITCHAT theme for your site and we will not disappoint you with your choice. Chitchat is an excellent theme develop with a concise approach. The code written is a clean and well structured.

Chitchat is the most powerful & responsive theme with all the modules and functions involved with an attractive design.

Chitchat theme template is build focusing on HTML & SCSS works perfectly fine in all the browsers and without jQuery.

Chitchat theme include 3 in 1 (chat app, landing-page & email template), 17 inner pages

We request to have a look at our Chitchat manual to know brief about the theme! We have compromised each and every detail for you in the manual that you will need.

If we are unable to answer your queries beyond our documentation, you are free to contact us through the themeforest support page with your site. We will be happy to cater you and will get back to you in no time.

Read the manual before jumping to start!

Next.js : Theme is completly convert in Next.js so it will easy to use server side rendering as well SEO
Authentication : Used Authenetication using firebase
Responsive Design : Looks great on desktops, laptops, tablets and mobiles. Give it a try on your iPhone or iPad now.
RTL Supported : Chitchat messenger page has RTL supported.
Made with Sass : Chitchat is made with sass.
W3 Validator : This theme coded with beautiful and clean codes! Some powerful HTML files 100% valid W3 web standards.
Multi-Browser Support : Chitchat has multi browser support.
Fully Customizable : You can also customize Chitchat Messenger page.
Reactstrap : Chitchat made by boostrap 4.5.2 version.
Google Font : You can use unlimited Google fonts.
Dark Supported : Chitchat Messsenger page also support Dark Mode.
React Slick : We have use for slider.
Blog Page : There three different blog variation pages.
Authentication Page : There are two different auth variation pages.
React-Toastify : We have use for Nofication.

When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.

Theme - Chitchat Main Folder
Documentation - Documentation for Chitchat React site template
Email-Template - Different Email templates in html

Next Folder Structure

api
- index.js
config
- customizerConfig.json //Add your favourite customiser config here
- firebase.js //Add your firebase credential here
container //All component of messenger you can find from here
- chatBoard
- leftSidebar
- rightSidebar
- themeCustomizer //Customizer UI and their related config
helpers //Controller part of theme will call from here
- chatContext
- customizerContext
pages //Your complete theme page will call from here
- auth
- blog
- bonus
- common //All common layout you can find from here
- landing
- messenger
public
- api
  - chat.chats.json
  - chatMember.json
  - emoji.json
  - sticker.json
- assets
  - doc
  - fonts
  - images
  - scss
  - favicon.png

Prerequisite

Install Node.js and NPM : Download the 18.12.1 version of Node.js from https://nodejs.org/en/download/ and install it on your system. NPM comes bundled with Node.js

Theme

When you extract file from download you will find following folder:

Theme
EmailTemplate
Documentation

For Start working with runnning your Chitchat theme you need to follow below step:

Extract theme folder
npm i
npm run dev
Once your frontend runs successfully you can see it in http://localhost:3000

All Theme design related SCSS you can find from /public/assets/scss
- base
- component
- layout
- pages
- themes
- utils
- vendors

You can customise your Chitchat Messenger using customiser

To change the LTR mode to RTL or Change color from any color then you can just select the option from customiser as attached in below screenshot

Now to customize theme you can select Color, Layout, Chat Wallpaper, Sidebar of your own choice.

By selecting you can change Color of whole Messenger theme.

In Layout you can select different layout option.

In Chat Wallpaper there are many options are there, by using them it change the wallpaper of your chat.

In Sidebar you can select any default sidebar .

Now to change your project according to configuration which you have set you just need click on Configuration button and copy that config as displyed in below image and paste in customizerConfig.json in config/customizerConfig.json

How to Remove Loader from Application?

Go to _app.js file in pages/_app.js

Remove design of loader

correspondingly remove methods of useEffect from tag in _app.js

How to Remove default Customizer from Application?

You just need to removed called themecustomizer component from messenger >> index.js and you can't see it more.

Suppose you want to add RTL in your application then you just need to set "layout_type" as RTL so application will be converted in RTL layout.

Suppose you want to remove or change firebase credential you just need to set in firebase.js in config/firebase.js

You can set font of your choice in _app.js



                    <!--Google font-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800&display=swap" rel="stylesheet">

                    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,600&display=swap"rel="stylesheet">

                    <link href="https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"rel="stylesheet">

Getting Started

Theme Features

Folder Structure

Start Building

Scss

Customizer

Remove Loader

Remove Customizer

RTL

Firebase

Fonts

Thank You

Chitchat React Theme

Welcome to Chitchat!

Theme Features