Embed link in wordpress via ifram - firefox don't allow to show it

[stefan-franz]

I tried to embed my appintment link in that way in my wordpress site:

<iframe src="https://nc.stefan-franz.de/apps/appointments/embed/CwZaw1MC4rqZzl7N/form"

How can i do it?

[pongraczi]

The same happened in odoo v15.
The server refused the connection.

[pongraczi]

It seems I missed this Tutorial:
https://htmlpreview.github.io/?https://github.com/SergeyMosin/Appointments/blob/master/templates/help.php

Especially the chapter: iFrame/Embedding

1. If the iframe is under a different domain use occ to set allowed Frame Ancestor Domain: php occ config:app:set appointments "emb_afad_YourUserName" --value "your.domain.com" 2. Email confirm/cancel buttons need to be redirected.
   Use occ to set base URL for the host page with a query parameter available at the end of the URL: php occ config:app:set appointments "emb_cncf_YourUserName" --value "http(s)://your.domain.com/page_url?some_param_name=" Example using PHP:
   ... </iframe>'; ?>

...
More examples: https://github.com/SergeyMosin/Appointments/tree/master/tests/embedding
Nextcloud occ: https://docs.nextcloud.com/server/latest/admin_manual/configuration_server/occ_command.html
Frame Ancestors: https://w3c.github.io/webappsec-csp/#directive-frame-ancestors
Additional information can be found here: https://github.com/SergeyMosin/Appointments/issues/191#issuecomment-909210230
Some more information is here: https://github.com/SergeyMosin/Appointments/issues/268#issue-1067123944

[stefan-franz]

Hmmm....my domain for the wordpress site is: stefan-franz.de
My subdomain for the nextcloud: nc.stefan-franz.de....

I have a shared nextcloud at hetzner.com - no access to the php commands - and also to less knowledge for it.
If anything with iframe i can do, i'm looking forward any tipps.

[pongraczi]

@stefan-franz I am also at Hetzner :)
I just will write to the support about the two requested occ commands, as these occ actions are not available at their web admin page.

[stefangweichinger]

I am not at Hetzner but failed back then to embed this app into WP. Did you succeed?

[pongraczi]

I did not work on it.
Maybe soon I will try again.

[stefangweichinger]

same here. I would need that in WP ... but it was too complicated for me back then.

[stefangweichinger]

I give this another try today: https://github.com/SergeyMosin/Appointments/tree/master/tests/embedding

At first I have to understand the domains/urls etc

My nc-URL: https://oc.oops.co.at/nextcloud

My wp-URL: https://www.oops.co.at

Both wp and nc are docker-containers on the same rented server-VM, btw ...

I keep you posted and appreciate any productive discussion ;-)

[stefangweichinger]

in WP, do I have to use "Embed" ? It doesn't work for both variants of the URLs shown by the appointments-app

I can add a link, but that looks ugly ...

#473 is also worth a look (again)

[stefangweichinger]

Sorry for me being noisy, but I want to get this working.

There are a few things where I try to guess:

• my nc user is "sgw" ... so I try

docker-compose exec -u 33 app php occ config:app:set appointments "emb_afad_sgw" --value "www.oops.co.at"

Why "afad", is that even correct?

• I try to embed this link (the "iframe-code" displayed by the app), is that correct?

https://oc.oops.co.at/nextcloud/apps/appointments/embed/ilbkZxxyyy/form

• when I try this I get a log-entry in NC:

"GET /apps/appointments/embed/ilbkZxxyyy/form HTTP/1.1" 200 11920 "-" "WordPress/6.5.5; https://www.oops.co.at"

but the embedding fails

• here the config (a bit anonymized)

{
    "apps": {
        "appointments": {
            "emb_afad_sgw": "www.oops.co.at",
            "enabled": "yes",
            "hk": "977bfa09xxxxxxxxxxxxx--------y34e046990ab1",
            "installed_version": "2.1.10",
            "tiv": "be5d956axxxxxxxxxxxx---------50c0715",
            "types": "dav"
        }
    }
}

thanks for any help here!

[SergeyMosin]

Please see https://github.com/SergeyMosin/Appointments/tree/master/tests/embedding

Why "afad", is that even correct?

afad stands for Allowed Frame Ancestor Domain, and is only needed if you are embedding into a different domain. If it is the case you probably want to redirect the Confirm/Cancel links as well.

The php occ config:app:set appointments "emb_afad_sgw" --value "www.oops.co.at" config basicaaly says that user swg gives permissin to domain www.oops.co.at to embed it's appointments page. More info: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors

Full example is here: https://github.com/SergeyMosin/Appointments/blob/master/tests/embedding/php-page.php
Here is some more info: #191 (comment)

but the embedding fails

What does your <iframe> tag looks like.

[stefangweichinger]

Well, I read that doc-page for hours but I don't understand it, that's why I am here ;-)

For me it's not a full example, as it's not clear what to paste where, sorry. That's why I post my URLs etc to maybe get the commands shown by you ...

I am no web-coder at all so I simply cutting/editing/pasting somehow ... trial and error ...

And I don't know things. By iframe-tag, do you mean the part in:

https://oc.oops.co.at/nextcloud/apps/appointments/embed/ilbkZrMAbQ%3D%3D/form

?

[stefangweichinger]

thanks, btw ;-)

[SergeyMosin]

And I don't know things. By iframe-tag, do you mean the part in:
https://oc.oops.co.at/nextcloud/apps/appointments/embed/ilbkZrMAbQ%3D%3D/form

This is just a URL of your appointments page. I was asking about what you put into your WP page. it probably would look something like this:

<iframe src="https://oc.oops.co.at/nextcloud/apps/appointments/embed/ilbkZrMAbQ%3D%3D/form"></iframe>

Can you post the URL or code of the WP page ?

[stefangweichinger]

There is no WP page yet ... I was assuming that embedding the mentioned URL into a random WP-page on https://www.oops.co.at would simply work.

The WP page I test with is still a draft ... and not visible online.

But if it helps I set it to visible: https://www.oops.co.at/erreichbarkeit/ (it's only an ugly draft so far)

That's one main point: I don't know how to write this iframe and embed it.

WP doesn't give me a "block" called iframe, but I now trie pasting your example as HTML.

It gets displayed now! Although ugly still ... will try to fix that asap.

That's progress, right?

now for the other setting around the email-buttons .. I have to check that feature at first.

thanks so far!

[SergeyMosin]

Looks like the embedding is working. WP inner-workings in regards to styling, blocks, etc... is beyond the scope of this app.

[stefangweichinger]

sure, thanks. I might come back for that buttons-topic ... have to look at it first

[stefangweichinger]

OK, as far as I understand with "Email Buttons" you mean the confirmation mails etc , right?
As expected (not configured yet), the button does nothing so far.

You write:

Email Buttons:
PHP Page: php occ config:app:set appointments "emb_cncf_Admin22" --value "http://localhost:8282/php-page.php?my_param_key="
JS Page: php occ config:app:set appointments "emb_cncf_Admin22" --value "http://localhost:8282/js-page.html?my_param_key="

I assume I chose the PHP-version for WP?

Which value here? I don't get it, sorry!

[stefangweichinger]

I assume it should point to your app somehow?

docker-compose exec -u 33 app php occ config:app:set appointments "emb_cncf_sgw" --value "https://co.oops.co.at/nextcloud/apps/appointments/php-page.php?my_param_key="

But that doesn't work yet. I think I'm close ... thanks

[SergeyMosin]

The button config can be skipped in most cases. When an attendee clicks the Confirm or Cancel buttons in the email invite a regular Nextcloud (not the WP based) confirmation/cancellation (or booking error/try again) page will be opened. The emb_cncf_xxx is an advance config option for opening the page inside the iframe, the regular booking flow still should work without this advanced config.

iFrame embedding gets somewhat complicated and the PHP and JavaScript code in the example is provided as reference point, as there are multiple-other ways to do it in many other programming languages. It is up to the developer to decide what works best for their particular project.

[stefangweichinger]

OK .. so I removed that second setting.

Entered the next appointment, received email, now the link works!!

Great, I think that's it for me. Thanks for your work and your help in this issue. Have a nice weekend!