We can add the following fields are custom. If they are not added, the Chat will show the default values.
<script src="../indigitall-web-chat.js"
charset="utf-8"
onload=
"WebChat.init({
channelKey: your_channel_key,
urlServer: 'https://{{cloud}}.chat-api.indigitall.com/web_chat'
<!--custom data-->
externalCode: 'your_external_code',
titleChat: 'your_title_chat',
botName: 'your_bot_name',
defaultUsername: 'your_default_user_name',
primaryColor: 'your_primaryColor',
backgroundChatColor: 'your_background_chat_color',
messagePlaceholder: 'your_message_place_holder',
zIndex: your_z_index,
openFileText: 'your_text_open_file'
fullscreen: boolean,
defaultChatIconResource: 'your_chat-bubble',
logLevel: WebChat.LogLevel.your_level,
infoContactTopBarTitle: 'your_title_top_bar_info_contact',
welcomeLabel:
{
title: 'your_title_wellcome_label',
body: 'your_body_wellcome_label',
icon: 'icon_wellcome_label',
backgrounColor: 'your_color_wellcome_label',
textColor: 'your_text_color_wellcome_label',
closeIcon: 'your_close_icon_wellcome_label',
closeIconBackGroundColor: 'your_backgrounColor_close_icon_wellcome_label',
delay: 'your_delay_to_show_wellcome_label',
}
clearMessages: true,
chatAutoOpenTime: 'time_to_open'
welcomeEvent: 'your_event',
welcomeMessage: 'your_custom_html',
assignTags: [int],
unassignTags: [int],
clearAllTags: boolean,
feedbackEnabled: boolean,
feedbackIconsName: [string],
chatCss:{css_object}
})">
</script>
- your_channel_key is an alphanumeric string that identifies your indigitall project.
- urlServer is the cloud server of your account (euX, amX)
The following fields are custom. If they are not added, the Chat will show the default values.
- your_external_code is a string that identifies each device.
- your_title_chat It is a string with the title that you want to be shown in the chat.
- your_bot_name is a string with the name of the bot that will be displayed above the bubble on the left side.
- your_default_user_name It is a string with the default name that the user will have and will be displayed above the user's bubble.
- your_primary_color is a string with the main color of the chat, buttons and floating icon in hexadecimal or object color.
- your_background_chat_color is a string with the chat background color in hexadecimal or object color.
- your_message_place_holder It is a string with the message that is displayed in the text field where it must be written.
- zIndex numeric indicator to position the chat on the z axis.
- your_text_open_file It is a string with the text that will be displayed in the case a file has to be downloaded.
- your_log_level indicates log you can see
- your_title_top_bar_info_contact title top bar of contact view
- wellcomeLabel show the wellcome label with the optional fields as json object.
- clearMessages is a boolean that indicate if you want to delete or clear all messages from session storage every time you open the chat
- time_to_open is an integer that indicates the seconds for the chat to open automatically. If no chatAutoOpenTime is specified, such as if you press the bubble before the specified time expires, the chat can be opened manually.
- welcomeEvent is a string to define the welcome message one time you open the chat
- welcomeMessage is a string with custom html type by user to show as first message when chat is open.
- assignTags is array strings to subscribe to a tags
- unassignTags is array strings to unsubscribe to a tags
- clearAllTags clear all tags from device memory
- feedbackEnabled enabled feedback messages
- feedbackIconsName array of event and header string from feedbacks icons
- chatCss add the css you want to change. For it, follow this part: Css Customization
Functionalities
You can check if the welcome event has been fired with this method:
let isEmitted = indigitallChat.isWelcomeEmitted();
If you want to send a message custom you can use this method:
indigitallChat.setCustomEvent("Your_event");
You can also control the action of deleting messages with this method:
indigitallChat.clearAllMessages()
Css Customization
If you want to modify any CSS within the chat, you can do so by overwriting the CSS, as is usually done on a website, or by adding objects to the "chatCss" field as explained below.
The objects are of the key-value type (value type is a string), each CSS field has its own name where they are all displayed at the end of this same page, and inside we must enter the name of the CSS and its fields, so for example, if we wanted to change the size from the main chat window, we would have to change the css by calling 'input'
<script src="../indigitall-web-chat.js"
charset="utf-8"
onload=
"WebChat.init({
channelKey: your_channel_key,
[...]
chatCss: {
'output':`
#ind-output {
overflow-y: auto;
width: 100%;
padding: 0.5em;
outline: black solid 0px;
background: transparent;
box-sizing: border-box;
overscroll-behavior: contain;
}`,
})
</script>
Remember that the entire CSS is overwritten, so if you want to change only one field, you must add all of them with their default values, which we show below:
/* Main container chat */
'chat-container': `
#ind-chat-container {
font-family: 'Nunito', sans-serif;
position: fixed;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
max-width: 100vw;
}
`,
/* Main container CSS specific to iOS devices */
'chat-container-input-ios': `
@supports (-webkit-touch-callout: none) {
/* CSS specific to iOS devices */
#ind-chat-container input {
transform: translateZ(0px);
user-select: auto;
-webkit-user-select: auto;
-webkit-appearance: none;
-webkit-transform: translateZ(0px);
box-sizing: border-box;
border: 0;
color: black;
}
}
`,
/* Main container CSS for other than iOS devices */
'chat-container-input': `
@supports not (-webkit-touch-callout: none) {
/* CSS for other than iOS devices */
#ind-chat-container input {
padding: 10px 0px 10px 10px;
box-sizing: border-box;
border: 0;
display: block;
width: 100%;
color: black;
}
}
`,
/* chat container button */
'chat-container-button':`
#ind-chat-container button {
background-color: transparent;
border: 0;
cursor: pointer;
}
`,
/* main chat window container */
'chat-window': `
#ind-chat-window {
transition-property: height, transform;
transition-duration: 0.5s;
margin-left:auto;
}
`,
/* class to show chat with custom window size */
'visible-chat-window': `
.ind-visible-chat-window {
border-radius: 10px;
display: flex;
background: rgb(246, 246, 247);
flex-direction:column;
height: 620px;
max-height: calc(var(--vhchat, 1vh) * 90);
flex-grow:100;
max-width: 320px;
padding: 0;
min-width: 250px;
color: #555;
justify-content: space-between;
-webkit-box-shadow: 3px 6px 14px 0px rgba(133,116,133,1);
-moz-box-shadow: 3px 6px 14px 0px rgba(133,116,133,1);
box-shadow: 3px 6px 14px 0px rgba(133,116,133,1);
transform-origin: 100% 100%;
}
`,
/* class to show chat on fullscreen */
'visible-chat-window-fullscreen':`
.ind-visible-chat-window-fullscreen {
display: flex;
background: rgb(246, 246, 247);
flex-direction:column;
height: 620px;
flex-grow:100;
color: #555;
justify-content: space-between;
-webkit-box-shadow: 3px 6px 14px 0px rgba(133,116,133,1);
-moz-box-shadow: 3px 6px 14px 0px rgba(133,116,133,1);
box-shadow: 3px 6px 14px 0px rgba(133,116,133,1);
transform-origin: 100% 100%;
}
`,
/* container of messages */
'output':`
#ind-output {
overflow-y: auto;
width: 100%;
height: 100%;
padding: 0.5em;
outline: black solid 0px;
background: transparent;
box-sizing: border-box;
overscroll-behavior: contain;
}
`,
/* container of input to send new message */
'chat-input-box':`
#ind-chat-input-box {
width: 100%;
height: 60px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items:center;
background-color: white;
}
`,
/* Button interactive box */
'interactive-button-box':`
.ind-interactive-button-box {
margin-top: 2px;
margin-bottom: 2px;
width: 100%;
border-radius: 6px;
}
`,
/* Two button interactive box */
'interactive-two-buttons':`
.ind-interactive-two-buttons {
display: flex;
gap: 10px;
}
`,
/* interactive button label */
'interactive-button-label':`
.ind-interactive-button-label{
text-align: center;
font-size: 16px;
margin: 0 auto;
color: #5cc5f8!important;
}
`,
/* interactive header */
'interactive-header':`
.ind-interactive-header {
margin-top: 5px;
margin-bottom: 5px;
font-size: 16px;
font-weight: bold;
}
`,
/* interactive body */
'interactive-body':`
.ind-interactive-body {
margin-bottom: 5px;
font-size: 14px;
}
`,
/* interactive footer */
'interactive-footer':`
.ind-interactive-footer {
font-size: 12px;
}
`,
/* interactive section */
'interactive-section':`
.ind-interactive-section {
margin-top:8px;
margin-bottom:8px;
display:flex;
align-items:center;
}
`,
/* interactive section conainer */
'interactive-section-container':`
.ind-interactive-section-container {
overflow-x: hidden;
overflow-y: auto;
max-height: 85%;
}
`,
/* button interactive and component container */
'button-interactive-component':`
.ind-button-interactive-div, .ind-button-component-div{
border: none;
padding: 0px !important;
text-decoration: none;
text-align:center;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
background-color: white;
}
`,
/* button component label */
'button-component-label': `
.ind-button-component-label{
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
color: #5cc5f8!important;
}
`,
/* contact section header */
'contact-section-header': `
.ind-contact-section-header {
margin-top:8px;
margin-bottom:8px;
display:flex;
align-items:center;
}
`,
/* contact section body */
'contact-section-body': `
.ind-contact-section-body {
padding:8px;
margin-top:8px;
margin-bottom:8px;
display:flex;
align-items:center
}
`,
/* contact section container */
'contact-section-container': `
.ind-contact-section-container {
overflow-x: hidden;
overflow-y: auto;
max-height: 85%;
}
`,
/* send button of input container */
#ind-send {
max-width: 55px;
outline: none;
margin-right:15px;
}
`,
/* send button icon of input container */
'send-icon': `
#ind-send-icon {
height: 32px !important;
width: 32 px !important;
}
`,
/* chat bubble */
'chat-bubble': `
#ind-chat-bubble {
margin: 0;
padding: 0;
transition: transform 0.5s;
}
`,
/* chat bublle hover */
'chat-bubble-hover': `
.ind-chat-bubble:hover{
opacity: 0;
transition: opacity 150ms cubic-bezier(0.33, 0, 0.67, 1) 50ms;
}
`,
/* message element */
'message': `
#ind-message {
width: 260px;
height: 100%;
padding-top: 17.5px;
padding-bottom: 17.5px;
padding-left: 14px;
outline: none;
padding-right: 14px;
}
`,
/* message container */
'message-box': `
.ind-message-box {
margin-top: 5px;
margin-bottom: 5px;
width: fit-content;
padding: 14px;
border-radius: 6px;
overflow-wrap: break-word;
}
`,
/* message document container */
'message-box-document': `
.ind-message-box-document {
margin-top: 5px;
margin-bottom: 5px;
width: 100%;
/* padding: 14px;
border-radius: 6px; */
}
`,
/* message container with name of user */
'message-box-own': `
.ind-message-box-own {
margin-top: 5px;
margin-bottom: 5px;
max-width: 90%;
padding: 14px;
border-radius: 6px;
overflow-wrap: break-word;
}
`,
/* message container of others than user */
'message-box-container': `
.ind-message-box-container {
margin-top:30px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
`,
/* message container of user */
'message-box-container-own': `
.ind-message-box-container-own {
margin-top:30px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
`,
/* text message */
'message-span': `
.ind-message-span {
margin: 0;
}
`,
/* text message form header */
'message-header-span': `
.ind-message-header-span {
color: #aaa;
}
`,
/* chat header container */
'chat-header': `
#ind-chat-header {
width: 100%;
padding-right:13px;
padding-left: 13px;
height: 50px;
background-color: white;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
`,
/* class of chat bubble */
'visible-chat-bubble': `
.ind-visible-chat-bubble {
height: 60px;
width: 60px;
border-radius: 50px;
flex-grow: 100;
outline: none;
-webkit-box-shadow: 3px 6px 14px 0px rgba(133,116,133,1);
-moz-box-shadow: 3px 6px 14px 0px rgba(133,116,133,1);
box-shadow: 3px 6px 14px 0px rgba(133,116,133,1);
transform:scale(1);
}
`,
/* class to hidden chat window */
'not-visible': `
.ind-not-visible {
height: 0px;
transform: scale(0);
transform-origin: 90% 10%;
position:absolute;
right: 0;
bottom: 0;
flex-grow: 0;
}
`,
/* class to hidden bubble chat */
'bubble-not-visible': `
.ind-bubble-not-visible {
transform:scale(0);
position:absolute;
height: 0px;
flex-grow: 0;
}
`,
/* welcome label container */
'bubble-square': `
.ind-bubble-square {
position: relative;
min-height: 50px;
min-width: 200px;
padding: 5px;
display:flex;
align-items:center;
background: white;
border-radius: 8px;
box-shadow: 1px 12px 33px rgba(0, 0, 0, 0.5);
}
`,
/* welcome label button container */
'welcome-label-button-div': `
.ind-welcome-label-button-div {
margin: 0;
display: inline-block;
background: rgb(107, 120, 128);
border-radius: 50px;
text-align: center;
cursor: pointer;
width: 25px;
height: 25px;
position: absolute;
top: -0px;
z-index: 1;
right: 10px;
transform: scale(1);
transition: transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 50ms;
}
`,
/* welcome label button container hover */
'welcome-label-button-div-hover': `
.ind-welcome-label-button-div:hover {
transform: scale(1.25);
}
`,
/* welcome label button close container */
welcome-label-button-close': `
.ind-welcome-label-button-close {
margin: 0
}
`,
/* welcome label title container */
'welcome-label-title': `
.ind-welcome-label-title {
font-size:1em;
font-weight: bold;
margin-right: 10px;
}
`,
/* welcome label body container */
'welcome-label-body': `
.ind-welcome-label-body {
font-size:0.8em;
margin-right: 10px;
}
`,
/* welcome label container */
'welcome-label-container': `
.ind-welcome-label-container {
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
display: flex;
justify-content: flex-start;
}
`,
/* tag message of message image template */
'img-tag-message': `
.ind-img-tag-message {
margin-top: 10px;
max-width: 100%;
}
`,
/* document template message */
'div-document': `
.ind-div-document{
background-color: #fff;
height: fit-content;
width: 100%;
cursor: pointer;
border-radius: 10px;
border:1px;
padding: 5px;
}
`,
/* preview template message */
'div-preview-files': `
.ind-div-preview-files{
max-width: 200px;
background-color: #aaa;
padding: 4px;
}
`,
/* caption document message */
'caption-document': `
.ind-caption-document{
display:flex;
flex-direction: row;
align-items: center;
cursor: pointer;
}
`,
/* bubble icon container */
'bubble-icon-div': `
.ind-bubble-icon-div {
margin: auto;
width: 32px;
height: 32px;
transform: scale(1);
transition: transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 50ms;
}
`,
/* bubble icon container hover */
'bubble-icon-div-hover': `
.ind-bubble-icon-div:hover {
transform: scale(1.25);
}
`,
/* chat icon dots animation */
'dots-animation': `
.ind-dots-animation {
opacity: 0;
position: absolute;
/* z-index: 1; */
left: 0px;
right: 0px;
bottom: 1px;
/* display: flex; */
width: 32px;
height: 32px;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
opacity: 1;
transition: opacity 150ms cubic-bezier(0.33, 0, 0.67, 1) 50ms;
}
`,
/* chat icon dots animation hover */
'dots-animation-hover': `
.ind-dots-animation:hover{
opacity: 1;
}
`,
/* chat icon dot one */
'dot-1': `
.ind-dot-1 {
transform-box: fill-box;
transform-origin: 50% 50%;
animation-timing-function: cubic-bezier(0, 0, 1, 1);
animation-name: animation-1fn2epw;
animation-duration: 1s;
animation-iteration-count: 1;
}
`,
/* chat icon dot two */
'dot-2': `
.ind-dot-2 {
transform-box: fill-box;
transform-origin: 50% 50%;
animation-timing-function: cubic-bezier(0, 0, 1, 1);
animation-name: animation-188vgt8;
animation-duration: 1s;
animation-iteration-count: 1;
}
`,
/* chat icon dot three */
'dot-3': `
.ind-dot-3 {
transform-box: fill-box;
transform-origin: 50% 50%;
animation-timing-function: cubic-bezier(0, 0, 1, 1);
animation-name: animation-11sr958;
animation-duration: 1s;
animation-iteration-count: 1;
}
`,
/* emoticon reactions container */
'emoticonFeedback': `
.ind-emoticonFeedback {
position: relative;
top: 45px;
}
`,
/* button of feedback reactions message */
'ind-like-btn': `
.ind-like-btn > a {
width: 30px;
height: 30px;
bottom: 28px;
position: absolute;
cursor: pointer;
display: flex;
border-radius: 20px;
margin: 8px -1px 0 8px;
opacity: 0.4;
&::before {
content: ".";
display: flex;
width: 20px; height: 10px;
position: absolute;
top: -10px; left: 0;
}
&:hover {
opacity: 1;
}
}
`,
/* container with reaction emoticons */
'ind-reaction-box': `
.ind-reaction-box {
position: absolute;
width: 280px; height: 40px;
background: #F0C674;
border-radius: 28px;
left: -10px; bottom: 60px;
display: none;
}
`,
/* reactions icons class */
'ind-reaction-icon': `
.ind-reaction-icon {
width: 35px; height: 35px;
display: inline-block;
border-radius: 20px;
margin-right: 8px;
/* Animation */
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
opacity: 0;
transform: translate(0, 100px) scale(0);
label {
padding: 3px 5px 3px 5px;
position: relative;
top: -24px;
border-radius: 10px;
font-size: 11px;
white-space: nowrap;
color: #FFF;
background: #333;
visibility: hidden;
}
}
`,
/* icon main feedback reactions */
'ind-feedback-icon': `
.ind-feedback-icon {
background-image: url('${likeit}');
background-size: cover;
}
`,
/* icon like feedback reactions */
'ind-like-icon': `
.ind-like-icon {
background-image: url('${likeit}');
background-size: cover;
}
`,
/* icon happy feedback reactions */
'ind-happy-icon': `
.ind-happy-icon {
background-image: url('${happy}');
background-size: cover;
}
`,
/* icon surprise feedback reactions */
'ind-surprise-icon': `
.ind-surprise-icon {
background-image: url('${surprise}');
background-size: cover;
}
`,
/* icon sad feedback reactions */
'ind-sad-icon': `
.ind-sad-icon {
background-image: url('${sad}');
background-size: cover;
}
`,
/* icon angry feedback reactions */
'ind-angry-icon': `
.ind-angry-icon {
background-image: url('${angry}');
background-size: cover;
}
`
/* emoticon reactions END */
Feedback
To implement feedback in the bot's messages, you have to add the "feedbackEnabled" flag to true, in the initial configuration, as shown in the previous section.
Initially, 5 icons come by default: like, happy, surprise, sad and angry.
Everything is customizable, as described in the previous section of "ccs customization".
For example, let's say you want to implement feedback buttons, but only two of them, a thumbs up and a thumbs down. In this case, you have to edit the parent box you should add the following in the CSS field:
<script src="../indigitall-web-chat.js"
charset="utf-8"
onload=
"WebChat.init({
channelKey: your_channel_key,
[...]
chatCss: {
'ind-happy-icon': `
.ind-care-icon {
background-image: url('your url image');
background-size: cover;
}`,
'ind-surprise-icon': `
.ind-surprise-icon {
display: none
}
`,
'ind-sad-icon': `
.ind-sad-icon {
display: none
}
`,
'ind-angry-icon': `
.ind-angry-icon {
display: none
}
`
})
</script>