Hide header when embeding appointment in iframe

ℹ️ Support
1

I’m successfully displaying the appointment scheduling page in an iframe on a separate website. I’m trying to hide the header that displays in the iframe but cant figure out what needs to be added. when im using dev tools i can delete this node and the header will be gone.
image

this is the code im using to embed the iframe

<iframe src="https://MYAPPOINTMENTURL" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:800px;width:100%;border:none;overflow:hidden;" allowfullscreen="true"> 
</iframe>

any ideas? i was thinking something in the inline style to set display none on the id “header”

2

it looks like maybe the public.scss may be trying to do that with
input#initial-state-calendar-is_embed ~ header#header {
display: none;
}

3

Screenshot 2025-01-11 at 4.59.55 AM
Screenshot 2025-01-11 at 4.59.55 AM1908×1478 303 KB

Can you use custom CSS in this field? Something like “display:none !important” on the #header?

4

Did you have to modify any settings to be able to embed this in an iframe on an external domain? I’m trying to do the same but always get a “refused to connect” error when trying to embed on an external domain.

I see some references to Content-Security-Policy or ContentSecurityPolicy.php but they are all years old for previous version of nextcloud. Any insight would be helpful?

Thanks!

5

This is what you need to embed in iframes:
App-Id hidesidebars
App-Name Hide sidebars
Summary Hide left sidebar and top header bar for use in iframe or some other scenarios.
Categories customization
App-Version 2.2.5
Repository GitHub - pointcz/hidesidebars
Issue-Tracker Issues · pointcz/hidesidebars · GitHub
PHP min-intsize 32
NC min/max 21 / 29
Not-shipped (not included) App available in appstore
Appstore Hide sidebars - Apps - App Store - Nextcloud
Created 2020-05-31T11:16:44.140661Z
Last modified 2024-08-29T11:14:35.685236Z

(Although officially only up to Nextcloud version 29, it also works for Nextcloud 30 without any restrictions.)

That is because of the CSP, which need an extra Policy to allow the specific domain.

The above app gives an extra option, to add that Policy.

h.t.h.

Much and good luck,
ernolf

1 Like
6

I’ve been editing the ContentSecurityPolicy.php as I detailed here

I’ll have to try the app ernolf is mentioning above, though I’ve got this working well enough after editing that php file. the sidebars showing was just aesthetics that dont matter that much i guess. editing the php file should get yours to display.

1 Like
7

Oh cool. So you’ve already looked into CSP in depth. That obviously makes it a lot easier!

Changing the file means that its integrity is no longer correct and warnings can appear. In addition, it then has to be changed again with each new Docker image, which you have already tried to do with docker environment Variables.

But that way around is like the tail waggling the dog. :wink:

I think it is much more stable and elegant to add the corresponding domain in the config.php as with the app I recommended.

Much and good luck,
ernolf

1 Like
8

Thank you. I did just set this up and removed my changes to the system php file and this worked perfectly on both points. Now i dont have to have a script that sed’s the php on container rebuild :smiley:
Have a great day!

1 Like