Documentation - PHP

Support Board PHP documentation

Installation

To install the plugin for the first time follow the instructions below.

  • Download the package from Codecanyon and extract the supportboard folder into your website.
  • With your browser open the page supportboard/php/admin.php and follow the instructions.
  • Login with the accesses you just created, you can login as super admin or as agent.
  • JQuery library is required, you can load it with the script .
  • To show the chat include the script <script id="sb-php-init" src="http://yoursite.com/supportboard/php/sb.php"></script> and replace the link with your plugin url.
  • To show the desk include the script <script id="sb-php-init" src="http://yoursite.com/supportboard/php/sb.php?type=board"></script> and replace the link with your plugin url.

Problems with the installation?

  • Verify that the plugin on your website is inside the folder supportboard.
  • Verify to include the full absolute URL to load the script. Use <script id="sb-php-init" src="http://yoursite.com/supportboard/php/sb.php"></script> not <script id="sb-php-init" src=" supportboard/php/sb.php"></script>.

Admin url

supportboard/php/admin.php

Options

DescriptionUsage
Insert the support desk into a containerUse this code <script id="sb-php-init" src="http://yoursite.com/supportboard/php/sb.php?type=board&target=your-id-or-class"></script> and replace your-id-or-class with the CSS class or ID of the container you want.
LanguageUse this code <script id="sb-php-init" src="http://yoursite.com/supportboard/php/sb.php?lang=LAN_CODE"></script> and replace LAN_CODE with the language code you want. Go to translations section for more details

Settings

To access the settings open the following file.
supportboard/php/config.php
SettingValueDescription
hostAddressAddress of your MySQL database, it must be already created
usernameStringUsername of your MySQL database
passwordStringPassword of your MySQL database
dbStringMySQL database name

SettingValueDescription
color-mainHex or RGBA colorsThe main color of the chat or desk
color-secondaryHex or RGBA colorsThe secondary color of the chat or desk
font-disabletrue | false (default false)For performance reasons you can disable the Google font loaded by the plugin and save about 150KB
rtltrue | false (default false)Active the Right-To-Left (RTL) layout
desk-logintrue | false (default true)Enable or disable mandatory login for desk mode
auto-multilingualtrue | false (default false)If active the chat or desk is translated automatically based on user's browser language
agent-subtitleStringThe text that will appear under the agents name
user-extra-1StringAdd extra fields to the registration form by set their names
user-extra-2StringAdd extra fields to the registration form by set their names
user-extra-3StringAdd extra fields to the registration form by set their names
user-extra-4StringAdd extra fields to the registration form by set their names
user-emailtrue | false (default true)User must insert the email. This field is not showed for email username type
username-typeemail | username (default email)Choose what the users must insert as username
user-imgtrue | false (default true)Show the profile image to the conversation and allow the user to set their profile image on registration form
scrollbox-activetrue | false (default false)Active the scroll box *only for desk
scrollbox-heightfullscreen | integerThe box height, fullscreen set the same height of user browser window *only for desk
scrollbox-offsetinteger (default 0)Adjust the fullscreen height *only for desk and fullscreen height
scrollbox-optionsoption:value,option:value ...Options list can be found at rocha.la/jQuery-slimScroll
hide-message-timetrue | false (default false)Hide date and time of the messages
widthinteger (default 100%)Set the width of the support panel
notify-agent-emailtrue | false (default true)Send a email to the agent everytime a user send a new message. If the ticket is from a new user the email is sent to all the agents otherwise is sent only to the last agent of the conversation. A maximum of 1 email every 1 hour is sent to the agent
notify-user-emailtrue | false (default true)Send a email to the user when the agent reply. A maximum of 1 email every 1 hour is sent to the user
push-notificationsall | users | agents (default all)Show push notifications to users and agents when a new message is received
flash-notificationstrue | false (default true)Make browser tab flash a notification to users only when a new message is received
flash-notifications-textStringText of the flash message
chat-visibilityall | logged (default all)Choose if you want to show the chat the everyone or only to logged users
hide-chat-timetrue | false (default true)Hide date and time of the messages
chat-soundtrue | false (default true)Play a sound notification when the user receive a new message
chat-avatarstrue | false (default true)Show the profile image of the agents on chat
welcome-activetrue | false (default false)Write an automatic message to new users. The message is sent only to the new guest users.
welcome-alwaystrue | false (default false)Show the message every the user visit the page, if not active the message is showed only the first itme
welcome-msgStringText of the welcome message
welcome-imglinkImage of the agent associated to the welcome message
welcome-closedtrue | false (default false)Set to false to open the chat automatically
follow-activetrue | false (default true)Write a message to guests users if no agents reply within 15 seconds. The message ask the user email and contain Facebook Messenger and Whatsapp Web links. You can send manually this message by type the command #follow.
follow-msgStringText of the follow up message
follow-fblinkLink to Messanger or Facebook page
follow-walinkLink to WhatsApp web
chat-titleStringThe chat title, this text will be replaced by the agent name when the first reply is sent
chat-headerStringWrite any text you want, this text will be replaced by the agent name when the first reply is sent
chat-header-typeagents | brand (default agents)Set the chat header design.
chat-brand-imglinkShow a custom image on chat header. *only for brand hader type.
chat-header-imglinkShow a custom background image on chat header.
chat-header-avatarstrue | false (default true)Show the profile image of the agents on chat header. This content will be replaced by the agent name when the first reply is sent
chat-iconlinkChange the chat button image
slack-activetrue | false (default false)Active the Slack integration, go to Admin > Settings and click Start Slack synchronization button, more details below
slack-tokenStringYou will get this code by complete the Slack synchronization of Admin > Settings
slack-channelStringYou will get this code by complete the Slack synchronization of Admin > Settings
bot-activetrue | false (default false)Active the chat bot of Dialogflow, more details below
bot-tokenStringInsert the developer access token of your Dialogflow agent
bot-lanString (languages code list below)Set the language of the main Dialogflow bot
bot-nameStringName of the bot agent
bot-imglinkImage of the bot agent

SettingValueDescription
hostAddressAddress of your email server
usernameStringUsername of your email account
passwordStringPassword of your email account
portinteger (default 465)Port of your email server
email_fromStringThe sender email. can be every email but the @domain should be the same of your email account
email_subject_usersStringSubject of the emails sent to the users
email_content_usersStringContent of the emails sent to the users, can be text or HTML
email_subject_agentsStringSubject of the emails sent to the agent
email_content_agentsStringContent of the emails sent to the agent, can be text or HTML

Super admin

The super admin is the only user that can manage the agents, it is created at first plugin installation. If you lost the accesses you can create it manually by run into the sb table of your MySQL database the query INSERT INTO sb (name, value) VALUES('sb-super-admin', 'username|password'). To login as super admin go to the admin.php page of Support Board.

Agents

The super admin can add new agents from the Agents tab. Every agent can be assigned to a Slack user, in this way when you reply from Slack the user see the agent informations. You must have at least one agent.

Users

Users list can be found by click the Users tab of the admin. Agents and super admin can add new users and also edit the user's informations like profile image, username, email and etc. by click two times the information string.
Guest users are register automatically with password 123456 and username guest-NNNNN where NNNN is a random ID. The follow up message save the user email directly here.

Login and registration

The desk require always the login while the chat can be showed to everyone or only to logged users with the setting chat-visibility. If the user is not logged the login form is automatically showed. The login form allow also the registration of a new user, you can set what informations the user must insert by edit the settings user-extra-1/2/3/4, username-type, username-email, username-image.

Tickets

Tickets list can be found by click the Users tab of the admin. Users tab show all the registered users tickets while the Guests tab show only the tickets of the guest users. The conversations and the tickets list is updated in real-time. You can reply to a user ticket by click the reply button. The tickets with a left green border are active and the user is waiting your reply, these tickets are always showed on top. On bottom there are the closed tickets, they are partially hidden due usually don't require a reply.

Message editor

The text editor, for both the admin and front-end sides, support only text and automatically convert the links and the images. Any other code is converted into simple text.

Dialogflow (Api.ai)

To integrate a bot powered by Dialogflow follow these steps:

  • Go to console.dialogflow.com and register or login.
  • Click Create a new agent from the first item of the top left menu. You can load an existing ready to use bot by click Prebuilt Agents menu.
  • Click the gears icon on right of your agent name to get the access token.
  • Open the config.php file and insert the access token into the bot-token setting, set to true the bot-active setting and set the bot language on bot-lan setting. The language code can be found on the table below.
  • The bot can send attachments with the string [files name|link name|link ...] where name is the name of the attachment and link is the url of the attachment, this string can be inserted into the message text of the bot. You may need to use the Web hooks (Fulfillment) to send dynamic attachments generated in real time.
Multilingual bots
You can assign a different bot for every language by add the array value bot-token-LAN_CODE => 'TOKEN_CODE' to the array of config.php file. Replace LAN_CODE with one of the languages code of the table below, and TOKEN_CODE with the token of the bot, add as many new array values as you want, one for every language.

Bot languageBot langauge code
Englishen
Frenchfr
Germande
Japaneseja
Russianru
Dutchnl
Portuguese - Europeanpt
Ukrainianuk
Chinese - Traditional zh-tw
Chinese - Simplified zh-cn
Chinese - Hong Kongzh-hk
Spanishes
Italianit
Portuguese - Brazilianpt-br
Koreanko

Rich messages - Dialogflow

The rich messages are advanced messages sent by the bot. You can use 2 rich messages types: quick replies and buttons. To create a rich message go to Dialog flow console, add a new intent, on bottom under Response tab click ADD MESSAGE CONTENT and Custom payload. Insert the one of the codes below.

Quick replies
{"platform":"sb", "type":"quick_replies", "title":"", "text":"", "replies": ["",""]}

Buttons
{"platform":"sb", "type":"buttons", "title":"", "text":"", "replies": ["",""]}

Populate the title and text field with your contents and the replies field with the list items or buttons you want to display to the user. When the user click a button or a list item the bot receive a new message with the button or list item text.

Slack

To integrate Slack with Support Board you need to set to true the setting slack-active of the file config.php and insert the Slack token and channel into slack-token and slack-channel settings. To get these informations click the button of the Settings tab of admin page.

Localhost not receive messages, only live domains. You have unlimited* free messages. Fees may be asked only for very large amounts of messages. Every Envato purchase code can be used for 1 domain only, if you change domain the previous one will not longer by sync with Slack.

Emails

You can activate email notifications that alert the user when an agent reply and alert the agents when a user reply.
  • To enabled users notifications set to true the setting notify-user-email on config.php file.
  • To enabled agents notifications set to true the setting notify-agent-email on config.php file.
The default emails contents are the following:

Users email - subjectUsers email - contentAgents email - subjectAgents email - content
You received a response to your support request.{message}
{files}

Regards, Support Team
[Support] New support request from {user_username}{message}
{files}

This email is sent by Support Board

You can customize the subject and the content of both agents and users emails from the file config.php by edit the options email_subject_users,
email_content_users, email_subject_agents, email_content_agents.
By default you can use only text, but by settings the SMTP server connection you can use also HTML codes, and the following patterns: {message}, {files}, {user_username}. The pattern {message} is replaced automatically with the message of the user or agent, the pattern {files} with the attachments of the user or agent, the pattern {user_username} with the agent or user username.

SMTP
By default the email are sent with the PHP function mail(). You can also use a SMTP server by setting the connection informations of the file config.php, you need to set host, usernamepassword, port, email_from (should be an email with the same @domain of the SMTP server). The SMTP email service is provided by PHPMailer plugin.

Translations

Set chat or desk language
To set the chat language you can use the URL attribute lang=LAN_CODE like with this code . You need to replace LAN_CODE with one of the languages codes below.
The chat or desk can automatically detect the user's language by check the browser language of the user, to active this feature set to true the option auto-multilingual on config.php file, if the language is not found english is automatically used.

Edit or create new translations
The translations files can be found into the lang folder of the plugin and can be edit with the software Poedit, use this software also to create new translations. You can also contact us and we will create or edit the language you want for you and for free, just send us the translated strings.

Languages codes
LanguageCode
English - USAen_EN (default)
French - FRANCE fr_FR
German - GERMANY de_DE
Japanese - JAPAN ja
Russian - RUSSIAN FEDERATION ru_RU
Dutch - NETHERLANDS nl_NL
Portuguese - PORTUGAL pt_PT
Arabicar
Traditional Chinese - CHINA zh_TW
Simplified Chinese - CHINA zh_CN
Polish - POLAND pl_PL
Spanish - SPAIN es_ES
Italian - ITALY it_IT

Various

Allowed file extensions for uploading
You can edit the allowed extensions from files supportboard/php/upload.php and supportboard/include/main.js, you must update both two files.


Developers api

$_SESSION["sb-user-infos"]array("id" =>"", "img" =>"", "username" => "", "email" => "")Retrive the informations of the current logged-in user.
sb_get_settings()array("setting-name" =>"","setting-name" =>"", ...)Retrive all the settings of Support Board.
sb_register_user($id="", $img="", $username="", $psw="", $email="", $extra1="", $extra2="", $extra3="", $extra4="")"success" or a error messageRegister a new user.
sb_update_user($id="", $img="", $username="", $psw="", $email="", $extra1="", $extra2="", $extra3="", $extra4="")"success" or a error messageUpdate a existing user.
sb_ajax_logout()"success"Logout the user.
sb_is_logged_in()true or falseCheck if the user is logged-in.
sb_ajax_login(user, password)"success" or "error"Login the user with the given user and password.
sb_ajax_logout()"success"Logout the user.
sb_ajax_register(id, img, username, psw, email, extra1, extra2, extra3, extra4)"success" or "error"Register a new user.
sb_ajax_update_user(id ,img, username, psw, email, extra1, extra2, extra3, extra4)"success" or "error"Update an existing user.
sb_ajax_add_message(msg, files, time, user_id, user_img, user_name, user_type)"success" or "success-bot" or "error"Add a new message to the conversation of the current logged-in user.
sb_ajax_read_messages()JSON arrayGet the conversation of the current logged-in user.
$(".sb-chat-btn").click();--Open the chat.

The Javascript functions that require server side functions must be called via AJAX:

$.ajax({
method: "POST",
url: sb_ajax_url,
data: {
action: 'FUNCTION_NAME',
paramater: value,
paramater: value,
}
}).done(function (response) {
if (response == "success") { }
});

Replace FUNCTION_NAME with the function name of the table above and paramater: value with the parameters required by the function, sb_ajax_url must be a full URL linking to ..\plugins\supportboard\include\ajax.php.