Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Go to Haptik Website
  • Contact Us
  • Home
  • Deployment
  • Web SDK

How to customize my website bot?

Written by Medha Anand

Updated on March 17th, 2023

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Getting Started
    Build Deploy Analyse Manage Account Bot Deactivation
  • Bot Building
    Essentials Smart Skills Steps User Messages Bot Responses Entities Connections Customisations User feedback collection Testing Whatsapp Bots NLU Bot Maintenance
  • Smart Agent Chat
    Set up Admin Settings MyChats Section (Agent Inbox) Live Traffic Section Teams Section Archives Section Analytics Plans on Smart Agent Chat
  • Conversation Design
    Design Basics Design Guides Designing for Platforms Designing WhatsApp Bots
  • Developer Guides
    Code Step Integration Static Step Integration Shopify Integration SETU Integration Exotel Integration CIBIL integration Freshdesk KMS Integration PayU Integration Zendesk Guide Integration Twilio Integration Razorpay Integration LeadSquared Integration USU(Unymira) Integration Helo(VivaConnect) Integration Salesforce KMS Integration Stripe Integration PayPal Integration CleverTap Integration Fynd Integration HubSpot Integration Magento Integration WooCommerce Integration Microsoft Dynamics 365 Integration
  • Deployment
    Web SDK WhatsApp Facebook Instagram Sunshine Conversation LINE Google Business Messages Telegram MS Teams Bot as an API iOS SDK Android SDK
  • External Agent Tool Setup
    Zendesk Chat Salesforce Service Cloud Freshchat Zoho NICE CXOne Gorgias
  • Analytics & Reporting
    Intelligent Analytics
  • Notifications
    SMS Notifications Success Measurement
  • Commerce Plus
    Catalog Integration Bot Building Guide Channel Deployments Unified ML Pipeline Documentation
  • Troubleshooting Guides
    Error Messages FAQs
  • Release Notes
+ More

Table of Contents

Customizing the SDK Warning Glossary UI Settings primary-color tablet-bg-color typography widget-positioning move-the-bot-widget custom-button privacy-policy-url 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 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 Miscellaneous Settings voice-bot-initial-input onChatWindowHide file-attachment-icon-visibility disable-bot-prompt-sound  bot-prompt-sound-url 

Customizing 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 → Account Specific Settings → SDK Configuration

Delete

Warning

Custom CSS does give you the capability to override our UI code. However, post its usage, the onus of ensuring that the overridden UI continues to be compatible with Haptik's future upgrades resides primarily with you. 

The Haptik team will always ensure that our updates do not break existing CSS overrides, however, there is always a probability that some future heavy UI changes on the SDK might cause your Custom CSS changes to be affected or at worst, break.

For such updates, we will ensure that we notify you prior to the release so that it gives you time to take necessary action if needed.

Glossary

  • primary-color
  • tablet-bg-color
  • typography
  • widget-positioning
  • move-the-bot-widget
  • custom-button
  • privacy-policy-url
  • custom-css
  • mode
  • enable-typing-suggestions
  • enable-user-feedback
  • bot-type
  • 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
  • onChatWindowHide
  • file-attachment-icon-visibility
  • disable-bot-prompt-sound
  • bot-prompt-sound-url

UI Settings

Settings primarily affect the look and feel of the SDK.

primary-color

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

default: #00000

window.haptikInitSettings = {
...
primary-color: "#00000"
...
};

tablet-bg-color

Use this setting to change the background fill color. Note that this is only for tablet mode.

default: #EDEEF4

window.haptikInitSettings = {
...
tablet-bg-color: "#00000"
...
};

typography

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

default: Roboto

window.haptikInitSettings = {
...
typography: "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 center of the page.

default: Bottom Left

window.haptikInitSettings = {
...
widget-positioning: "bottom-left"
...
};

move-the-bot-widget

If you want to adjust the bot widget on your website/store according to your preference, the below script will help you accomplish that:

<style>
.xdk-iframe{
    padding-bottom: 100px;
}
</style>

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

window.haptikInitSettings = {
...
custom-button: 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 into the XDK, which will allow modifying its styles. 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;
}

Use the file as below.

!important flag is required to invoke overriding behavior

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:

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:

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:

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:

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

Currently "mode": "fsm" is not supported on IVA with custom signup.

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

window.haptikInitSettings = {
...
enable-typing-suggestions: 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

window.haptikInitSettings = {
...
enable-user-feedback: 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

window.haptikInitSettings = {
...
bot-type: "TEXT"
...
};

Text Settings

Settings that primarily alter the text/content of the SDK

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...

window.haptikInitSettings = {
...
composer-placeholder: "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

window.haptikInitSettings = {
...
chat-bubble-text-desktop: "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

window.haptikInitSettings = {
...
chat-bubble-text-mobile: "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.re

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

window.haptikInitSettings = {
...
hide-composer: true
...
};

Delete

What would happen when the bot UI does not have a composer area and the chat has been transferred to an agent? The user would need the composer area to send messages to the agent.

  • If the composer is hidden, it will stay hidden when the chat is with the bot
  • When the chat goes to an agent, the composer becomes visible and will be available throughout the user-agent conversation
  • When the agent marks the chat as complete, the composer will be hidden again

ignore-storage

In order to store the conversation history, mark the ignore-storage parameter as false.

If ignore-storage is true the storage is disabled, i.e. a new user is created every time the user comes back and starts conversing with the bot. No messages/user information is stored in local storage. Essentially, every user is treated like a first-time user.

default: false

window.haptikInitSettings = {
...
ignore-storage: 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

window.haptikInitSettings = {
...
initialize-language: "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

window.haptikInitSettings = {
...
no-cross: false
...
};

The user will be slightly able to see the close button but they won't be able to click on the button.

no-chat-bubble

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

default: false

window.haptikInitSettings = {
...
no-chat-bubble: 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

window.haptikInitSettings = {
...
no-header: false
...
};

Miscellaneous 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

window.haptikInitSettings = {
...
voice-bot-initial-input: "VOICE"
...
};

onChatWindowHide

In case you want to be notified whenever the chat window is closed/hidden, you can pass a callback function to this parameter. This callback function will now be called every time the chat window is closed.

<script>
 const hideEventCallback = function () {
 console.log("Haptik JS SDK is now hidden.");
 }
 window.haptikInitSettings = {
 'business-id': YOUR_BUSINESS_ID,
 'client-id': YOUR_CLIENT_ID,
 'base-url': BASE_URL,
 onChatWindowHide : hideEventCallback
 }
</script>

file-attachment-icon-visibility

In case you want to manage the visibility of the file attachment icon, you can use this function.

window.haptikInitSettings = {
...
file-attachment-icon-visibility: "value_name"
...
};

You can use three types of values in the value_name field, as mentioned above:

  • only_agent (default - File attachment icon shown only when chat is in Agent chat mode)
  • always (File attachment icon shown all the time)
  • hidden (File attachment icon is never shown)
Delete

If null or undefined is set to file-attachment-icon-visibility, then too it will fall back to the default state.

disable-bot-prompt-sound 

This disables the notification sounds ideally triggered when a bot prompt messages are added to the bot.

default: false

window.haptikInitSettings = {
...
disable-bot-prompt-sound: false
...
};

bot-prompt-sound-url 

Use this setting to change the bot prompt sound. If no custom tone/sound is provided by the user, the bot loads the default tone.

default: https://toolassets.haptikapi.com/js-sdk/sound/notification_new.mp3 */

window.haptikInitSettings = {
...
bot-prompt-sound-url: https://toolassets.haptikapi.com/js-sdk/sound/notification_new.mp3 */
...
};

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • How to deploy a bot on my website?
  • What are the SDK customization methods available?
  • How to deploy a logged-in bot on my website?
  • How to set up a launch message on my website bot?

Platform

  • Conversation Studio
  • Smart Skills
  • Advanced NLU
  • Intelligent Analytics
  • Omnichannel
  • Smart Agent Chat
  • Enterprise Security
  • Integrations

Solutions

  • Conversational Commerce
  • Lead Generation
  • Customer Care
  • WhatsApp
  • Conversational IVR
  • Google Business Messages

Industries

  • Retail/ E-Commerce
  • Financial Services
  • Travel & Hospitality
  • Telecom

Knowledge

  • ROI Calculator
  • Reports & Research
  • Case Studies
  • Webinars
  • ISAT
  • Tech Blog
  • Business Blog
  • Resources
  • Haptik v/s Yellow
  • Haptik v/s Liveperson
  • Haptik v/s IBM Watson
  • Haptik v/s Verloop
  • Conversations on AI

Company

  • Why Haptik
  • About Us
  • Careers
  • News & Media
  • Awards & Recognition
  • Contact Us
  • Partnerships
  • Investor Relations

Subscribe

Sign up to recieve the latest updates

Find us on

  • Twitter-footer
  • Linkedin-footer
  • YT-footer
  • Insta-footer
  • G2-footer
  • Facebook-footer

Knowledge Base Software powered by Helpjuice

Copyright © jio Haptik Technology Limited 2021 | Data Security & Privacy Policy | GDPR

North America | Asia Pacific | Africa | enterprise@haptik.ai

Definition by Author

0
0