Haptik Docs

Haptik Docs

  • Tools
  • Integrations

›Advanced

  • Quick Start
  • Authentication
  • Advanced

    • Launch Message
    • Custom Button
    • SDK Methods
    • Customisation

    Support and Compatibility

    • Browser Support
    • Native Support

    Examples

    • Example: Always Open
    • Example: Multi Language

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
  • privacy-policy-url
  • 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
  • initialize-language
  • no-cross
  • no-chat-bubble
  • no-header
  • 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

privacy-policy-url

If GDPR is enabled, you can add a URL to your Privacy Policy page through init settings. Users will be redirected to this URL when they click on the link in the GDPR view. If not provided users will be redirected to Haptik's privacy policy page.

window.haptikInitSettings = {
  ...
  "privacy-policy-url": "URL_TO_YOUR_PRIVACY_POLICY_PAGE",
  ...
};

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 selectorsUsage
.minimized-viewFor chat icon wrapper
.minimized-view-iconFor chat icon
.minimized-view-textFor chat icon text
.minimized-view-unread-countFor chat icon unread notification circle
.minimized-view-cross-iconFor cross chat icon
For task-box

taskbox image

CSS selectorsUsage
.taskbox-bodyFor task-box wrapper
.taskbox-tab-wrapperFor task-box top handler
.taskbox-tasksFor task-box list
.taskbox-tasks > taskFor task-box list item
For composer

composer image

CSS selectorsUsage
.composerFor composer wrapper
.composer-iconFor composer icon
.composer-icon.leftFor left composer icon
.composer-icon.rightFor right composer icon
.composer-text-areaFor composer text area
For message window

message section image

CSS selectorsUsage
.extended-viewFor chat window
.headerFor chat window header wrapper
.header-topFor chat window header top bar
.header-promoFor chat window header expanded view
.message-section-messagesFor message section - wrapper
.timeline-messageFor timestamp message
.message-section-message-rowFor message row containing messages
.message-section-message-row.from-userFor user messages
.message-section-message-row.from-businessFor bot messages
.fixed-bottom-areaFor 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

initialize-language

Code of language you want to open bot with. For eg en, hi. (Optional). We support ISO_639-1 language codes.

default: en

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

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

Last updated on 4/16/2021
← SDK MethodsBrowser Support →
  • Customising the SDK
  • Glossary
  • UI Settings
    • primary-color
    • font-size
    • typography
    • widget-positioning
    • custom-button
    • privacy-policy-url
    • custom-css
    • 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
    • initialize-language
    • no-cross
    • no-chat-bubble
    • no-header
  • Misc Settings
    • voice-bot-initial-input
Haptik Inc.
Tools
Conversation StudioSmart Agent ChatIntelligent Analytics
Integrations
iOS SDKAndroid SDKWeb SDKWhatsAppFacebookBot API
Others
HSLSLAExternal Agent Chat Tool
Copyright © 2021 Haptik Inc.