How to make dynamic width height iframe for chatbots

So i am building a chatbot that i want to integrate into the websites. What i want is an iframe code that can be copy pasted into any website and it enables the chatbot.

Chatbot is being built in Reactjs and Tailwindcss.

Problem:
When i integrate a chatbot using iframe on website, i get white background and a fixed height, width window. What i want is a chatbot icon, when clicked should open whole chatbot box.
enter image description here

iframe code:

<iframe 
      src='http://localhost:5173/'
      title='iframe'
      allowTransparency='true'
      allowFullScreen='true'
      style={{
        border: 'none',
        position: 'fixed',
        bottom: '5px',
        right: '5px',
        zIndex: '9999',
      }}
/>

my Reactjs Code:

import Button from './components/button/Button'
import useStore from './store/States'
import Chat from './components/chat/Chat'


export default function Bot() {
    const isOpened = useStore((state:any) => state.isOpened)
    return (
        <div className='bg-red-200'>
            {isOpened ? <Chat /> : null}
            <Button />
        </div>
    )
}

Please help me let me know what should be fixed so it starts behaving like other chatbots we see.

I tried removing mutiple divs.
I tried adjust iframe width and height