Embedding Azure chatbot webchat channel into SharePoint Online Modern Pages

user_10563883 0
Viewed 1441

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.

botframework sharepoint
3 Answers

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

It works in modern SharePoint site also, no need to change the format of width and height. If you are an admin, you can make changes in site settings.

Go to the site collection wherever you want to embed code Click on "Gear " icon, select site information, you will be getting a pane where you have to select "View all site settings" At the section of site collection administration, select "HTML field security" and insert the domain, here is "webchat.botframework.com" as per your requirement and add this and click "OK" Once you are embedding that code, your chatbot will appear

user_132554560

I changed the site settings like @maheshwari-bandala explained, but this was not working. I then also changed the code to:

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

This worked! So note it's not width = "100%" (like Dana V explained) but width: 100%

user_144940590
Related