CIA Wrapper Guide

About

This support page is for admin users of the Talkative CDN.

For adding Talkative to websites, two things must be done:

  1. Configuring Talkative scripts within the CDN, as documented on this page.
  2. Sending clients instructions for including the script & invoking chat from the Talkative API. Please read/share this guide for this aspect: https://support.talkative.uk/technical/cia-chat-scripts-guide

Complete Script File - Example

This is an example of a completed file.

Below, the file is broken into sections for clarity and to explain each section.

// Talkative script version.
var version = '1.11.0';

var settings = {
    /* ### MANDATORY ### */
    // This will not have to change, it will be set to the Company UUID.
    'company-uuid': '1234d0a0-00a0-00ad-0a0a-00a000000000',
    // Queue UUID will change based on which customer / queue you want to target.
    'queue-uuid': '1234d0a0-00a0-00ad-0a0a-00a000000000',

    /* ### OPTIONAL ### */
    // (Recommended) This is the primary colour used for the UI, value is RGB.
    'primary-color': '195,0,47',
    // Show chat as an option in the Talkative UI.
    ':chat': true,
    // API features should be included if you expect the API to be used to start a feature,
    // list all features you expect to be used.
    ':api-features': '["chat"]',
    ':collect-data': '{chat:["name"]}',
    ':content-strings': '{ mainTitle: "Welcome to Live Chat", options: { description: "Click to talk with us!"}}',
    ':ga': true,
};

/* ##### Insert Settings and Scripts ##### */
var talkativeAppElement = document.createElement('talkative-engage');
talkativeAppElement.id = 'talkative-engage';
var attributeKeys = Object.keys(settings)
for (var i = 0; i < attributeKeys.length; i++) {
    talkativeAppElement.setAttribute(attributeKeys[i], settings[attributeKeys[i]]);
}
document.body.appendChild(talkativeAppElement);

var src = 'https://files.talkative.uk/'+version+'/';

var faCss = document.createElement('link');
faCss.href = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
faCss.type = 'text/css';
faCss.rel = 'stylesheet';
document.head.appendChild(faCss);

var css = document.createElement('link');
css.href = src + 'talkative-engage.css.gz';
css.type = 'text/css';
css.rel = 'stylesheet';
document.head.appendChild(css);

// ### REQUIRED ONLY FOR CUSTOM CSS ###
// var customCss = document.createElement('link');
// customCss.href = src + 'styles/ns.css';
// customCss.type = 'text/css';
// customCss.rel = 'stylesheet';
// document.head.appendChild(customCss);

var script = document.createElement('script');
script.src = src + 'talkative-engage.js.gz';
document.body.appendChild(script);

Script Settings

Version Number

This is the version number of the script. Normally this will not require updating, but may be required for major updates, or for client-specific changes, e.g. feature enhancement for a specific client. Only the version number itself will need to be changed, e.g. 1.11.0

// Talkative script version.
var version = '1.11.0';

UUIDs

var settings = {
    /* ### MANDATORY ### */
    'company-uuid': '1234d0a0-00a0-00ad-0a0a-00a000000000',
    // Queue UUID will change based on which customer / queue you want to target.
    'queue-uuid': '1234d0a0-00a0-00ad-0a0a-00a000000000',

company-uuid is the ID of the organisation. For fulfilled chats, this will be the same uuid for each client.

queue-uuid is the ID of the queue. This will be unique for each client. This can be found within https://engage.talkative.uk/queues

Functionality

    'primary-color': '195,0,47',
    // Show chat as an option in the Talkative UI.
    ':chat': true,
    ':api-features': '["chat"]',
    ':collect-data': '{chat:["name"]}',
    ':content-strings': '{ mainTitle: "Welcome to Live Chat", options: { description: "Click to talk with us!"}}',
    ':ga': true,
};

primary-color is the primary UI colour, with values in RGB.

':chat': true, is included only if the Talkative UI needs to be visible. Chat can still be used via the API if this is not included. There is no need to include ':chat': false, since it defaults to false - it can simply be removed if required.

':api-features': '["chat"]', this allows the client to start the chat via the API. Should be included by default.

':collect-data': '{chat:["name"]}', this asks the end-user for their name before the chat starts. Should be included by default.

':content-strings': should be included if you wish to change the default text. Further options for changing the text can be found here: https://support.talkative.uk/technical/adding-scripts#content-strings

':ga': true, allows Talkative to be tracked in Google Analytics. Should be included by default.

Custom CSS

Most clients will use the default Talkative CSS. For these clients, the following code can be commented out.

However, if the client has a custom CSS file, the code should be un-commented, and the file name should be included in this section below that states custom-example.css

// ### REQUIRED ONLY FOR CUSTOM CSS ###
// var customCss = document.createElement('link');
// customCss.href = src + 'styles/custom-example.css';
// customCss.type = 'text/css';
// customCss.rel = 'stylesheet';
// document.head.appendChild(customCss);

Client Script

After changes have been made, please refresh the CDN, then send the client the script in the following format:

<script src="https://cdn.callitautomotive.com/Talkative/Example_Company.js"></script>

It is also advisable to provide the client with this guide: https://support.talkative.uk/technical/cia-chat-scripts-guide

Testing

It is advisable that the script is tested before sending to a client, this can be done by adding to a website page.

Last updated on 10th Dec 2018