Applying className to the iframe container

Tutorials & Documentation
,
1

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.

2

Hi,

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

3

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

4

Hi,

Yes, I am referring to the Botpress iframe.

The link:
https://botpress.com/docs/cloud/webchat-customization/overview/

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

5

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:

6

Tell me if you like this solution better or not?