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.
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