Jimi Wikman

Not unless you somehow can provide the content height with the content.
Basically what you do is add a hole in your site and place some content behind that hole. The size of the hole will be whatever you set on your site. Whatever happens on the other side of that hole is out of your control.
If you want, you can try to use JavaScript to manipulate the iframe. My experience with it is not so great, but there are some solutions that might work for you.
This might be a starting point:
https://stackoverflow.com/questions/49253341/how-to-make-iframe-100-height-according-to-its-content

https://medium.com/@jamesfuthey/how-to-add-facebook-live-chat-to-your-website-dd48fc8bb066
So it needs to go into the global template just before the </body> tag.
In your admin section, go to Themes -> Edit HTML & CSS (looks like this </>).
It should open your global HTML, but if it does not, you find it at core->front->global->global template.
Go to the end of the template and place the Facebook code snippet just before the </body>.

You have some information about that in the Help Guides.
It's a 12 column grid and you also have documentation on columns so you can use the IPS standards for that as well.
 
Not sure if there is a Figma file somewhere with the IPS design, but it would be handy for sure!