GETTING STARTED

Installing Support Board

In order to install Support Board on your server please follow the steps below:

  • Open the archive supportboard.zip and extract the folder in a server location of your choice.
  • Navigate to the link http://[your-site]/supportboard/admin.php and complete the installation. Replace [your-site] with the URL of your website's plug-in location.
  • Once the installation is complete, log-in with the email and password you inserted in the previous step and you're done.
  • If you're updating the plugin from an older version delete the old plugin first. Mind that the new version will not be compatible with the old conversations.

Display the chat

In order to display the chat in the pages of your website please include the following scripts into the <head><head> area or into the <footer><footer> area.

<script src="supportboard/js/min/jquery.min.js"></script>
<script src="supportboard/js/init.js"></script>

URL parameters

  • lang=LANGUAGE-CODE See the multilingual docs for more details.
  • url=PLUGIN-URL Use this parameter if your plugin URL / folder has been changed. Replace PLUGIN-URL with the URL of the plugin folder. You can also define the Javascript variable SB_INIT_URL = "PLUGIN-URL".

In order to install Support Board on WordPress follow the steps below:

  • Your server must allow the access of the file supportboard/include/ajax.php
  • If you're updating the plugin from an older version delete the old plugin first. Mind that the new version will not be compatible with the old conversations.
  • Go to the Plugins page and click Add new then Upload plugin and upload the file supportboard.zip.
  • Once the installation is complete you should see a new left menu item named Support Board. You're done, the chat is automatically shown on all pages.

Requirements

  • The pages where you include the chat must be HTML or PHP pages and must be opened via a server.
  • You can not display the chat in a HTML page opened directly via file opening. Use a server instead.
  • The plugin folder name must be supportboard. Do not rename it.
  • Your server must allow the access of the file supportboard/include/ajax.php
  • For the WordPress version only. If you have security plugins installed make sure they don't block the file supportboard/include/ajax.php
  • JQuery 1.1+
  • PHP 7+
  • In your server settings, PHP SESSIONS, allow_url_fopen must be enabled.
  • MySQL

Activation

To activate the plugin and enable all the features, including the automatic updates, you need to insert the Envato Purchase Code into the Settings > Various area of the admin page.

Find your Envato Purchase Code

Updates

  • To update Support Board go to the Admin area and click the bottom left version number.
  • You can activate the automatic updates from Settings > Various.
  • To enable the updates you need a valid Envato Purchase Code. To update the Apps you need a valid License Key for that App and the License Key must not be older than 1 year, if you purchased the License Key more than 1 year ago, to enable the updates again, you will need to purchase a new license.
  • The latest versions of the Apps don't work if Support Board is not updated to the latest version.
  • If you're using the WordPress version, mind that you can not update Support Board from the Plugins page of WordPress.

More settings

Cross-domain installation

If you want to use the same chat installation on multiple domains your server must allow cross-origin requests. To enable cross-origin requests on your server follow the steps below.

  • For Apache servers only Edit the file .htaccess of the domain where the plugin is installed and insert, at the top, the code Header set Access-Control-Allow-Origin "*". You can insert this code too: <IfModule mod_deflate.c="">header('Access-Control-Allow-Origin: *');</IfModule>.
  • For nginx servers Edit the file /etc/nginx/nginx.conf of the domain where the plugin is installed and insert, at the top, the code add_header Access-Control-Allow-Origin "*";.
  • If the above solutions don't work or you can't change the server configuration, edit the files supportboard/include/ajax.php and supportboard/include/init.php and insert on top, as first line, the code header('Access-Control-Allow-Origin: *');

If the chat works but icons and fonts are missing you need to edit your server settings. Remove header('Access-Control-Allow-Origin: *') or from the .htaccess file and edit directly the server settings as described above. See the tutorial for the most common server administration software in the list below.

Blocking zoom on iOS devices

When using the chat on iPhones the textarea is automatically zoomed when the user's start typing a new message. To stop the zoom insert the code below into the <head> area of all the pages that include the chat.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />

Problems ?

For any issue please contact the support at support@schiocco.com. Before contacting us please make sure your server has all the requirements, if you are using WordPress make sure your WordPress installation has all the requirements.

Chat not displayed

You can not see and test the chat as a user if you're logged in the admin area. Logout or use another browser, Incognito Mode to test the chat as a user. You can force a logout by execute the function SBF.reset() in the console.

Admin account deleted

If you accidentally deleted all your admin and agent accounts and you can't login again in the admin area you will need to manually fix the issue by following the steps below.

  • Edit your MySQL Database. You can edit it from your hosting panel, usually with phpMyAdmin.
  • Edit the table sb_users.
  • You can convert any existing user to admin by editing the column user_type, insert the value admin.
  • You can also add a new user, you must assign a value to the columns first_name, last_name, password, email, user_type. The value of the password column must be a hash, to generate the hash for your password visit https://php-password-hash-online-tool.herokuapp.com/password_hash. The value of the column user_type must be admin.

Server down

If your server and website go down/stop working after a few minutes of chat usage, the issue could be related to your server Firewall or IP Address Banning (Fail2Ban) or Web Application Firewall (ModSecurity) settings. The multiple AJAX requests of the chat to the database are recognized as an attack and so your server blocks your IP temporarily. This issue should affect only your or your developers and not the users. To confirm the issue use VPN like Hotspot Shield, when the server goes down, activate the VPN to change your IP and try again to access your website, if the website works the issue is confirmed. To solve it temporarily disable fail2ban or contact your hosting support.


CONVERSATIONS

Manage conversations

A conversation has few but important status: mark as read, archive, delete and restore. You can manage the status of a conversation by opening it in the conversations area and by clicking the top right icon buttons.

  • When you empty the trash all the conversations in the trash are permanently deleted.
  • If a user write a a new message to an archived or trashed conversation the conversation is automatically restored and will be visible in the Inbox area.
  • When a user is deleted all their conversations and messages will be permanently deleted too.
  • An agent can delete their own messages by opening the message menu and clicking Delete. The message menu become visible by moving the mouse cursor over the message.

Text editor features

The text editor of the admin area can be used to create complex messages, below the features available.

  • All text links are automatically converted to clickable links.
  • The editor support the Slack text formatting syntax.
    • To make a text bold surround it with asterisks: *your text*.
    • To make a text italic surround it with asterisks: _your text_.
    • To make a text strikethrough surround it with asterisks: ~your text~.
    • To insert a code single line surround it with asterisks: `your text`.
    • To insert a code block surround it with asterisks: ```your text```.
  • No HTML, JS or other codes are allowed. You can insert only text. To insert custom HTML create a custom rich message.
  • To insert a breakline into the message use the keyboard combination CTRL + ENTER.

Rich messages

Rich messages are special messages with interactive features like buttons or inputs. They allow the user to insert information and send it via a form. The Support Board rich messages can be inserted into a message via shortcodes, this means that you just need to insert a string(the shortcode) into the message and send it. The shortcodes accept various parameters like title and description. The available rich messages are in the list below.

How it works


1

Create and send

Rich message Insert the shortcode into the text editor of the admin area, customize the parameters with your information and send it.
2

User get it

Rich message The user will see the actual rich message and will insert the required information to complete the form.
3

User's response

Rich message Once the rich message has been filled and sent by the user a success message is shown and the data saved.

Rich messages


Name Shortcode Description
Card
[card image="URL" header="TITLE" description="Lorem ipsum dolor sit amete" link="URL" link-text="Purchase" extra="$599"]
Display a card with image, title, description, link, and more.
Slider
[slider image-1="URL" header-1="TITLE" description-1="Lorem ipsum dolor sit amete" link-1="URL" link-text-1="Purchase" extra-1="$599" image-2="URL" header-2="TITLE" description-2="Lorem ipsum dolor sit amete" link-2="URL" link-text-2="Purchase" extra-2="$599"]
Display a slider of cards with image, title, description, link, and more. You can add up to 10 items.
Buttons
[buttons options="A,B,C"]
Display a list of buttons.
Select
[select options="A,B,C"]
Display a dropdown list of options.
Inputs
[inputs values="A,B,C" button="Send now"]
Display a list of text inputs.
Email
[email]
Display the form to ask the user email.
Registration
[registration]
Display registration form.
Timetable
[timetable]
Display the timetable.
Articles
[articles]
Display the articles.
Rating
[rating]
Display the form to give a rating to the agent.
List
[list values="A,B,C"]
Display a static text list.
List double
[list values="A:X,B:Y,C:Z"]
Display a static text list with titles.
Table
[table header="A,B,C" values="A:B:C,A:B:C,A:B:C"]
Display a table.

Global parameters

All the rich messages support the following parameters.


Parameters Description
id="123"
The ID of the rich messages. It will be used also to save the JSON data. If no ID is provided a random one will be generated automatically.
title="ABC"
The rich message title.
message="ABC"
The rich message description that appear underneath the title.
success="ABC"
The message that appear when the user complete and send the rich message. The user input will be appended to this message.

Rich message response

When the user completes the form of the rich message a success message is shown. The message includes the user input. The structured user's response data is saved in Json format in the database, table sb_messages, column payload. Ex.:

{"rich-messages":{"4Voyu":{"type":"email","result":{"email":["example@gmail.com","Your email ..."]}}}}


Custom rich messages

You can create custom rich messages with your custom content by going to Settings > Various . Currently, the custom rich messages are static and no interactive options are available. You can insert HTML codes.


HTML codes

When creating custom rich messages you can use the following codes.


Code Description
<a href="https://www.google.com" target="_blank" class="sb-rich-btn sb-btn">Click here</a>
Display a button with a link.

Attachments

The allowed file extensions for the attachments are setted into supportboard/include/upload.php. Images in .jpg, .jpeg, .png are displayed automatically.


USERS

Manage users

The users can be managed from the Users area.


Search users

You can search users by name, surname, email and custom fields information.

Delete users

You can delete a user by open the User edit box and by clicking Delete user . To delete multiple users at once select the users you want to delete from the Users table and then click the top right icon Delete. When a user is deleted all their conversations and messages will be automatically deleted permanently. Visitors are automatically deleted every 24h.

User types


Type Description
user
Any user with email.
lead
Guest users automatically registered without registration, without email and with at least one conversation.
visitor
Any website visitor without any conversation. Visitors are automatically deleted every 24h.

Manage agents

The agents can be managed from the Users area. An agent is a special user that can log-in to the admin area and reply to all the conversations. There are two type of agents agent and admin. The admin type is the only that can create new agents and admins and enter in the settings area. The agent type can only manage users and conversations.

If you are using the WordPress version an admin with the same user and password of the logged in user will be created on plugin activation.


Information

  • The log-in form is shown only if the registration password field is shown.
  • The password field is always shown when the chosen users system is WordPress.

SETTINGS

Email

Both agents and users can receive an email notification when a new message is received.


When and how often the emails are sent

When a user sends the first message an email is sent to all the agents, subsequent emails are sent only to the last agent of the conversation. Subsequent messages do not trigger a new email alert unless the user reloads the page or navigates to another page, in this case another single email is sent only if the agent is not online.

When an agent sends a message to a user an email is sent to the user only if the user is not online. Subsequent messages do not trigger a new email alert unless the user reloads the admin area.

Create the email

To manage the emails and create the body go to Settings > Notifications. You can use text and HTML. New lines are automatically converted to <br />. You can use the following code in the email. These codes will be automatically replaced with the updated information.


Code Description
{recipient_name}
The name of the user or agent that will receive the email.
{sender_name}
The name of the user or agent associated with the message that triggered the email notification.
{sender_profile_image}
The profile image of the user or agent associated with the message that triggered the email notification.
{message}
The message that triggered the email notification.
{attachments}
The attachments links of the message that triggered the email notification.

Problems?

The email can not be sent for various reasons, below the common ones.

Reason Description Solution
Hosting problems The email server of your hosting is not able to send the emails or the emails are sent but are automatically detected as spam and deleted by the email clients. Contact your hosting for support or use your SMTP server by activating it in the Notifications area.
SMTP problems The email is not send also if you activated the SMTP option in the Notifications area. We don't provide support for problems related to your SMTP. Send a test email to get details about the issue or use sendgrid.com, you can send 40000 emails for 30 days for free, then 100/day forever for free.

Office hours

You can set the Office hours table from Settings > various. The office hours are used for:

  • Automatically display the timetable when a user write a message but the current time is not within the office hours.
  • Disable and hide the chat if the current time is not within the office hours.
  • Disable the Dialogflow bot and enable it only if the current time is not within the office hours.

The office hours are in UTC. To get the UTC offset of your area go to wikipedia.org/wiki/List_of_UTC_time_offsets and copy the offset (ex. for UTC −12:00 insert -12). Only integer are accepted, if your offset is not an integer (ex. UTC -12:30 or UTC -12:45) try to search for another UTC offset due to the same country could have multiple offsets. If you don't find an integer offset manually adjust the times on the office hours table in fix the gap.


Knowledge Base Articles

Knowledge Base Articles provide instant answers to customers in order to reduce the costumer support volume. To manage the articles go to Settings > Articles. The articles support the HTML language, use it to add images, videos and other contents, below some HTML code you can use.

Name Code
Image
<img src="your-image-url" />
Video
<video controls><source src="your-video-url.mp4" type="video/mp4"></video>
YouTube and Vimeo Insert the embed code provided by YouTube or Vimeo

Where are the articles shown?

The articles can be shown in the chat dashboard by enabled them from the Settings > Chat area, or via the rich message shortcode [articles].


Multilingual and translations

Support Board is fully multilingual and provide powerful features to detect the user language on the fly.

Edit translations

To edit the languages of both chat and admin go to Settings > Translations. The front-end chat is already translated in 19+ languages.

Set chat and admin language

To set the front-end chat admin language you have two options:

  • Go to Settings > Chat and check the option Translate automatically. This feature automatically displays the chat with the language of the browser's user language.
  • Add the url parameter lang=LANGUAGE-CODE to the script that loads the chat, replace LANGUAGE-CODE with the language code you want to display. Ex. https://board.support/supportboard/js/init.js?lang=en. Go to wikipedia.org/wiki/List_of_ISO_639-1_codes for the complete languages code list (see column 639-1).
  • The WordPress version uses the language of the WordPress installation or the language of the current page/post if the website is multilingual. This feature is compatible with WPML, Polylang and the other multilingual plugins. This fature is disabled if the option Translate automatically is enabled.

Translate custom contents

You can translate almost any content you create like rich messages titles or description and the chat header text. To add the translation for a new content activate the language you want and click the button New translation.

Add a new language

To add a new language follow these steps:

  • Via FTP or a File Manager go to supportboard\resources\languages\front.
  • Duplicate(copy and paste it in the same directory) the file supportboard\resources\languages\front\source.json.
  • Rename the file with the language code of the language you want to add. Go to wikipedia.org/wiki/List_of_ISO_639-1_codes for the complete languages code list (see column 639-1).
  • Go to Settings > Translations and the new language should appear.

To add a new language for the admin area follow the same steps but change folder from front to admin. New languages are persistent and will not be lost on plugin updates.

Edit translations

To edit the languages of both chat and admin go to Settings > Translations. The front-end chat is already translated in 19+ languages.


Departments

Departments give you the power to distribute Tickets and assign Agents into Departments. For example you can create a Department called "Sales" and assign suitable tickets to it. To start using Department follow these steps:

  • Go to Settings > Various and add your departments. After saving reload the page.
  • Go to Users > Agents & Admins and edit an agent, you will see a new field where you can set the department of the agent.
  • Reload the page and you're done. On the Conversations area you will see on right the option to set the conversation's department.

How it works

  • An agent can access only the conversations belonging to the same department.
  • When an agent change department of a conversation and email notification is sent to all the agents assigned to the new department.
  • The general department is global and give access to all the conversations of all departments. All agents without a department are assigned to the general department.

Queue

When the queue is active at Settings > Miscellaneous > Queue the users enter in the queue when your agents' chat limit has been reached. When a user enters the queue a message with the current position in the queue and the estimated waiting time is displayed. Support Board automatically assigns the conversations to all available agents, proportionally. When an agent mark a conversation as completed by archiving it the queue is updated and a new conversation is received.

Details

  • Only online agents are counted as available agents and only online agents will receive the conversations.
  • No admins are counted, the admins will always see all the conversations.
  • Agents must archive a conversation to mark it as completed and see the next one.
  • Agents can switch between online and offline status by clicking the label of the profile popup at the bottom-left of the admin area.
  • The waiting time is in minutes and is queue count X waiting time.
  • Agents can filter and search only their conversations, but they can see all the conversations of a single user.
  • If a user in the queue goes away(ex. by closing the browser) for more than 1 minute, the conversation will be saved but once the user comes back the queue will be reset and the user will lose the previous position.

How to test the queue

  • To simulate the users and agents open the chat in multiple browsers(ex. Opera, Firefox, Brave, Chrome). Each browser can simulate two users/agents, one in normal mode, one in private mode.
  • To reset the chat and start a new user session, open the Browser Console, insert SBF.reset(), and press ENTER.

WORDPRESS

Users synchronization

To synchronize the WordPress users with the Support Board users select WordPress as Users system in the Settings > WordPress area. When active, the front-end chat automatically recognize the WordPress logged-in user and create a new Support Board user with the same details (name, surname, email and password). Also the log-in form will recognize the email and password of the WordPress users.

A WordPress user is sync with Support Board only when it star the first conversation, you can manually import all the WordPress users from Settings > WordPress.


More settings

Direct access and PWA

You can access the admin area directly without pass through WordPress by going to www.your-site.com/wp-content/plugins/supportboard/supportboard/admin.php and by log-in with your WordPress User or Agent email and password. Mind that your wp-content folder can be different. By accessing the admin directly you will also be able to use the admin as a Progressive Web App, more details here.

Get page ID

To get the ID of a page or Post Type, go to the admin area of WordPress and edit the page or Post Type, then copy the ID from the URl on your browser. Ex. http://your-site.com/wp-admin/post.php?post=11&action=edit&lang=en ID = 11.


DIALOGFLOW

Synchronization

To add a bot to Support Board you need to sync Dialogflow by clicking the button Start synchronization of the Settings > Dialogflow area and follow the instructions. To get the Project ID follow these steps:

  • Log-in to the Dialogflow console by going to dialogflow.cloud.google.com.
  • Click the gear icon on top left, near the bot name and open the settings area . If you didn't create a bot yet follow the instructions below to create your first bot.
  • Copy the Project ID .

Bot creation

All the bot creation part is made on Dialogflow. There are lot's of tutorial online that can help you creating your bot. Here some example:


Knowledge Base

Knowledge Base is a feature that gives to the bot the ability to search into documents like PDF or web page and search for an answer. To create your first Knowledge Base go to cloud.google.com/dialogflow/docs/knowledge-connectors

Get knowledge documents names

To get the knowledge document name to insert into the Support Board settings area follow these steps:

  • Log-in to the Dialogflow console by going to dialogflow.cloud.google.com.
  • Click the left menu item Knowledge then click the to the document you want to get the name.
  • Copy the last part of the URL on your browser, that's the name of the document (ex. NTY5Njg2MjIxMzYwMDQ0NDQxNg).

Information

Dialogflow response

The full Dialogflow Json response is automatically saved in the database, table sb_messages, column payload.

User attachments

The user attachments are sent to Dialogflow by appending to the message the attachments details in the following format.

                                    [name:file-name.ext,url:URL',extension:file-extension']
                                
Example:
                                    [name:archive.zip,url:https://board.support/archive.zip',extension:zip'][name:license.pdf,url:https://board.support/license.pdf',extension:pdf']
                                

Bot attachments

To allow the bot to send attachments add a Payload response and insert this JSON code:

                                    { "attachments": [["name", "YOUR-LINK"], ["name", "YOUR-LINK"], ["name", "YOUR-LINK"]]}
                                
Replace name with the name of the attachment to display and YOUR-LINK with the URL of the file. Images attachments are displayed automatically as images.

Rich messages

To allow Dialogflow to send a rich message insert the rich message shortcode into the TEXT RESPONSE field. To get the shortcodes and know how to create a rich message click here.

Rich message response

When the user interacts with rich messages, for example by clicking a button, the rich message response is sent to Dialogflow with this format: ID|type|response. ID is the rich message id, set it by adding the attribute id="your-id" to the shortcode, if no id is setted a random id will be used instead, type is the rich message type (input, select, buttons), response is the input of the user. To block Dialogflow from replying to each rich message, go to the Dialogflow Console and add a new intent with only one user expression containing ID|type and any response.

Dialogflow bot optimization

  • If the bot reply with the wrong intents go to Dialogflow Console > Bot Settings > ML Settings and set the ML CLASSIFICATION THRESHOLD to a larger number, like 0.6.

SLACK

Synchronization

To sync Slack click the button Start synchronization of the Settings > Slack area and follow the instructions.

Problems?

The Slack sync may not work or only partially work for various reasons, below the common ones.

Problem description Solution
You can receive messages on Slack but you can not send messages from slack to Support Board Navigate to www.your-site/supportboard/include/slack.php from your browser. If an 403 - Forbidden error appear you need to contact your hosting and ask them to set the correct file permissions for this file. It must be allowed to be executed freely without restrictions.
Slack sync do not work Make sure you used a public slack channel when you synchronized Slack. If not sync Slack again and use a public channel, the general channel works good.

Information

Manually archive channels

To archive a channel in Slack follow these steps:

  • Open the Slack channel you want to archive.
  • On top right click the gear icon and select addition options.
  • Click Archive this channel.

MORE SETTINGS

Progressive Web App

The admin area is a PWA, this means that you can install it on desktop, Mac or mobile devices and use it like an app. To install it just click the + icon on the top right of the URL bar of your Chrome browser . This feature require Google Chrome.

To install the PWA on WordPress you need to access the admin directly by going to:

https://www.your-site.com/wp-content/plugins/supportboard/supportboard/admin.php

Change "your-site" with the URL of your website and mind that the "wp-content" folder could use a different name.


Keyboard shortcuts

The keyboard shortcuts of the admin area work on PC and MAC and are the following:

Shortcut Description
ENTER
Confirm a dialog alert. Same action of clicking OK.
ESC
or
CANCEL
Decline a dialog alert and close it. Same action of clicking CANCEL.
CTRL + ENTER
Add a breakline to the message. Only for admin editor.

Config file

The config.php file is a special file that contains the MySQL database log-in details and other import settings. Most of the settings are generated automatically but some are optional. You can add the settings below.

Code Description
define('SB_UPLOAD_URL', 'YOUR-URL')
Change the uploads directory (Default /supportboard/uploads/). Insert a URL. Ex. https://your-site.com/myuplaods/. For this setting you need also to define the SB_UPLOAD_PATH.
define('SB_UPLOAD_PATH', 'YOUR-PATH')
Change the uploads directory path (Default /supportboard/uploads/). Insert a PATH. Ex. C:\xampp\htdocs\uploads. Find the root path of your website can be tricky, you can try to copy the path displayed in your FTP client or try to contact your hosting support.

More information

  • Welcome message is not sent to slack and the conversations with only the welcome message are archived automatically.
  • Follow-up message is sent maximum 1 time every 24h. It's sent after 15 seconds if office hours, otherwise after 5 seconds.
  • Popup message is showed permanently until the user close it, then it stay closed.
  • Users and Conversations admin area use auto pagination on scroll with 100 results limit per scroll.
  • The privacy message is not showed if the option Require registration is enabled.