Customisation

Customising the SDK

The SDK can be configured in a variety of ways to fit in seamlessly with the overall experience of the parent application.

These settings can be configured in the Business Manager section of the Bot Builder.
Bot Builder → Your Business → Partner Specific Settings → SDK Configuration

Glossary

primary-color
font-size
typography
widget-positioning
custom-button
custom-css
mode
enable-typing-suggestions
enable-user-feedback
bot-type
header-text
composer-placeholder
chat-bubble-text-desktop
chat-bubble-text-mobile
user-feedback-tags
user-feedback-questions
hide-composer
ignore-storage
no-cross
no-chat-bubble
no-header
default-language
voice-bot-initial-input

UI Settings

Settings that primarily effect the look and feel of the SDK.

`primary-color`

The primary colour used throughout the SDK. This should ideally be the same as your brand's primary colour.

default: #00000

`font-size`

The base font size used throughout the SDK. It is recommended to leave this unchanged.

default: 16px

`typography`

The font family used throughout the SDK. It must be a google font. You can see available fonts here: https://fonts.google.com/

default: Roboto

`widget-positioning`

The portion of the window where the SDK is rendered (along with the Let's chat with us button).

Possible Values:

bottom-left: Places the SDK on the bottom left part of the page
bottom-right: Places the SDK on the bottom right part of the page
center: Places the SDK in the centre of the page.

default: Bottom Left

`custom-button`

Whether to hide the main chat button or not. Set this to true if using your own custom button implementation. When set to true hides the default button.

default: false

`custom-css`

A custom css file can be injected to the XDK, which will allow to modify the styles of it. This parameter takes a path of the CSS file, which can either be relative or absolute.

example: /overrides.css

.header, .minimized-view, .composer, .composer > textarea {
  background-color : black !important;
}

.header, .minimized-view, .composer > textarea {
  color: white !important;
}

.taskbox-body {
  border-radius : 0 !important;
}

.taskbox-body .taskbox-tab {
  width : 100px !important;
}

.taskbox-body .taskbox-tasks>.task:hover {
  background-color: beige !important;
}

!important flag is required to invoke overriding behaviour

then use the file as below

window.haptikInitSettings = {
  ...
  "custom-css": "./overrides.css",
  ...
};

An example CSS is available at https://tinyurl.com/ybazgbq4 for you to get started

Please note: adding a web URL for custom-css will add an extra delay for rendering the chat window. The delay is entirely dependent on how fast it is served.

List of CSS selectors

For chat icon

chaticon image

CSS selectors	Usage
`.minimized-view`	For chat icon wrapper
`.minimized-view-icon`	For chat icon
`.minimized-view-text`	For chat icon text
`.minimized-view-unread-count`	For chat icon unread notification circle
`.minimized-view-cross-icon`	For cross chat icon

For task-box

taskbox image

CSS selectors	Usage
`.taskbox-body`	For task-box wrapper
`.taskbox-tab-wrapper`	For task-box top handler
`.taskbox-tasks`	For task-box list
`.taskbox-tasks > task`	For task-box list item

For composer

composer image

CSS selectors	Usage
`.composer`	For composer wrapper
`.composer-icon`	For composer icon
`.composer-icon.left`	For left composer icon
`.composer-icon.right`	For right composer icon
`.composer-text-area`	For composer text area

For message window

message section image

CSS selectors	Usage
`.extended-view`	For chat window
`.header`	For chat window header wrapper
`.header-top`	For chat window header top bar
`.header-promo`	For chat window header expanded view
`.message-section-messages`	For message section - wrapper
`.timeline-message`	For timestamp message
`.message-section-message-row`	For message row containing messages
`.message-section-message-row.from-user`	For user messages
`.message-section-message-row.from-business`	For bot messages
`.fixed-bottom-area`	For transparent area at the bottom of message section

For finer control, use browser's debug tool to find DOM selectors and use the same.

`mode`

This setting governs the initial view of the SDK. Supporting use cases where the SDK should always be open.

Possible Values:

default: Shows a default Let's Chat with us button
fsm: Loads with the chat window open by default without a cross button

default: Default

Feature Settings

Settings that primarily disable or enable features in the SDK.

`enable-typing-suggestions`

Enables typing suggestions for the bot. Typing suggestions are autocomplete suggestions that show up for users when they type. This gives the user some context around the capabilities of the bot.

default: false

`enable-user-feedback`

Enables per message user feedback for the bot. Adds feedback icons to all bot responses to freeform user input in order to collect feedback. It's a 2-stage process where the user can quickly give a thumbs-up/thumbs-down. Once done, the user can then also optionally give more detailed feedback in the form of tags and a freeform comment.

default: false

`bot-type`

The SDK supports both voice and text base conversations. This setting can set that accordingly.

Possible Values:

TEXT: A text based conversational interface where the user is expected to use the keyboard to send messages.
VOICE: A voice based conversational interface where the user can also send messages using voice. The bot messages are spoken out aloud.

default: TEXT

Text Settings

Settings that primarily alter the text/content of the SDK

`header-text`

The text that's displayed on the chat header and the intro screen for first time users.

default: Haptik

`composer-placeholder`

The placeholder text for the composer (typing area). This is the text that's shown in the typing area when it's empty

default: Type here...

`chat-bubble-text-desktop`

The chat bubble text on desktop browsers. Set it to _NONE_ if you don't want to show any text and just the chat icon.

default: Chat with Us

`chat-bubble-text-mobile`

The chat bubble text on mobile browsers. Set it to _NONE_ if you don't want to show any text and just the chat icon.

default: Chat with Us

`user-feedback-tags`

An object containing textual copies of the tags to show when showing the per usage message feedback. Note: User feedback needs to be enabled

Object Structure + Default

    'user-feedback-tags': {
        // tags to show when feedback is positive
      // <array of strings>  
        'positive': [
            'Seemed human', 
            'Easy to understand',
            'It was relevant',
            'That was fast'
        ],
        // tags to show when feedback is negative
      // <array of strings>
        'negative': [
            'Unrelated response', 
            'Delayed response', 
            'Repetitive response',
            'Unhelpful message'
        ]
    }

`user-feedback-questions`

An object containing textual copies of the questions to show when showing the per usage message feedback. Note: User feedback needs to be enabled

Object Structure + Default

  'user-feedback-questions': {
        // when feedback is positive
        'positive': 'Yay! What did you like?',
    
        // when feedback is negative
        'negative': 'Sorry about that. What went wrong?'
    }

Disable Settings

Some features/elements can be disabled and turned off. These can controlled using the following settings.

`hide-composer`

Hides the composer so that the user is not given the option to type anything. This is useful when building actionable and highly directed bots.

default: false

`ignore-storage`

Disables the storage so that a new user is created every time the user comes back. No messages/user information is stored in local storage. Essentially, every user is treated like a first-time user.

default: false

`no-cross`

Hides the cross button so that user is unable to close the chat window. This is useful when building experiences with custom chat buttons and other customised UI elements.

default: false

`no-chat-bubble`

Hides the chat bubble. The SDK then needs to be opened and controlled programmatically.

default: false

`no-header`

Hides the chat window header. This is useful when integrating inside native apps and webviews where there's already a header present outside the webview.

default: false

Misc Settings

Some settings that don't necessarily fall in the above category buckets

`default-language`

Sets the default language for a multi-language bot. This is the first language the user will see. The user can always then change the language using the language dropdown in the chat window header

default: en

`voice-bot-initial-input`

The default state of the voice bot. Should it by default have the text composer or the voice composer?

Possible Values:

TEXT: Show the text composer by default
VOICE: Show the voice composer by default

default: VOICE

Haptik Docs

Advanced

Support and Compatibility

Examples

Customising the SDK

Glossary

UI Settings

`primary-color`

`font-size`

`typography`

`widget-positioning`

`custom-button`

`custom-css`

List of CSS selectors

For chat icon

For task-box

For composer

For message window

`mode`

Feature Settings

`enable-typing-suggestions`

`enable-user-feedback`

`bot-type`

Text Settings

`header-text`

`composer-placeholder`

`chat-bubble-text-desktop`

`chat-bubble-text-mobile`

`user-feedback-tags`

`user-feedback-questions`

Disable Settings

`hide-composer`

`ignore-storage`

`no-cross`

`no-chat-bubble`

`no-header`

Misc Settings

`default-language`

`voice-bot-initial-input`