Fixed positioning of widget sourced via iframe to bottom right

[vasya10]

Hello:

I have a chat widget thats sourced via iframe. (This is manage-hosted Canvas). I want a behavior similar to the Panda widget icon thats part of this community page.

I included the iframe at the bottom of my page content like this: 

<div><iframe id="widget-parent" style="position: fixed; right: 0; height: 704px; width: 100vw; border: solid 1px blue; z-index: 9999;" src="https://allowed-list-domain.com/file.html" loading="lazy"></iframe></div>

But I see that due to this commit https://github.com/instructure/canvas-lms/commit/b5389273af4002d86160d984f0877875646e4a59  the position: fixed is forcefully stripped away. And changes to "position: relative". (I'm not even sure why this is considered a security issue, given widgets are so common) The domain from where the file is sourced from is in the Allowed Domain list, but looks like that doesn't matter. I obviously cant modify the parent iframe due to cors from within my widget.

I have tried several variants of the "position" and related attributes like absolute, sticky, transform: translateY, height calc etc. Nothing works or doesn't given a normal user experience.

Is there a default CanvasLMS style or any way to achieve this behavior for a widget?

[chriscas]

Hi @vasya10,

I'll move this question over to the developers group, where there are some expert users who have done a lot of customizations with Canvas.  My first thought is that this would need to be done via global javascript/css as part of an account/subaccount theme (which a Canvas admin would need to insert), but it seems like you only want the widget to appear on a certain page or pages within a single course, am I correct?

Look forward to your response!

-Chris

[vasya10]

Hi @chriscas

Thanks for your response and appreciate moving this question to appropriate group! Yes, we want the chat widget (its just like the Panda widget in this page, but sourced from another domain via iframe and the domain is in allowed list). inserted in selected pages. I believe it may be used in multiple-courses.

We could not include the script tag directly within the content (despite domain is allowed list), as the script was removed before saving. So we sourced it via iframe, which has the above observed style restrictions. I am not an Admin on the instance, but If there are instructions to inject css/js globally, i can explore those options with our Admin.