Chatriq Documentation v1.0.0

Thank you so much to see our template. This document is for the HTML version We are trying to explain about chatriq, if you have any questions about chatriq, please feel free to contact us.

Introduction

A Chatriq Taskmanager is modern and clean Bootstrap 4 based template. It is build using HTML, CSS3, JavaScript. We are using we are using CSS pre-processor SCSS. It is super easy to customize and 100% responsive. It can be used for most type of live chat, discussion and messenger type app templates, Live Chat, Also, you can create a social networking web app with a profile page, newsfeed and messenger.

It uses most of the helper/utilities classes which are reusable class that makes the page faster and increases the speed of page time load. This part of the doc will help you to quick start your project and will give you a basic idea about how this template work. For you to get start open the template download package. We have used gulp task runner so you can run and manager your application shorter, simpler and faster.

Files Structure
  • chatriq
    • demos
      • LTR
        • default-dark
          • assets
            • fonts/
            • images/
            • vendors/
          • dist
            • css/
              • theme/
            • js
          • scss/
          • index.html
        • default-light
          • assets
            • fonts/
            • images/
            • vendors/
          • dist
            • css/
              • theme/
            • js
          • scss/
          • index.html
      • RTL/
    • development
      • app
        • assets
          • fonts
          • images
          • vendors
        • dist
          • css/
            • theme/
          • js
        • scss/
        • index.html
      • gulpfile.js
      • package.json
    • documentations
Setup Development Environment

  1. Install NodeJS

    Before installing gulp and sass first you must have NodeJs installed, NodeJS will have npm (node packaged modules). Download and install Node.js from nodejs.org/en/download/

  2. Gulp Setup

    Before installing gulp first you must have NodeJs installed, NodeJS will have npm (node packaged modules).Download and install Gulp JS from https://gulpjs.com/

    Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. 

    npm install --global gulp-cli

    If you have previously installed a version of gulp globally, please run npm rm --global gulp to make sure your old version doesn't collide with gulp-cli. 

    npm rm --global gulp

    Verify that gulp in successfully installed, and version of installed gulp will appear. 

    gulp --version

  3. Install dependencies.

    You're moments away to see the dashboard template up and running in your local machine. First, go to the root folder where the package.json located. In your download package it should be in the root folder. Please run the following command below. 

    npm install

    This will download all dependencies defined in package.json file. Once it finished running the command, it will generate a folder name node_modules/ where you see downloaded files.

  4. Running in Browser

    Now you're good to go in running the template and preview it in browser by running the command below. 

    gulp default

    This should automatically open up a browser window with the website running. Once the development server is up and running any changes you make to the HTML & JS & SASS files will be auto updated in your browser window.

Change Skin

  1. Link CSS File

    All theme CSS file are placed in dist/css/theme folder. Select a theme you wish to apply and link above close <head>tag 

    <linkrel="stylesheet"href="./css/theme/default-theme.css"type="text/css">

    Change class in body tag 

    <bodyclass="default-theme">

    List of pre-built theme class

    .default-theme .default-dark-theme
RTL Layout

  1. Link RTL CSS File

    RTL CSS file are placed in dist/css/ folder. 

    <linkrel="stylesheet"href="./dist/css/rtl.css"type="text/css">

    Change class in body tag 

    <bodyclass="rtl">

    List of pre-built theme class

    .default-theme .rtl .default-dark-theme .rtl
References

We are using some JS and CSS plugins for creating chatriq Messaging Platform template.

Plugins/Libray Name Link
jQuery https://jquery.com/
Bootstrap https://getbootstrap.com/
Material Floating Button https://github.com/nobitagit/material-floating-button
Perfect Scrollbar https://github.com/mdbootstrap/perfect-scrollbar
Slick https://kenwheeler.github.io/slick/
Sortable https://sortablejs.github.io/Sortable/
Material Design Icons https://materialdesignicons.com/
SVG Icons https://www.flaticon.com/
Customer Support

Our support generally operates from 9AM – 7PM GMT+5.30time from Monday –Friday.The support response time is 24-48 hours but normally we tend to settle thequestions as earlier as possible (even earlier than 24 hours).