Embedding Azure chatbot webchat channel into SharePoint Online Modern Pages

So I've been having this problem where I am trying to embed an Azure Web App Bot WebChat channel into a SharePoint Online Modern Site page. I'm not sure if it should be as straightforward as I think, but I add the "embed" webpart and attempt to add the iframe code, however I get the following error:

We can't show this embedded content because the code seems to be incomplete. Make sure that the embed code includes width, height and a valid address for the src attribute.

The auto-generated embed code is:

<iframe src='https://webchat.botframework.com/embed/AzureBotName?s=BOTSECRET' style='min-width: 400px; width: 100%; min-height: 500px;'></iframe>

This embed code works in a SharePoint Online classic site, but not modern.

Solution 1:

This looks to be how SharePoint handles the width and height properties. It wants specific width and height attributes set as opposed to the style attribute that the bot embed markup creates.

To further explain, you need this:

width="100%" height="500px"></iframe>

Instead of this:

style='min-width: 400px; width: 100%; min-height: 500px;'></iframe>