Skip to content

Bare Project

Overview

This guide will lead you to install the project as a stand-alone web application, most of the configuration settings will be kept intact and, default web views will be used directly.

1. Creating a Laravel project.

First you'll need a fresh installation of the Laravel framework by going through its official documentation here, or you can follow the following summarized steps.

1.a. Create project

In terminal at your web root please run the following command:

$ composer create-project laravel/laravel <your_project_name> --prefer-dist
$ cd <your_project_name>

Replacing <your_project_name> with project name of your preference.

1.b. Setting up the Database.

Then you'll have to create the database for the project so, you'll need to login to your database server in terminal.

$ mysql -u <username> -p

Replacing <username> with your database server's username then, enter the password when prompted and, finally in the open mysql terminal you may write:

create database <database_name>;
exit;

Replacing <database_name> with the name you'd like to give to your new database.

Then in the .env file found in the root directory of your project, please set the values of all variables starting with DB_ accordingly.

2. Installing Web Call Center

This project is created as a package to be integrated with a Laravel application, that's why we had to create fresh project first in the previous step.

2.a. Requiring the Package

Now to install the project, in the terminal at your project's root directory, please write the following.

$ composer require grey-dev-0/web-call-center:@dev

2.b. Publishing Assets

Web call center supports customizations to its views and configurations thus, you should publish them to your project in case if you need to customize any of the views (UI) or configurations (settings).

$ php artisan vendor:publish --force --provider='GreyZero\WebCallCenter\Providers\AppServiceProvider'

2.c. Populating the Database

Well we've created the database for our project, but we haven't started using it yet, so in the same terminal please write the following:

$ php artisan queue:table
$ php artisan migrate

The last couple of commands have published Laravel's background queue jobs tables that will handle processing operations done in background and, it also creates the database tables required by the project to run in general.

3. Integrating Agora

The package relies on Agora IO WebRTC services to implement the voice calls feature between customers and agents, the service provides a free plan that's a good starter for this project so, first you'll have to sign up to their service here or, if you already have an account you can directly use it.

For detailed steps on how to setup Agora in our project please refer to Agora installation page.

4. Integrating Laravel Websockets

Laravel Websockets is a library used internally by this project that enables the server to monitor which customer support agents are currently online within each organization, so that incoming calls can only be assigned to online agents.

To set it up please refer to Laravel Websockets installation page.

5. Web Server Configuration

At this point our project is running in background but, most likely it's not serving anyone because, we haven't covered the web server configuration for our project so, let's finalize our setup with this last step.

If you don't have nginx configuration file for the project yet, please create one in /etc/nginx/conf.d directory, filename doesn't matter much as long as it ends with .conf extension, in that file whether you've just created it or you're editing an existing one please ensure it matches the following, replacing all <placeholder> values with your corresponding values:

server {
    listen       80;        # Disable this on Production server for security
    listen       [::]:80;   # Disable this too on Production
    listen       443 ssl;
    listen       [::]:443 ssl;
    server_name  <your_domain>;
    ssl_certificate /etc/nginx/ssl/certificate.pem;
    ssl_certificate_key /etc/nginx/ssl/key.pem;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_session_tickets off;
    ssl_stapling off;
    ssl_stapling_verify off;
    index index.php;
    root <aboslute_path_to_project>/public;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location /app/<app_key_in_env_file> {
        proxy_pass http://127.0.0.1:6001;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade "websocket";
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 30000s;
        proxy_send_timeout 30000s;
        proxy_redirect off;
        proxy_connect_timeout 30000s;
    }

    # Replace this with your php-fpm configuration block or correct configuration file.
    include common/php-fpm.conf;

    location ~ \.env$ {
        deny all;
    }
}

Notice

If you have changed the default websocket port with LARAVEL_WEBSOCKETS_PORT variable in the .env file, please replace the port 6001 in the nginx configuration above with the one you specified in the .env file accordingly.

IMPORTANT

After saving the file you'll need to run the following command in terminal to use the new configuration.

$ nginx -s reload

You'll need to add the following VirtualHost block to your default Apache configuration or, edit the one that corresponds with your server's domain name if you're on a server, replacing all <placeholder> values with your corresponding values, the file can be created or edited if exists in /etc/httpd/conf.d directory:

<VirtualHost *:80>      # Remove this block on Production server for security.
    ServerName <your_domain_name>
    DocumentRoot <aboslute_path_to_project>/public

    <Location "/app/<app_key_in_env_file>">
        ProxyRequests on
        RequestHeader set X-Forwarded-Proto "http"
        ProxyPass / https://127.0.0.1:6001/
        ProxyPassReverse / https://127.0.0.1:6001/

        RewriteEngine on
        RewriteCond %{HTTP:UPGRADE} ^WebSocket$ [NC]
        RewriteCond %{HTTP:CONNECTION} ^Upgrade$ [NC]
        RewriteRule .* ws://127.0.0.1:6001%{REQUEST_URI} [P]
    </Location>
</VirtualHost>

<VirtualHost *:443>
    ServerName <your_domain_name>
    DocumentRoot <aboslute_path_to_project>/public
    SSLEngine on
    SSLCertificateFile /etc/apache2/ssl/certificate.pem
    SSLCertificateKeyFile /etc/apache2/ssl/key.pem

    <Location "/app/<app_key_in_env_file>">
        ProxyRequests on
        RequestHeader set X-Forwarded-Proto "http"
        ProxyPass / https://127.0.0.1:6001/
        ProxyPassReverse / https://127.0.0.1:6001/

        RewriteEngine on
        RewriteCond %{HTTP:UPGRADE} ^WebSocket$ [NC]
        RewriteCond %{HTTP:CONNECTION} ^Upgrade$ [NC]
        RewriteRule .* ws://127.0.0.1:6001%{REQUEST_URI} [P]
    </Location>
</VirtualHost>

Notice

If you have changed the default websocket port with LARAVEL_WEBSOCKETS_PORT variable in the .env file, please replace the port 6001 in the apache configuration above with the one you specified in the .env file accordingly.

IMPORTANT

After saving the file you'll need to run the following command in terminal to use the new configuration.

$ systemctl restart httpd

If that didn't work due to a command not found error, you can write:

$ service httpd restart

6. We're Done. What's Next!

If you have followed all the steps above you're having a functional call center web application running but, there are no organizations, agents nor, customers in the system to try out so, you have two options:

  1. Connect to the project's database and create them yourself.
  2. Or run php artisan db:seed --class TestSeeder.

If you run the seeder, a couple of dummy organizations will be created for you in the database including some agents for each and, some customers, by accessing https://<your_domain>/login - replacing <your_domain> with your actual project's domain - then entering the username agent00 or client20 and password test123 you'll be logged in to the corresponding dashboard.

You can check the rest of the accounts created in the wcc_users table in the project's database.