Configurable parts
Change behavior and modify parts of chat box as forms, prompts or rating window.
Here you can see the default chat code. Enter your configuration after the line with _smartsupp.key
.
<script type="text/javascript">
var _smartsupp = _smartsupp || {};
_smartsupp.key = "YOUR_ACCOUNT_KEY";
// ...
// your configuration
// ...
window.smartsupp||(function(d) {
var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
s=d.getElementsByTagName('script')[0];c=d.createElement('script');
c.type='text/javascript';c.charset='utf-8';c.async=true;
c.src='//www.smartsuppchat.com/loader.js';s.parentNode.insertBefore(c,s);
})(document);
</script>
Note
If you don`t have Smartsupp chat code installed on your website, you should read get started tutorial.
Sub-domains integration
Smartsupp visitor is identified by unique key stored in cookies. By default chat conversation is terminated when visitor opens a sub-domain on your website. You should set main domain as cookie domain if you want chat conversations uninterrupted accross your sub-domains. Insert the cookieDomain parameter in your chat code on main domain and all subdomains where you want the chat conversation uninterrupted.
_smartsupp.cookieDomain = '.your-domain.com';
Optional email transcript
When the visitor ends the conversation a confirmation window is displayed. In this window there is by default a button to send a transcript of the chat conversation to email. You can choose not to show this button
_smartsupp.sendEmailTanscript = false; // default value : true


Rating window
After visitor ends a chat conversation, he is shown a rating window. You can add a text box where the visitor can also write a comment.
_smartsupp.ratingEnabled = true; // default value : false
_smartsupp.ratingComment = true; // default value : false


Chat box position
By default the chat box is displayed in bottom right corner of the website. You can change the default position along the bottom line or place the chat on right or left side of the website.
_smartsupp.alignX = "right"; // or "left"
_smartsupp.alignY = "side"; // default value : bottom
_smartsupp.offsetX = 20; // offset from left or right, default value : 10
_smartsupp.offsetY = 120; // offset from top by, default value : 100

Chat box design type
We supports two chat-box layouts, widget
and button
.
_smartsupp.widget = 'widget'; // shown on desktop by default
_smartsupp.widget = 'button'; // shown on mobile devices by default


Pre-chat form
When chat is online, visitor will see open chat and can write message. Pre-chat form will show right after visitor sends first message.
If you are using pre-chat form, you can customize the form fields. Default fields are name
and email
.
If you want to disable name or email set property loginNameControl
or loginEmailControl
to false.
You can add custom fields by setting property loginControls
.
All filled values are sent to dashboard and shown in "Visitor info" and "Customer info" in the right panel of the conversation window.
- We support 4 field types:
textinput
,textarea
,select
andcheckbox
. - Attribute
name
has to be defined in every field and it can contain only lowercase and uppercase letters, no spaces allowed. - Use attribute
required: true
to make the field mandatory for visitors.
_smartsupp.requireLogin = true;
// hide default name input
_smartsupp.loginNameControl = false;
// append custom controls
_smartsupp.loginControls = [{
xtype: 'select',
name: 'problem',
label: 'Reason',
required: true,
value: 'error', // pre-selected value
items: {
normal: 'Normal question',
error: 'Error report',
other: 'Something else'
}
}];
_smartsupp.requireLogin = true;
// disable email
_smartsupp.loginEmailControl = false;
// append checkbox control to confirm something
_smartsupp.loginControls = [{
xtype: 'checkbox',
name: 'conditions',
label: 'I have read and accept the Terms and conditions.',
required: true
}];


Offline form
You can customize the form fields in offline form. Default fields are name
and email
.Email is always required, name can be disabled, message is not modifiable through API.
You can add custom fields by setting property offlineControls
. All values are sent visible in email to address(es) specified in dashboard.
It's not possible to specify emails through API. If your form has more fields, scrollbar automatically appears in chat box,
but you can always set offline chat box "height" to show all fields without scrollbar.
- We support 4 field types:
textinput
,textarea
,select
andcheckbox
. - Attribute
name
has to be defined in every field and it can contain only lowercase and uppercase letters, no spaces allowed. - Use attribute
required: true
to make the field mandatory for visitors.
// name is disabled
_smartsupp.offlineNameControl = false;
// append select control
_smartsupp.offlineControls = [{
xtype: 'select',
name: 'question',
label: 'Question',
required: true,
value: 'error', // pre-selected value
items: {
normal: 'Normal question',
error: 'Error report',
other: 'Something else'
}
}];


Google Analytics integration
Smartsupp is linked with your Google Analytics (GA) automatically. Smartsupp automatically checks your site's code for GA property ID and sends data to that account. If you are using Google Tag Manager (GTM) or you don't have GA code directly inserted in your website's code, you have to link your GA account as described here.
If you have subdomains on your website and you are tracking all subdomains in one GA account, use the gaOptions parameter. You can find more info about gaOptions in Google Analytics documentation.
_smartsupp.gaKey = 'UA-XXXX-Y';
_smartsupp.gaOptions = {
'cookieDomain': 'foo.example.com',
};
With previous configuration is GA initialized like this: ga('create', KEY, OPTIONS);
.
Hide chat box on certain pages
You can hide chat box on certain pages by setting the variable hideWidget
_smartsupp.hideWidget = true; // use on pages where you want to hide chat box
_smartsupp.hideMobileWidget = true; // hide chat box on mobile devices
Mobile chat box
This API code allows you to set when to show mobile chat box.
_smartsupp.smallDeviceMinWidth = 641; // screen width in pixels when mobile chat box is shown
Advanced settings
Use this API if you want to disable text area, sounds, chat bubble or auto messages.
_smartsupp.writable = false; // disable text area and send button
_smartsupp.soundMuted = true; // disable sounds for visitors
_smartsupp.hideBanner = true; // don’t show chat bubble
_smartsupp.triggerable = false; // disables auto-messages