Change bubble size

CSS Codes AI Chatbot
1

Add this code to the Custom CSS field on the General tab of your AI Chatbot widget’s settings:

.global-styles,
.es-portal-root {
--size: 80;
--sizePx: calc(1px * var(--size));
}

.es-bubble-floating-button {
width: var(--sizePx) !important;
height: var(--sizePx) !important;
}

.es-window-container:not([style*='max-width: unset;']) {
inset: auto 20px calc(var(--sizePx) + 46px) auto;
}

[class*='ButtonBase__ButtonIcon-sc'],
[class*='ButtonBase__ButtonIcon-sc'] svg {
--icon-size: calc(1px * var(--size) / 2);
width: var(--icon-size) !important;
height: var(--icon-size) !important;
}

[class*='bubble__BadgeSlot-sc'] {
--offset: calc(1px * sqrt(pow(var(--size) / 2, 2) / 2));
transform: translate(var(--offset), calc(-1 * var(--offset)));
}
1 Like