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
email transcript button enabled
email transcript button disabled

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
simple rating (3 icons)
rating with comment

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
layout: widget
layout: button

Pre-chat form

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 and checkbox.
  • 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.

Form with select _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' } }];
Form with checkbox and phone number _smartsupp.requireLogin = true; // disable email _smartsupp.loginEmailControl = false; // append checkbox control to confirm something _smartsupp.loginControls = [{ xtype: 'textinput', name: 'number', label: 'Phone', required: true }, { xtype: 'checkbox', name: 'conditions', label: 'I have read and accept the Terms and conditions.', required: true }];
Default pre-chat form
Pre-chat form with select
Pre-chat form with checkbox

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 and checkbox.
  • 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.

Form with select // 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' } }];
Form with phone number // increase offline form height to show all inputs _smartsupp.offlineHeight = 450; // default value : 420 // append phone control _smartsupp.offlineControls = [{ xtype: 'textinput', name: 'number', label: 'Phone', required: true }];
Default form
Form with select
Form with number (height 450px)

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