Advanced Configuration
You can configure button, promo message, chat and mask default properties. These settings are useful if You want to have full control over how the widget is rendered. If You want to change only e.g. a main color or position, We recommend checking Settings section.
Example
<script>
window.initKBWebSDK = function (SDK) {
const bot = SDK.initKBChatbot({
token: "TOKEN",
chat_window: {
screen_position_bottom: "115px",
color_header_bg: "#B51B27",
color_header_text: "#fff",
},
button: {
width: "100px",
height: "100px",
color_bg: "#B51B27",
color_bg_hover: "#B1202A",
color_text: "#fff",
bot_icon: "https://cdn.kodabots.com",
},
promo_message: {
font_size: "14px",
padding: "13px",
screen_position_bottom: "130px",
max_width: "165px",
},
});
};
</script>
Default configuration
DEFAULT_CONFIG: IWebSDKConfig = {
token: "",
position: "fixed",
// Load configuration from dashboard
load_configuration: true,
show_button_on_start: true,
promo_message: {
show_animation_time: "500ms",
// triangle
show_triangle: true,
color_triangle: "#fff",
triangle_position: "bottom",
// text
text: "Porozmawiaj ze mną:)",
font_family: "Arial",
font_size: "15px",
line_height: "18px",
color_text: "#000",
// box
color_bg: "#fff",
max_width: "280px",
box_shadow: "0 12px 52px 0 rgba(0, 0, 0, 0.1)",
padding: "10px",
border_radius: "5px",
max_height: "none",
width: "auto",
height: "auto",
title_size: "10px",
message_size: "15px",
title_color: "#7F7F7F",
message_color: "#000000",
title_weight: "normal",
message_weight: "normal",
message_margin: "0 10px 10px 10px",
title_margin: "10px 10px 3px 10px",
title_font_family: "Arial",
// position
z_index: 99998,
screen_position_bottom: "80px",
screen_position_right: "20px",
// border
border: "none",
// close icon
show_close_icon: true,
closing_label_color_hover: "#c4c4c4",
closing_label_color: "#c4c4c4",
close_icon: `<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Close tooltip</title> <g id="icons/ico_16close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M12.2426407,3.75735931 C12.416207,3.93092566 12.3729574,4.26288488 12.1554953,4.54021907 L12.065864,4.64124279 L8.70639967,7.99929289 L12.065864,11.3587572 C12.3587572,11.6516504 12.4379028,12.0473785 12.2426407,12.2426407 C12.0690743,12.416207 11.7371151,12.3729574 11.4597809,12.1554953 L11.3587572,12.065864 L7.99929289,8.70639967 L4.64124279,12.065864 C4.34834957,12.3587572 3.95262146,12.4379028 3.75735931,12.2426407 C3.58379296,12.0690743 3.62704262,11.7371151 3.84450472,11.4597809 L3.93413601,11.3587572 L7.29218611,7.99929289 L3.93413601,4.64124279 C3.64124279,4.34834957 3.56209717,3.95262146 3.75735931,3.75735931 C3.93092566,3.58379296 4.26288488,3.62704262 4.54021907,3.84450472 L4.64124279,3.93413601 L7.99929289,7.29218611 L11.3587572,3.93413601 C11.6516504,3.64124279 12.0473785,3.56209717 12.2426407,3.75735931 Z" id="Combined-Shape" fill="#000000"></path> </g> </svg>`,
},
mask: {
show: true,
z_index: 99997,
bg: "rgba(0,0,0,0.3)",
},
chat_window: {
screen_position_bottom: "80px",
screen_position_right: "10px",
screen_height: "87vh",
screen_width: "21vw",
screen_max_height: "700px",
screen_border_radius: "18px",
color_header_bg: "#fff",
color_header_text: "#fff",
box_shadow: "0 12px 52px 0 rgba(0, 0, 0, 0.02)",
z_index: 99999,
bot_closing_type: "bot_icon",
loading_bg: "#fff",
timeout_loading_s: 15,
// Error
error_background: "#fff",
error_center_box_max_width: "250px",
error_icon_svg:
'<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="" d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.57818,15.42182 C32.0157534,14.8593933 31.1038797,14.8593933 30.541453,15.42182 L30.541453,15.42182 L24.0006789,21.9625941 L17.458547,15.42182 C16.8961203,14.8593933 15.9842466,14.8593933 15.42182,15.42182 C14.8593933,15.9842466 14.8593933,16.8961203 15.42182,17.458547 L15.42182,17.458547 L21.9639519,23.9993211 L15.42182,30.541453 C14.8593933,31.1038797 14.8593933,32.0157534 15.42182,32.57818 C15.9842466,33.1406067 16.8961203,33.1406067 17.458547,32.57818 L17.458547,32.57818 L24.0006789,26.0360481 L30.541453,32.57818 C31.1038797,33.1406067 32.0157534,33.1406067 32.57818,32.57818 C33.1406067,32.0157534 33.1406067,31.1038797 32.57818,30.541453 L32.57818,30.541453 L26.0374059,23.9993211 L32.57818,17.458547 C33.1406067,16.8961203 33.1406067,15.9842466 32.57818,15.42182 Z"></path></svg>',
error_icon_color: "#f56c6c",
error_icon_margin_bottom: "10px",
error_headline_font_size: "22px",
error_headline_font_family: "inherit",
error_headline_font_weight: "600",
error_headline_margin_bottom: "20px",
error_headline_color: "#f56c6c",
error_headline_line_height: "1",
error_text_font_size: "13px",
error_text_font_family: "inherit",
error_text_font_weight: "400",
error_text_margin_bottom: "20px",
error_text_color: "#000",
error_text_line_height: "1",
error_button_bg: "#000",
error_button_font_size: "13px",
error_button_font_family: "inherit",
error_button_font_weight: "600",
error_button_color: "#fff",
error_button_border_radius: "10px",
error_button_padding: "10px 15px",
error_button_border: "none",
error_button_line_height: "1",
error_button_hover_color: "#fff",
error_button_hover_bg: "#000",
error_button_hover_border: "none",
},
button: {
width: "60px",
height: "60px",
screen_position_bottom: "10px",
screen_position_right: "10px",
color_bg_hover: "#000",
color_bg: "#1C365E",
color_text_hover: "#fff",
color_text: "#fff",
icon_color: "#ffffff",
border_radius: "50%",
box_shadow:
"0 2.1px 1.3px rgba(0, 0, 0, 0.044), 0 5.9px 4.2px rgba(0, 0, 0, 0.054), 0 12.6px 9.5px rgba(0, 0, 0, 0.061), 0 25px 20px rgba(0, 0, 0, 0.1);",
label: "Bot",
bot_icon:
'<svg height="30" width="30" viewBox="0 0 430.117 430.118"><path d="M251.808 171.704c0-8.623 6.926-15.61 15.485-15.61 8.536 0 15.467 6.987 15.467 15.61 0 8.62-6.93 15.61-15.467 15.61-8.56-.003-15.485-6.994-15.485-15.61zM203.64 38.734h-.127V60.13h19.64V39.36c6.757-3.426 11.442-10.398 11.442-18.547C234.595 9.315 225.363 0 213.96 0c-11.4 0-20.64 9.315-20.64 20.813-.005 7.693 4.172 14.323 10.32 17.92zM160.67 187.31c8.54 0 15.47-6.99 15.47-15.613 0-8.62-6.932-15.607-15.47-15.607-8.56 0-15.485 6.987-15.485 15.607 0 8.623 6.926 15.614 15.485 15.614zM213.96 430.12c23.296 0 43.098-14.943 50.616-35.843H163.34c7.52 20.9 27.317 35.843 50.62 35.843zM52.57 366.702c0-8.26 4.807-15.336 11.724-18.696V259.51c0-17.456 13.476-31.71 30.513-32.84v-42.824s4.145-78.05 68.534-102.328c19.127-7.208 36.59-10.123 51.72-10.67 15.14.547 32.603 3.462 51.71 10.666 64.4 24.278 68.55 102.328 68.55 102.328v42.82c17.026 1.135 30.505 15.393 30.505 32.843v88.502c6.916 3.36 11.724 10.44 11.724 18.696 0 11.49-9.242 20.806-20.64 20.806-11.396 0-20.637-9.316-20.637-20.807 0-8.26 4.812-15.336 11.714-18.696v-59.16c-3.836 1.98-8.14 3.174-12.662 3.482v20.56c.117 1.663.252 3.31.252 5.014 0 1.802-.116 3.584-.252 5.367v.477h-.022c-2.75 34.257-29.328 61.7-63.016 65.442l.028.466H157.795l.038-.467c-33.687-3.744-60.26-31.187-63.008-65.443h-.02v-.476c-.127-1.782-.25-3.564-.25-5.366 0-1.7.127-3.35.25-5.013v-20.558c-4.538-.312-8.84-1.498-12.677-3.486v59.17c6.913 3.36 11.723 10.436 11.723 18.687 0 11.5-9.24 20.81-20.643 20.81-11.393 0-20.64-9.31-20.64-20.81zm196.932-108.846c0-5.525-4.443-10.016-9.932-10.016-5.498 0-9.94 4.485-9.94 10.016 0 5.535 4.442 10.025 9.94 10.025 5.49 0 9.932-4.49 9.932-10.024zm24.455 0c0-5.525-4.443-10.016-9.932-10.016s-9.94 4.485-9.94 10.016c0 5.535 4.452 10.025 9.94 10.025s9.932-4.49 9.932-10.024zm24.465 0c0-5.525-4.443-10.016-9.932-10.016-5.498 0-9.94 4.485-9.94 10.016 0 5.535 4.442 10.025 9.94 10.025 5.49 0 9.932-4.49 9.932-10.024zm-166.997-83.26c0 26.59 20.64 28.33 20.64 28.33 7.183 2.288 22.362 1.152 29.23 0 6.32-1.077 29.515-3.098 33.208-3.427.14.013.364.037.55.045.197-.01.417-.032.547-.046 3.697.323 26.883 2.35 33.21 3.425 6.88 1.153 22.05 2.29 29.236 0 0 0 20.633-1.734 20.633-28.33 0 0 0-29.486-20.634-47.408-20.013-17.382-50.092-21.153-61.896-21.377v-.02c-.168 0-.373.015-.55.015-.173 0-.388-.014-.547-.014-.168 0-.378.015-.55.015-.176 0-.386-.014-.55-.014v.02c-11.79.224-41.88 3.995-61.89 21.377-20.638 17.922-20.638 47.408-20.638 47.408z"/></svg>',
close_icon: `<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Close tooltip</title>
<g id="icons/ico_16close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M12.2426407,3.75735931 C12.416207,3.93092566 12.3729574,4.26288488 12.1554953,4.54021907 L12.065864,4.64124279 L8.70639967,7.99929289 L12.065864,11.3587572 C12.3587572,11.6516504 12.4379028,12.0473785 12.2426407,12.2426407 C12.0690743,12.416207 11.7371151,12.3729574 11.4597809,12.1554953 L11.3587572,12.065864 L7.99929289,8.70639967 L4.64124279,12.065864 C4.34834957,12.3587572 3.95262146,12.4379028 3.75735931,12.2426407 C3.58379296,12.0690743 3.62704262,11.7371151 3.84450472,11.4597809 L3.93413601,11.3587572 L7.29218611,7.99929289 L3.93413601,4.64124279 C3.64124279,4.34834957 3.56209717,3.95262146 3.75735931,3.75735931 C3.93092566,3.58379296 4.26288488,3.62704262 4.54021907,3.84450472 L4.64124279,3.93413601 L7.99929289,7.29218611 L11.3587572,3.93413601 C11.6516504,3.64124279 12.0473785,3.56209717 12.2426407,3.75735931 Z" id="Combined-Shape" fill="#fff"></path>
</g>
</svg>`,
z_index: 99998,
color_close_icon: "white",
size_close_icon: "16px",
bot_button_avatar_url: "",
show_indicator: false,
indicator_size: "20px",
indicator_position_left: "37px",
indicator_position_top: "36px",
indicator_color: "#69c85e",
indicator_border: "1px solid white",
},
widget_automation_config: [],
features: {
bot_type: "default",
voice_bot: false,
voice_bot_auto_listening: true,
voice_bot_streaming: false,
sending_file_support: true,
sending_large_files_support: true,
persistent_menu: true,
support_emojis: false,
remember_user_session: true,
attachments_links: true,
show_bot_name_in_conversation: true,
show_user_name_in_conversation: true,
show_bot_message_timestamp_in_conversation: true,
show_user_message_timestamp_in_conversation: true,
show_block_after_inactivity: false,
privacy_policy: true,
privacy_policy_chat: false,
anonymize_messages_to_moderator: false,
anonymize_email: false,
anonymize_phone_number: false,
anonymize_custom: [],
show_agent_name: true,
},
header_chat_settings: {
chatbot_status: true,
clear_conversation_option: true,
feedback: false,
show_header_avatar: false,
show_header_bot_name: false,
show_header_bot_description: false,
},
ui_settings: {
main_color_ui: "#000",
font_size: "16px",
},
get_started_screen_settings: {
getting_started_screen: true,
},
initialize_chat_settings: {
auto_open_chat_window: false,
auto_open_chat_window_once: true,
},
minimalized_widget_settings: {
widget_position: "right-bottom",
show_promo_message: true,
},
user_settings: {
default_locale: "pl_PL",
},
bot_settings: {
bot_avatar_url: "",
},
custom_css: "",
locales: {
pl_PL: {
error_initialize_headline: "Ups, wystąpił błąd",
error_initialize_text: "Coś poszło nie tak, naciśnij przycisk aby odświeżyć",
error_initialize_refresh: "Odśwież",
},
en_GB: {
error_initialize_headline: "Oops, there was an error",
error_initialize_text: "Something went wrong, press the button to refresh",
error_initialize_refresh: "Refresh",
},
},
};