# Make chat window full screen

**URL:** <https://community.elfsight.com/t/make-chat-window-full-screen/139832>\
**Category:** AI Chatbot\
**Created:** [September 19, 2025, 6:08pm UTC](https://community.elfsight.com/t/make-chat-window-full-screen/139832 "2025-09-19T18:08:15Z")\
**Posts on this page:** 6\
**Page:** 1

<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:** [September 19, 2025, 6:08pm UTC](https://community.elfsight.com/t/make-chat-window-full-screen/139832/1 "2025-09-19T18:08:15Z")

</div>

Add this code to the Custom CSS field on the Settings tab of your [AI Chatbot](https://elfsight.com/ai-chatbot-widget/) widget’s settings:

```auto
@external {
  .chatway--container .chatway--trigger-container {
    z-index: 99999999 !important;
  }
}

.es-interactive-floating-overlay {
  z-index: 9999999999 !important;
}

.es-interactive-floating-window {
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

.es-header-button-size {
  display: none !important;
}

```

---

<div class="post-metadata">

**Author:** ![iammasterweb](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/iammasterweb/32/93576_2.png) [@iammasterweb](https://community.elfsight.com/u/iammasterweb)\
**Post date:** [May 23, 2026, 3:42pm UTC](https://community.elfsight.com/t/make-chat-window-full-screen/139832/2 "2026-05-23T15:42:38Z")

</div>

Hey @Max ,

I tried out this code and it worked very well. Couldn’t remember If I gave you feedback on it so putting it here 😁.

With thanks,

mx 👨🏾‍💻 ✨

---

<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 25, 2026, 10:24am UTC](https://community.elfsight.com/t/make-chat-window-full-screen/139832/3 "2026-05-25T10:24:54Z")

</div>

That’s great, thanks a lot for sharing your experience with us, @iammasterweb 😉

---

<div class="post-metadata">

**Author:** ![user23472](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/user23472/32/66605_2.png) [@user23472](https://community.elfsight.com/u/user23472)\
**Post date:** [September 2, 2026, 3:35am UTC](https://community.elfsight.com/t/make-chat-window-full-screen/139832/4 "2026-09-02T03:35:34Z")

</div>

sadly I got

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/d/bdcd6ef7e068c2e87ed400fd790e97098eb4f4df.jpeg)

---

<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:** [September 2, 2026, 11:56am UTC](https://community.elfsight.com/t/make-chat-window-full-screen/139832/5 "2026-09-02T11:56:11Z")

</div>

Hi @user23472 👋

Thanks for bringing this up!

We’ve reviewed the code and here is the updated version:

```auto
@external {
  .chatway--container .chatway--trigger-container {
    z-index: 99999999 !important;
  }
}

.es-interactive-floating-overlay {
  z-index: 9999999999 !important;
}

.es-interactive-floating-window {
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

.es-header-button-size {
  display: none !important;
}

```

Give it a try and let me know if you like the result 🙂

---

<div class="post-metadata">

**Author:** ![user23472](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/user23472/32/66605_2.png) [@user23472](https://community.elfsight.com/u/user23472)\
**Post date:** [September 2, 2026, 9:24pm UTC](https://community.elfsight.com/t/make-chat-window-full-screen/139832/6 "2026-09-02T21:24:17Z")

</div>

PERFECT XAM 😄