CUSTOM A.I CHATBOT please!

Ask the Community Customization
1

Hello, I would like to know if it is possible to connect this customized HTML layout that I created with the AI chatbot you offer, so I can embed it on my website while maintaining the visual appearance I designed.

To clarify, the HTML file I created is purely visual — it currently has no real AI personality or backend connection. What I would like is to preserve this appearance, but have it function as a real chatbot powered by your system, including the ability to customize the chatbot’s personality and responses using your tools.

For your reference, here is the HTML file I designed:
:backhand_index_pointing_right: https://www.mediafire.com/file/owh702r809wok9n/Kiuri+Chatbot.html/file

Additionally, I would like to know if it would be possible for you to implement a feature that allows users to upload or use their own HTML layout as the chatbot’s interface — so that your AI engine can adopt that custom design.

If this request involves any additional cost or technical setup, I’d sincerely appreciate it if you could let me know. I would be happy to pay for it, as long as it’s within my budget.

Thank you very much for your time and support. I look forward to your response. Have a great day!

I remain attentive to your response.
Have a great day and thank you very much for your time and kindness.

2 Likes
3

Hi there, @Abel_Navarro and welcome to the Community :waving_hand:

Unfortunately, it’s impossible to upload your own HTML design to the widget, but I guess it’s possible to replicate it through the JS code.

I see that you have 2 AI Chatbot widgets. Could you please specify the name of the widget, that should be customized this way?

1 Like
4

Hi! I want to apply this design to my assistant (previously named Yeti), but I’ll be changing their name and gender soon. Once the design is ready and replicated, I’ll update those details.

Is it possible to customize the widget this way?

Thanks in advance!

2 Likes
5

Thank you!

I’ve passed your request on to the devs and will update you once I have any news :slightly_smiling_face:

1 Like
6

Hi there, @Abel_Navarro :waving_hand:

Thank you for waiting!

Here is the solution from the devs:

.es-bubble-floating-button[aria-label='Open chatbot window'] {
  font-size: 16px !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
}

.es-bubble-floating-button[aria-label='Open chatbot window']
  [class*='ButtonBase__ButtonIcon-sc'] {
  width: 0;
  height: 0;
}

.es-bubble-floating-button[aria-label='Open chatbot window'] img {
  position: absolute;
  left: -50%;
  top: 50%;
  transform: translate(100%, -50%) scale(1.8);
  transform-origin: bottom;
}

.es-bubble-floating-button[aria-label='Open chatbot window']
  [class*='ButtonBase__Overlay-sc']::after {
  content: '¿Te ayudo en algo?';
  padding: 12px 24px;
  font-weight: 600;
}

.es-bubble-floating-button[aria-label='Open chatbot window']
  [class*='bubble__BadgeSlot-sc'] {
  transform: none;
  top: -2px;
  width: auto;
  height: auto;
  right: -2px;
  left: auto;
}

.es-window-header {
  background-color: #ffccd5;
}

.es-bubble-floating-button {
  background-color: #ffccd5 !important;
  color: #000 !important;
}

.es-interaction-field-submit-button {
  background-color: rgb(255 174 188);
}

[class*='Avatar__Background-sc'] {
  background: none;
}

.es-window-body {
  background: url(https://i.ibb.co/zW0r0YHm/fondo.webp) no-repeat center center;
  background-size: cover;
}

[class*='interaction-field__ScrollableContainer-sc'],
[class*='interaction-field__Container-sc'] {
  background: #fff0f0;
}

.es-interaction-field-text-control {
  background: #fff !important;
  border-radius: 4px;
  padding: 4px !important;
  width: calc(100% - 8px) !important;
}

.es-message-assistant .es-message-background {
  background: #fffcd4;
}

.es-message-assistant .es-message-tail {
  fill: #fffcd4;
}

.es-message-user .es-message-background {
  background: #ffcce5;
}

.es-message-user .es-message-tail {
  fill: #ffcce5;
}

.es-message-user .es-message-content-container,
.es-message-user [class*='dialog-message-content__Time-sc'] {
  color: #000;
}

Please add this code to the Custom CSS field on the General tab of your widget’s settings and let me know if you like the result :wink:

2 Likes