GETTING STARTED

Installing Support Board

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

  • 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 login 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>

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.
  • JQuery 1.1+
  • PHP 7+
  • PHP SESSIONS must be enable
  • MySQL

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

  • 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 showed on all pages.

Requirements

  • Your server must allow the access of the file supportboard/include/ajax.php
  • If you have security plugins installed make sure they don't block the file supportboard/include/ajax.php
  • WordPress 3+
  • JQuery 1.1+
  • PHP 7+

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

Problems ?

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

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

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.

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 mean 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 showed and the data saved.

Rich messages


Name Shortcode Description
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.
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 complete the form of the rich message a success message is showed. The message include 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.

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 login 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 login form is showed only if the registration password field is showed.
  • The password field is always showed 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

One single email is sent when a user or agent write the first message, 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.

Create the email

To manage the emails and create the body go to Settings > Notifications. You can use text and HTML but to increase your delivery rate and reduce the risk the email goes in the spam folder only text is recommended. 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 been 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 the same country could has 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 showed?

The articles can be showed 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.

Translate the chat and the admin

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

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 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.


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 login 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.


Updates

You can not update Support Board from the Plugins page of WordPress. 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.


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 login with your WordPress 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:

  • Login 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 give 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:

  • Login 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.


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 mean 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.

Config file

The config.php file is a special file that contains the MySQL database login 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.