# CUSTOM A.I CHATBOT please!

**URL:** <https://community.elfsight.com/t/custom-a-i-chatbot-please/117447>\
**Category:** Customization\
**Tags:** ai-chatbot\
**Created:** [May 1, 2025, 6:14am UTC](https://community.elfsight.com/t/custom-a-i-chatbot-please/117447 "2025-05-01T06:14:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Abel\_Navarro](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/abel_navarro/32/61841_2.png) [@Abel\_Navarro](https://community.elfsight.com/u/Abel_Navarro)\
**Post date:** [May 1, 2025, 6:14am UTC](https://community.elfsight.com/t/custom-a-i-chatbot-please/117447/1 "2025-05-01T06:14:53Z")

</div>

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:  
👉 [https://www.mediafire.com/file/owh702r809wok9n/Kiuri+Chatbot.html/file](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.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [May 3, 2025, 3:04pm UTC](https://community.elfsight.com/t/custom-a-i-chatbot-please/117447/3 "2025-05-03T15:04:19Z")

</div>

Hi there, @Abel_Navarro and welcome to the Community 👋

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?

---

<div class="post-metadata">

**Author:** ![Abel\_Navarro](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/abel_navarro/32/61841_2.png) [@Abel\_Navarro](https://community.elfsight.com/u/Abel_Navarro)\
**Post date:** [May 6, 2025, 2:46am UTC](https://community.elfsight.com/t/custom-a-i-chatbot-please/117447/4 "2025-05-06T02:46:05Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [May 6, 2025, 11:31am UTC](https://community.elfsight.com/t/custom-a-i-chatbot-please/117447/5 "2025-05-06T11:31:17Z")

</div>

Thank you!

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [May 7, 2025, 1:39pm UTC](https://community.elfsight.com/t/custom-a-i-chatbot-please/117447/6 "2025-05-07T13:39:27Z")

</div>

Hi there, @Abel_Navarro 👋

Thank you for waiting!

Here is the solution from the devs:

```auto
.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 😉