Embedding Azure chatbot webchat channel into SharePoint Online Modern Pages

up vote
1
down vote

favorite

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.

edited Nov 10 at 12:04

Billal Begueradj

5,501132637

asked Nov 9 at 22:58

ZenunJ

add a comment |

up vote
1
down vote

favorite

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.

edited Nov 10 at 12:04

Billal Begueradj

5,501132637

asked Nov 9 at 22:58

ZenunJ

add a comment |

up vote
1
down vote

favorite

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.

edited Nov 10 at 12:04

Billal Begueradj

5,501132637

asked Nov 9 at 22:58

ZenunJ

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.

sharepoint botframework

edited Nov 10 at 12:04

Billal Begueradj

5,501132637

asked Nov 9 at 22:58

ZenunJ

edited Nov 10 at 12:04

Billal Begueradj

5,501132637

asked Nov 9 at 22:58

ZenunJ

edited Nov 10 at 12:04

Billal Begueradj

5,501132637

edited Nov 10 at 12:04

Billal Begueradj

5,501132637

edited Nov 10 at 12:04

Billal Begueradj

5,501132637

asked Nov 9 at 22:58

ZenunJ

asked Nov 9 at 22:58

ZenunJ

asked Nov 9 at 22:58

ZenunJ

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

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>

edited 9 hours ago

answered yesterday

Dana V

1157

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53234328%2fembedding-azure-chatbot-webchat-channel-into-sharepoint-online-modern-pages%23new-answer', 'question_page');
}
);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

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>

edited 9 hours ago

answered yesterday

Dana V

1157

add a comment |

up vote
0
down vote

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>

edited 9 hours ago

answered yesterday

Dana V

1157

add a comment |

up vote
0
down vote

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>

edited 9 hours ago

answered yesterday

Dana V

1157

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>

edited 9 hours ago

answered yesterday

Dana V

1157

edited 9 hours ago

answered yesterday

Dana V

1157

answered yesterday

Dana V

1157

answered yesterday

Dana V

1157

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nrthugu