Applying className to the iframe container

Dear All,

I am facing an issue with applying my custom CSS file to an iframe container on my website. I have successfully changed the image through the external Vercel css file, but have been unsuccessful in changing the size and position of the chatbot’s icon.

According to the documentation, I need to add the “className” property to the embedded section. However, the description of “CSS class to be applied to iframe” is not clear to me. I am unsure whether I should use a path to the Vercel CSS file or a locally stored file in Tailwind’s global.css (I am using Next JS).

It would be great if you could provide a short tutorial or video explaining how to edit the iframe container. I appreciate any assistance you can provide.

Thank you.


When you said " to an iframe container on my website" did you mean the Botpress iframe?

Can you add the link to the documentation that you are referring to here so we can enhance it?


Yes, I am referring to the Botpress iframe.

The link:

In the Customization Variable column - className - CSS class to be applied to iframe.

Hi @scream10 ,

Sorry for the late reply; I hope you found a fix for your challenge.

Why don’t you use this property “stylesheet”? Then you have all the different possibilities:

Tell me if you like this solution better or not?