Introduction

ChaTicket is a ticketing system you can use it to provide support for almost any type of products, ChaTicket is a unique mix of live chat app like messenger and ticket system platform that includes all the necessary features like ticket department, statue, auto agent assignement, mail notifications, public and private tickets, search tickets, and it's also support Envato items with auto purchase code checker, ChaTicket can be used as micro service support system thanks to our design architecture tickets are stored in custom database away from your main database.

ChaTicket is completely restful you can access your tickets, create and answer them throw AJAX requests from any other domain or server, ChaTicket is not your grandpapa support system it's the future of making your customers more happy.

It's highly recommended to go throw each section and follow the steps, If you can't find what you look for ,We encourage you to reach us through our Support portal. We'll be glad to help you out in your queries. Please create ticket through our Support portal

ChaTicket Requirements

  • Apache or Nginx WebServer (we recommend Apache)
  • PHP version 5.6 or greater (we recommend 7 or greater)
  • WordPress 4.5 or greater
  • PHP memory of 256M or greater.

ChaTicket API Requirements

  • Server with SSH access
  • Apache or Nginx WebServer (we recommend Nginx)
  • PHP version 5.6 or greater (we recommend 7 or greater)
  • PHP ZeroMQ Extension
  • WordPress 5.0 or greater
  • PHP memory of 256M or greater.

Note:

You can still use Apache or Nginx without SSH access for your API however the live features won't work, See server configuration section for more information.

Server Recommendations

We recommend hosting ChaTicket API plugin on custom server, VPS with only 512mb ram should be enough even if you except large volum of tickets, Here is a list of recommended hosting:

Installing Nginx

If you are on amazon ec2 then please check the following article otherwise keep reading

  • Login to your server using Terminal ( If you are on Windows use PuTTy )
  • For Ubuntu or Debian os use the following command: $ sudo apt-get update
    $ sudo apt-get upgrade
  • Now you can start the installation of Nginx using the following command $ sudo apt-get install nginx

Once you are done visit your server IP address and you should see nginx welcome page

PHP-FPM + MySQL Install

After installing Nginx you need both php and mysql in order for WordPress to work, To do that do the following steps:

  • Install MySQL with the following command $ sudo apt-get install mysql-server You will be asked to supply a root (administrative) password for use within the MySQL system. The MySQL database software is now installed, but its configuration is not exactly complete yet.
  • To finish MySQL installation process use the following command: $ mysql_secure_installation

You will be asked to confirm your root password then type Y ( yes ) to continue, Once you finish MySQL installation you can process with installing PHP-FPM with the following command:

$ sudo apt-get install php-fpm php-mysql

Installing PHP ZeroMQ

ZeroMQ is a minimalist library with an API resembling BSD sockets that allows for building efficient and flexible messaging systems without much pain, With ChaTicket we use ZeroMQ to carry messages and notifications without it none of our live features will work

There is many ways to instal ZeroMQ, We will start with the easy one insatlling via PHP Pear:

To make sure PHP Pear is installed use the following command: $ sudo apt-get install php-pear

After that you may try to install it ZMQ with the following command: $ sudo pecl install zmq-beta

If the above command didn't work or you got an error then you might try the following: $ sudo apt-get install php-zmq

Once the install is done you can enable the extension to do that use add the following line inside php.ini file extension=zmq.so $ sudo apt-get install nano
$ sudo nano /etc/php/7.0/fpm/php-fpm.conf

Then restart the php service with the following command: $ sudo systemctl restart php-fpm.service

If the above code didn't work try the following: $ sudo systemctl restart php7.0-fpm.service

Nginx PHP Configuration

By default nginx won't run your PHP files you need first to edit the config file: $ sudo nano /etc/nginx/sites-available/default

This is how your config file should look: server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /var/www/html;
    index index.php index.html index.htm index.nginx-debian.html;
    server_name server_domain_or_IP;

    location / {
        try_files $uri $uri/ =404;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php7.0-fpm.sock;
   }

    location ~ /\.ht {
        deny all;
    }
}

Please note in the above example we are using PHP version 7.0 if you are using other version make sure to change the following line: fastcgi_pass unix:/run/php/php7.0-fpm.sock;

Note:

We are not done yet with the configurations, Don't close this file

Nginx WebSocket

To open new TCP port on your nginx server add the following lines at the top of /etc/nginx/sites-available/default file

upstream websocket{
    server SERVER_IP_OR_DOMAIN:8888;
}

map $http_upgrade $connection_upgrade {
    default Upgrade;
    '' close;
}

Please note 8888 is the port number that we will use later in our plugin settings you can change it to other port if you wish

Nginx Allow-Origin

Since we are installing the API plugin and the APP on different domains we need to tell Nginx to allow Cross Origin to do that add the following lines: location / {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin: $http_origin';
        add_header 'Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE, HEAD';
        add_header 'Access-Control-Allow-Credentials: true';
        add_header 'Access-Control-Allow-Headers: Origin,Content-Type,Accept,Authorization';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;

        return 204;
    }

    if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin: $http_origin';
        add_header 'Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE, HEAD';
        add_header 'Access-Control-Allow-Credentials: true';
        add_header 'Access-Control-Allow-Headers: Origin,Content-Type,Accept,Authorization';
    }

    if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin: $http_origin';
        add_header 'Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE, HEAD';
        add_header 'Access-Control-Allow-Credentials: true';
        add_header 'Access-Control-Allow-Headers: Origin,Content-Type,Accept,Authorization';
    }
}

Apache Server Configuration

We are not going throw installing apache and php in this section since it's already installed on most hosting and comes with any control panel such as Cpanel, However if you have clean server ( We recommend that for the API ) you will find many tutorial on the web can take you throw the required steps, Here is one of the good articles

Installing PHP ZeroMQ

To install ZeroMQ log in to your server through Putty or any similar, We will start first with updating the repo with the following command:

$ sudo apt-get update

Then install the require dependency:

$ sudo apt-get install php-pear libzmq3-dev

You can now start installing ZeroMQ with pecl:

$ sudo pecl install zmq-beta

After installing ZMQ make sure to add the following line at your php.ini config file

extension=zmq.so

Apache ModProxy

We will be using Apache mod_proxy to enable ws:// protocol, mod_proxy already comes with apache however we still need to enable it from your SSH, To do that use the following command

$ a2enmod proxy
$ a2enmod proxy_http
$ a2enmod proxy_wstunnel

We can start now adding our wss:// port number and domain at apache config file.

$ nano /etc/apache2/sites-available/000-default.conf

Add the following lines:

< VirtualHost *:443 >
 < Directory '/var/www/html' >
    Options +Indexes +FollowSymLinks +MultiViews
    AllowOverride All
    Require local
 < / Directory >
  # Websocket proxy
  # wss redirects to working ws protocol
  ProxyPass /wss ws://DOMAIN_NAME.COM:8888 retry=0 keepalive=On
  ProxyPassReverse /wss ws://DOMAIN_NAME.COM:8888 retry=0
< / VirtualHost >

Apache Authorization Header

Since we are going to use JWT Authentication we need to make sure our Apache server will pass the require Authentication http header to any request, To do that let's first enable headers module:

$ a2enmod headers

After that add the following line at your WordPress .htaccess file

SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

Installing WordPress Over SSH

There is manay tutorials covers how to install WordPress if you are using control panel on your server like Cpanel this might be pretty easy, However our aim in this docs to covers how to install it over SSH, Bring a cup of tea and let's get started

Creating Database

First log in to your server SSH using PuTTy, To access mysql use the following command:

$ mysql -p

Enter the root password which you already set in PHP-FPM MySQL Install step

To create new database use the following command:

$ CREATE DATABASE DATABASE_NAME;

To create new database user use the following command:

$ CREATE USER 'USER_NAME' IDENTIFIED BY 'USER_PASSWORD';

Now we need to grant privileges on our database to the new created user:

$ GRANT ALL PRIVILEGES ON DATABASE_NAME.* TO 'DATABASE_USER';

The last step is to alter our new created user:

$ ALTER USER 'DATABASE_USER' IDENTIFIED WITH mysql_native_password BY 'USER_PASSWORD';

Reminder:

Please make sure to replace DATABASE_NANME, DATABASE_USER, USER_PASWWORD with your values and save them we will use these values on our WordPress setup

Cloning WordPress

We will download WordPress lasted version from SSH but first let's make sure we have wget installed on our server ( wget is used to download the zip files to our server ): $ sudo apt-get install wget

Before we start downloading WordPress files we need to go to the correct directory where we want to setup our WordPress, in Nginx server your root folder is located in: $ cd /var/www/html

If you want create new directory use the following command: $ mkdir DIRECTORY_NAME
$ cd DIRECTORY_NAME

Now we can grab the lasted WordPress version to our directory using the following command: $ wget http://wordpress.org/latest.tar.gz
$ tar xfz latest.tar.gz
$ rm -f latest.tar.gz

WordPress Config

Directory structure

Once you have downloaded the package, and after extracting, you will see the following files & folder structure:

  • chaticket
    This is chaticket reactjs app, Customers can create tickets on the same domain where chaticket plugin is installed
  • chaticket-api
    The api plugin for chaticket, This plugin will handle storing and getting your tickets from the database to the app
  • tcp-server
    This folder will be uploaded to your server and we will explain later how to run it throw SSH access
  • Documentation
    The documentation you are reading right now

Install ChaTicket API

To install a plugin you generally just need to put the plugin file into your 'wp-content/plugins' directory. Once a plugin is installed, you may activate it or deactivate it from the Plugins menu in your WP administration

You can also upload the plugin from WordPress dashboard go to Plugins > Add New then select Upload plugin and choose chaticket-api.zip file from the downloaded package

Reminder:

The API plugin should be installed on Nginx or Apache server with ZeroMQ extension installed, It's also recommended to install it on other domain different than the APP domain.

Install JWT Authentication

After installing and activating ChaTicket API you should see the following warning:

JWT Authentication for WP REST API extends the WP REST API using JSON Web Tokens Authentication as an authentication method

After installing JWT Authentication you need to do the following:

  • Edit your WordPress wp-config.php file ( It's on your website root folder ) and add the following line:

    define('JWT_AUTH_SECRET_KEY', 'your-top-secret-key');

    To generate secret key you might check this website
  • If both the API and the APP plugin are not on the same domain then you might need to enable cors, To do that add the following line in wp-config.php

    define('JWT_AUTH_CORS_ENABLE', true);

After all your config file should look like that:

Install ChaTicket APP

Once you installed the API plugin you might install ChaTicket APP on other domain, go to Plugins > Add New then select Upload plugin and choose chaticket.zip file from the downloaded package

The APP settings are located inside Apperance > Customizer therefor you need to install the following require plugin

Websocket Listener

In server configuration section we have added Nginx Websocket now let's configure our server.php to point to that socket, Modify server.php file which is inside tcp-server folder ( inside the downloaded package )

At line #10 you should see 127.0.0.1 replace it with your server IP as the following: $pull->bind('tcp://SERVER_IP:5556');

At line #14 you will see the port number for our websocket which is 8888 it should be the same as the port number from step Nginx Websocket $webSock = new React\Socket\Server('0.0.0.0:8888', $loop);

Start the listener

Now our websocket is ready to listen to our app changes, After uploading tcp-server folder to our API server, Login to your server throw SSH then run the following command: $ php -q /var/www/html/tcp-server/server.php

Settings Overall

After activating ChaTicket API plugin you should see new menu icon as the following screen:

The most important part of the API settings is TCP & APP Settings From there point your API to the domain name where the APP plugin is installed

Tickets Settings

This section covers the basic settings for tickets and answers, For example from there you can set the minum number of words on new answers

TCP & APP Settings

This is the most important section for the app to work correctly which includes:

  • APP Domain: The domain name where chaticket app is installed also make sure to include the tickets page in your url
  • APP Domain Login Page: The login page for your app, This is will be used to redirect users after loging or register with Envato API
  • TCP Address: Your TCP server domain or IP address without tcp://
  • TCP Port: Your TCP port which we added in Websocket Listener step ( in our case is 5556 )

Mail Notifications

From there you can set the default mail mesage on new ticket or answer creation

Please note by default Nginx servers requires additional steps to send mail, If you would like to avoid these steps you can use Gmail SMTP service to send mails, Please check the following plugin for more information WP Mail SMTP by WPForms

Inside your mail message you can use any of the following shortcodes:

Shortcode Description
[ticket_id] ID of the associated ticket
[ticket_title] Ticket title
[sender_name] Name of the user that triggered the action

APP Notifications

By default both agents and customers will receive notification on any new answer for their tickets, From this section you can also send the same notification to the API administrators

Here is the available types of notifications:

  • Create: Admins and agents only will receive this type
  • Answer: Ticket owner, agent and admins will receive notification on new answers
  • Closed: Ticket owner will be notified on ticket close, If the statue changed by managers agents also will be notified
  • Opened: Ticket owner will be notified on ticket opened, If the statue changed by managers agents also will be notified
  • Asset: Agents and managers can asset tickets, This notification type is visiable for them only

Users & Permissions

ChaTicket includes built in roles system, There is three types of roles, Customer, Agent, Manager, Here is list of the avilable permissions:

'read', 'edit_ticket', 'read_ticket', 'delete_ticket', 'edit_tickets', 'edit_others_tickets', 'edit_ticket_privacy', 'edit_tickets_privacy', 'publish_tickets', 'read_private_tickets', 'read_tickets_notes', 'manage_statuses', 'assign_statue', 'assign_statues', 'manage_agents', 'assign_agent', 'manage_department', 'assign_department', 'upload_files', 'delete_posts', 'edit_reply', 'edit_others_replies', 'read_saved_answer', 'delete_saved_answer', 'edit_saved_answers', 'publish_answers', 'publish_answer', 'delete_answer', 'delete_answers', 'read_purchase', 'edit_purchase', 'edit_purchases', 'delete_purchase', 'publish_purchases', 'edit_answer', 'edit_answers'

Envato Integration

How it work ?

Envato products can be linked with tickets departments, This will require customers to add purchase code to create ticket

If customers logged with their Envato account, any purchase from the APP creator will be stored and the purchase field will be automaticlly filled during creating new ticket.

Featch Envato Products

To load Envato products you will be required to enter your Envato account user name and to enter token.

  • Go to Envato Create Token Page
  • Add name for your new token
  • Check on View and search Envato sites
  • Check on View your items' sales history
  • Check on Verify purchases of your items

After creating new Envato token, Copy the token and add it to ChaTicket API plugin settings page:

Note:

Save your new token before clicking on Featch Envato Products

Create Envato Item Department

After fetching your Envato items you might go Tickets > Departments and you will able to assign an Envato item to your departement

Note:

Users will be required to enter their purchase code if they selected Envato item department on the create ticket page, If the purchase code is already entered before or the user logged with his/her Envato account the code field will be automatically filled.

Setup Envato Login

You need to create Envato APP in order to enable Envato login:

  • Goto the Envato API New App Page
  • Enter your APP name
  • Check the required permission as the following screen
  • Add ChaTicket APP login page ( Will be covered more in next sections )
  • Check the I have read and understood terms checkbox
  • Click the Register App button
  • After creating your APP make sure to copy the secret key somewhere safe
  • Also make a note of your OAuth client ID from your Envato My Apps page

Configure Envato Login

Now go to the ChaTicket API settings page then navigate to Envato Integration section and paste both the OAuth ID and client secret key

APP Settings

ChaTicket APP settings are located at Appearance > Customize > ChaTicket APP

APP Pages

ChaTicket requires setting 5 pages in order for the APP to work correctly:

  • Tickets Page: Will be used to show the tickets list and single ticket
  • Create Ticket Page: The page for creating new ticket
  • Login Page: Page for login
  • Register Page: Adding new user page
  • Terms Page: Service terms

Note:

You must use [chaticket] shortcode at all the app pages.

APP API & WebSocket

You must point your APP to the API if you left this section empty ChaTicket APP won't work

1 This is the domain where ChaTicket API is installed

2 This is the WSS listener port which we already setup in Websocket Listener section

APP Template

1 Clean mode will only load the APP asset files without any theme header or footer

2 This option is different than the default WordPress custom homepage, It will redirect users to your tickets page insted of using the tickets page as home

APP Colors

The most important fields in the colors section is Primary Color and Secondary Color the primary color is used as highlighted for inputs and buttons the secondary is for things like notification count and secondary buttons

Need Help ?

If you need help with installing or configure ChaTicket we would love to hear from you, Please submit new request at our support portal