Giter Club home page Giter Club logo

addchat-laravel-pro-docs's Introduction

Addchat Laravel Pro Docs

Welcome to AddChat Laravel Pro documentation.


All-in-one multi-purpose Chat Widget For Laravel website

AddChat is a new chatting friend of Laravel. It's a standalone Chat widget that uses the website's existing users base, and let website users chat with each other.


You get full source-code, hence AddChat lives and runs on your server/hosting including database. And therefore, you get complete privacy over your data. Either you're a big corporate sector or a small business. AddChat is for everyone.

Pro Version

AddChat Laravel Pro Version comes with Commercial license. Pro version is fully loaded with a lot of useful and exciting features.

Installation

AddChat can be installed via composer. Awesome... โœŒ๏ธ. Now, as of v1.1.0 release. You as a developer can customize the AddChat VueJS code as well.

Prerequisites

  • Laravel version 5.5 / 5.6 / 5.7 / 5.8 / 6.x
  • Make sure to install the AddChat package on a Fresh or Existing Laravel application.
  • We also assume that you've set up the database.
  • If you're running MySql version older than < 5.7 then disable strict mode in your Laravel app.
  • Go to config/database.php and update 'strict' => false in mysql section.

Non-developer Installation

  1. If installing AddChat on an existing Laravel application and you already have Auth system then skip this step

If installing on a Fresh Laravel application then run

For Laravel 5.5 to 5.8

php artisan make:auth

php artisan migrate

For Laravel 6.x

composer require laravel/ui --dev

php artisan ui vue --auth

npm install && npm run dev

php artisan migrate
  1. Unzip the addchat-laravel-pro.zip file, copy the addchat-laravel-pro folder and place it in your Laravel application root directory.

The folder name must be addchat-laravel-pro in your Laravel website directory.


  1. Open your Laravel application composer.json file and paste the below code in the end (right before last curly } bracket)
"repositories": [{
 "type": "path",
 "url": "addchat-laravel-pro/"
}]

(once you complete, the composer.json file will look something like this)

{
 .
 .
 .
 .
 .
 
 
 "repositories": [{
 "type": "path",
 "url": "addchat-laravel-pro/"
 }]

}
  1. Install AddChat Laravel Pro via Composer
composer require classiebit/addchat-laravel-pro
  1. Run AddChat install command
php artisan addchat:install
  1. While installation, it will ask you for the license code. Enter the license code to complete the installation process.

Remember, one license code is valid for one domain only. Contact support for more details.


  1. Open the common layout file, mostly the common layout file is the file that contains the HTML & BODY tags.
  • Copy AddChat CSS code and paste it right before closing </head> tag
<!-- 1. Addchat css -->
<link href="<?= asset('addchat/css/addchat.min.css') ?>" rel="stylesheet">
  • Copy AddChat Widget code and paste it right after opening <body> tag
<!-- 2. AddChat widget -->
<div id="addchat_app" 
 data-baseurl="<?= url('') ?>"
 data-csrfname="<?= 'X-CSRF-Token' ?>"
 data-csrftoken="<?= csrf_token() ?>"
></div>
  • Copy AddChat JS code and paste it right before closing </body> tag
<!-- 3. AddChat JS -->
<script src="<?= asset('addchat/js/addchat.min.js') ?>"></script>

The final layout will look something like this

<head>

 <!-- **** your site other content **** -->

 <!-- 1. Addchat css -->
 <link href="<?= asset('assets/addchat/css/addchat.min.css') ?>" rel="stylesheet">

</head>
<body>

 <!-- 2. AddChat widget -->
 <div id="addchat_app" 
 data-baseurl="<?= url('') ?>"
 data-csrfname="<?= 'X-CSRF-Token' ?>"
 data-csrftoken="<?= csrf_token() ?>"
 ></div>

 <!-- **** your site other content **** -->

 <!-- 3. AddChat JS -->
 <script src="<?= asset('addchat/js/addchat.min.js') ?>"></script>
 
</body>

For Info, the php artisan addchat:install publishes AddChat assets to your application public directory


Developer Installation

This is an advanced installation method. This method will help you customizing the AddChat VueJS code. We recommend this method only if-

  • You're a developer.
  • If you're already using VueJS into your website.

  1. If installing AddChat on an existing Laravel application and you already have Auth system then skip this step.

If installing on a Fresh Laravel application then run

For Laravel 5.5 to 5.8

php artisan make:auth

php artisan migrate

For Laravel 6.x

composer require laravel/ui --dev

php artisan ui vue --auth

npm install && npm run dev

php artisan migrate
  1. Unzip the addchat-laravel-pro.zip file. Copy addchat-laravel-pro & addchat-vuejs-pro and paste them into Laravel website root directory.

The folder name must be same as addchat-laravel-pro and addchat-vuejs-pro.


  1. Open your Laravel application composer.json file and paste the below code in the end (right before last curly } bracket)
"repositories": [{
 "type": "path",
 "url": "addchat-laravel-pro/"
}]

(once you complete, the composer.json file will look something like this)

{
 .
 .
 .
 .
 .
 
 "repositories": [{
 "type": "path",
 "url": "addchat-laravel-pro/"
 }]

}
  1. Install AddChat Laravel Pro via Composer
composer require classiebit/addchat-laravel-pro
  1. (NEW STEP) Install AddChat VueJS Pro via NPM
npm install addchat-vuejs-pro
  1. Run AddChat install command
php artisan addchat:install
  1. While installation, it will ask you for the license code. Enter the license code to complete the installation process.

Remember, one license code is valid for one domain only. Contact support for more details.


  1. Now, you need to import the AddChat VueJS plugin into your VueJS app.
  • Go to your website resources/js/app.js and import the AddChat VueJS plugin.
import AddchatVuejsPro from 'addchat-vuejs-pro';
Vue.use(AddchatVuejsPro);
  • Then run
npm run dev
  1. In the last step, you only need to include addchat.min.css and VueJS widget code.
  • Copy AddChat CSS code and paste it right before closing </head> tag
<!-- 1. Addchat css -->
<link href="<?= asset('addchat/css/addchat.min.css') ?>" rel="stylesheet">
  • Copy AddChat Widget code and paste it right after opening <body> tag
<!-- 2. AddChat widget -->
<div id="addchat_app" 
 data-baseurl="<?= url('') ?>"
 data-csrfname="'X-CSRF-Token'"
 data-csrftoken="<?= csrf_token() ?>"
></div>
  • At this point, we assume that you've already included app.js.
<script src="<?= asset('js/app.js') ?>"></script>

Please replace PHP tag by curly brackets.


Setup finishes here, now heads-up straight to Configurations docs


addchat-laravel-pro-docs's People

Contributors

classiebit avatar

Watchers

 avatar  avatar

Forkers

cryptobuks1

addchat-laravel-pro-docs's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.