When trying to embed a webpage into my Umbraco website it says it is not supported. This concerns an Azure webpage, but when trying it with Google this didn't work either. Does anyone know a way around this?
Thanks!
The Embed functionality in the Rich Text Editor - looks at the /config/embeddedmedia.config configuration file for information on how to embed certain urls...
for example there is configuration there for a provider for the photo site flickr.com
So if you try to embed a link to an image on flickr.com - it's this provider that is used to determine how this should be displayed - 'embedded' inside the rich text area.
It's likely with the two examples you mention, that aren't necessarily media sharing type sites, that there isn't a provider in the configuration for them!
There is an example here in the documentation about how you could create your own provider, to register here, to handle the types of pages that you wish to embed:
I am trying to display a whole third party page in my Umbraco page that the user can interact with without needing to move away from my Umbraco page.
In relation to your answer to Leon's question, is it possible to create your own provider to embed a whole third party site into an Umbraco page through the rich text editor or does it only work for media (pictures, video etc.) from a third party site, because the documentation seems to generally refer to media content?
I found the following post that says Partial View Macro Files are needed to add an iframe with a url but it does not work for me.
Using the guidance from the above post I have tried to implement embedding a third party site using Partial View Macro Files and can embedd an iframe and edit the iframe width and height in the content page but am getting the following error when I preview the page:
System.InvalidOperationException: The partial view '~/Views/Partials/CustomGrid/Editors/macro.cshtml' was not found or no view engine supports the searched locations. The following locations were searched:
~/Views/Partials/CustomGrid/Editors/macro.cshtml
at System.Web.Mvc.HtmlHelper.FindPartialView(ViewContext viewContext, String partialViewName, ViewEngineCollection viewEngineCollection)
at System.Web.Mvc.HtmlHelper.RenderPartialInternal(String partialViewName, ViewDataDictionary viewData, Object model, TextWriter writer, ViewEngineCollection viewEngineCollection)
at System.Web.Mvc.Html.PartialExtensions.Partial(HtmlHelper htmlHelper, String partialViewName, Object model, ViewDataDictionary viewData)
at System.Web.Mvc.Html.PartialExtensions.Partial(HtmlHelper htmlHelper, String partialViewName, Object model)
at ASP.PageViewsPartialsCustomGridEditorsbase_cshtml.Execute() in c:\home\site\wwwroot\Views\Partials\CustomGrid\Editors\Base.cshtml:line 41
Can you please let me know if there is a best approach to embedding a whole site into Umbraco (create your own provider, using Partial View Macro Files, or another approach...) or if it is something that is not possible?
In theory you could implement a custom embed provider to take a url specified by editors, and then embed that url in a wireframe. But generally this functionality is there to display Oembeddable info from video or media, or social media sites, basically anything that supports OEmbed - a way to embed an external 'read only' resources into your site, but it's obvious where it has come from, eg Tweets, Giphy's etc
It depends a lot on what you are trying to embed, and whether editors in Umbraco will often be creating new pages and embedding lots of different resources or whether it's a one off.
Also do they need to add custom text above and below the embedded page, or is it something that should take over as much of the screen as possible.
depending on that answer I'd probably either create a special document type called an 'Iframe Page' (give it a picture frame icon :-)) that has a url property to embed and any height and width options as seperate properties that make sense to the editor.
Then in your template for the Iframe page, just right out the iframe and to display whatever url has been added in Umbraco for the Iframe Page.
The macro root will be bit more fiddly for editors to use, but if they are creating lots of these, or embedding multiple iframes in a single page for different resources, then yes a macro with parameters for the Url width and height woudl make sense, and implmenting the iframe bit in your macro partial.
At this point we do not have any Umbraco editors we are just working on developing the Umbraco site ourselves that will be used by the end users.
I need the final users to be able to see and interact with an embedded web page that we have created outside Umbraco, so the embedded content cannot be read only (users will need to be able to login then enter info and view a dashboard), we want the external web page to take up most of the screen but the users will still be able to see the site map options on the left and navbar in our Umbraco site.
No text will be needed above or below the embedded web page.
As per your instructions I have done the following:
created a document type called Iframe Page with url, height and width properties (see attached photo) and in permissions selected allow as root.
added to the Iframe template below the razor code some simple test html (see attached photo) - I wanted to first get the IFrame to display content before trying to make it display the url:
In content I am then able to save but when I click preview I get the following error (see attached photo):
I have also followed the Umbraco Document Types tutorial (link below) and when I try to preview the page I get the same error.
I think possibly from your description that it's likely that you have models builder on and it hasn't generated the ContentModels.IframePage model that your view is strongly typed to.
In the developer section of the site there should be a models builder dashboard with option to regenerate models ..
...or...
Change the top of your view to just be the underlying template page without a generated model
Eg
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
Otherwise in your web.cinfig if you set CustomErrors=Off you will see the exact error message for the problem
I have one final problem, I am trying to add the Iframe page to the navigation but when I add it the page does not show up.
I can see two other test pages I have added called namename and name2 but cannot see the SAT Iframe (I assume it is something to do with the difference in document type or something like that but am not sure how to rectify it). Please see the two screen grabs below the first one showing what I have added in the content area of Umbraco and the second one showing what I can see in the navigation bar when I check the preview of the overall page.
Thanks again for your guidance it has been really helpful.
(I'm not sure what Leon things about the hijacking of his question :-P)
but
have a look at the code that writes out your navigation... or post it here
it may be filtering by document type alias and therefore missing the Iframe doc type out
or
it may be checking for a field such as 'title' to write out the menu item, and your iframe doc type is missing that property, and you just need to add it in.
I am working together with Leon on this but I have taken over asking the questions so he doesn't mind :).
I am not exactly sure where the navigation code is. I have been trying some different approaches following your suggestions but as yet cannot get the Iframe page to appear in the navigation, only pages with the document type 'Default' can be seen in the navigation. 'Default' seems to not have any properties that are called 'title' or anything similar, if I copy the same properties as 'Default' to the Iframe it will still not show up in the navigation area.
Below is the Default template code code:
As you can see in the hierarchy the 'Main' page is Default's parent. Below are two screen shots with the Main page's template code:
Main seems to reference Views/Partials/MainMenu.cshtml so I have also included a screenshot from MainMenu.cshtml below:
I thought maybe it is something to do with the page being on the menuItem but I cannot find out if that is true or where I can add pages to the menuItem.
this is rendering the output of the mainmenu partial view, but the key thing is the 'Model' or the data that is being sent to that Partial view, eg Model.MenuItems
The MainMenu partial just loops through these 'MenuItems' and writes out the nav, so your IFrame page is missing from this MenuItems property.
And this property is defined by the IMainViewModel interface.
Now this 'could' have some implementation logic to determine the MenuItems - have a search in the solution for any code featuring MenuItems as a property to see if this is the case... or this might be a 'content picker' called MenuItems and you need to 'pick' the Iframe item to make it appear on the page.
There doesn't appear to be any filtering out by page type in the code you've displayed
I have been searching around for the IMainViewModel and MenuItems but as yet have not found anything that relates to either beyond the MainMenu.cshtml and Main template posted above.
I have used the search bar in the top of the page and manually looked through all the different files on the Umbraco developer page.
Could IMainViewModel and MenuItems be on a hidden page?
I have managed to get the Iframe and other contents pages required to show in the navigation by manually selecting the specific pages required using the Query Builder in both the MainMenu.cshtml and Main templates but they do not appear with the same formatting as I have in the original navigation bar, which we would like to retain.
If you have any idea how or where I can find the source of IMainViewModel and MenuItems that would be really helpful?
Embedding Azure webpage is not supported.
When trying to embed a webpage into my Umbraco website it says it is not supported. This concerns an Azure webpage, but when trying it with Google this didn't work either. Does anyone know a way around this?
Thanks!
Hi Leon
The Embed functionality in the Rich Text Editor - looks at the /config/embeddedmedia.config configuration file for information on how to embed certain urls...
for example there is configuration there for a provider for the photo site flickr.com
So if you try to embed a link to an image on flickr.com - it's this provider that is used to determine how this should be displayed - 'embedded' inside the rich text area.
It's likely with the two examples you mention, that aren't necessarily media sharing type sites, that there isn't a provider in the configuration for them!
There is an example here in the documentation about how you could create your own provider, to register here, to handle the types of pages that you wish to embed:
https://our.umbraco.com/Documentation/Extending/Embedded-Media-Provider/
regards
Marc
Hi Marc,
My Umbraco version: 7.7.8
Thanks for your reply to Leon's question.
I am trying to display a whole third party page in my Umbraco page that the user can interact with without needing to move away from my Umbraco page.
In relation to your answer to Leon's question, is it possible to create your own provider to embed a whole third party site into an Umbraco page through the rich text editor or does it only work for media (pictures, video etc.) from a third party site, because the documentation seems to generally refer to media content?
I found the following post that says Partial View Macro Files are needed to add an iframe with a url but it does not work for me.
https://stackoverflow.com/questions/37178014/add-iframe-macro-to-umbraco
Using the guidance from the above post I have tried to implement embedding a third party site using Partial View Macro Files and can embedd an iframe and edit the iframe width and height in the content page but am getting the following error when I preview the page:
System.InvalidOperationException: The partial view '~/Views/Partials/CustomGrid/Editors/macro.cshtml' was not found or no view engine supports the searched locations. The following locations were searched: ~/Views/Partials/CustomGrid/Editors/macro.cshtml at System.Web.Mvc.HtmlHelper.FindPartialView(ViewContext viewContext, String partialViewName, ViewEngineCollection viewEngineCollection) at System.Web.Mvc.HtmlHelper.RenderPartialInternal(String partialViewName, ViewDataDictionary viewData, Object model, TextWriter writer, ViewEngineCollection viewEngineCollection) at System.Web.Mvc.Html.PartialExtensions.Partial(HtmlHelper htmlHelper, String partialViewName, Object model, ViewDataDictionary viewData) at System.Web.Mvc.Html.PartialExtensions.Partial(HtmlHelper htmlHelper, String partialViewName, Object model) at ASP.PageViewsPartialsCustomGridEditorsbase_cshtml.Execute() in c:\home\site\wwwroot\Views\Partials\CustomGrid\Editors\Base.cshtml:line 41
Can you please let me know if there is a best approach to embedding a whole site into Umbraco (create your own provider, using Partial View Macro Files, or another approach...) or if it is something that is not possible?
Thanks,
Toby
Hi Toby
In theory you could implement a custom embed provider to take a url specified by editors, and then embed that url in a wireframe. But generally this functionality is there to display Oembeddable info from video or media, or social media sites, basically anything that supports OEmbed - a way to embed an external 'read only' resources into your site, but it's obvious where it has come from, eg Tweets, Giphy's etc
It depends a lot on what you are trying to embed, and whether editors in Umbraco will often be creating new pages and embedding lots of different resources or whether it's a one off.
Also do they need to add custom text above and below the embedded page, or is it something that should take over as much of the screen as possible.
depending on that answer I'd probably either create a special document type called an 'Iframe Page' (give it a picture frame icon :-)) that has a url property to embed and any height and width options as seperate properties that make sense to the editor.
Then in your template for the Iframe page, just right out the iframe and to display whatever url has been added in Umbraco for the Iframe Page.
The macro root will be bit more fiddly for editors to use, but if they are creating lots of these, or embedding multiple iframes in a single page for different resources, then yes a macro with parameters for the Url width and height woudl make sense, and implmenting the iframe bit in your macro partial.
if that helps!
your error refers to a missing file
/Views/Partials/CustomGrid/Editors/macro.cshtml
normally grid editors are in the folder
/Views/Partials/Grid/Editors/macro.cshtml
I wonder if that is the cause of your issue.
regards
marc
Hi,
Thanks for getting back to me.
In response to your questions about what we need:
At this point we do not have any Umbraco editors we are just working on developing the Umbraco site ourselves that will be used by the end users.
I need the final users to be able to see and interact with an embedded web page that we have created outside Umbraco, so the embedded content cannot be read only (users will need to be able to login then enter info and view a dashboard), we want the external web page to take up most of the screen but the users will still be able to see the site map options on the left and navbar in our Umbraco site.
No text will be needed above or below the embedded web page.
As per your instructions I have done the following:
In content I am then able to save but when I click preview I get the following error (see attached photo):
I have also followed the Umbraco Document Types tutorial (link below) and when I try to preview the page I get the same error.
https://our.umbraco.com/documentation/Tutorials/Creating-Basic-Site/Document-Types/
Do you know what the problem is here?
Many thanks,
Toby
Hi Toby
I think possibly from your description that it's likely that you have models builder on and it hasn't generated the ContentModels.IframePage model that your view is strongly typed to.
In the developer section of the site there should be a models builder dashboard with option to regenerate models ..
...or...
Change the top of your view to just be the underlying template page without a generated model
Eg
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
Otherwise in your web.cinfig if you set CustomErrors=Off you will see the exact error message for the problem
Regards
Marc
Hi Marc,
Great that worked, thank you.
I can now see the external page in the Iframe.
I have one final problem, I am trying to add the Iframe page to the navigation but when I add it the page does not show up.
I can see two other test pages I have added called namename and name2 but cannot see the SAT Iframe (I assume it is something to do with the difference in document type or something like that but am not sure how to rectify it). Please see the two screen grabs below the first one showing what I have added in the content area of Umbraco and the second one showing what I can see in the navigation bar when I check the preview of the overall page.
Thanks again for your guidance it has been really helpful.
Thanks,
Toby
Hi Toby
(I'm not sure what Leon things about the hijacking of his question :-P)
but
have a look at the code that writes out your navigation... or post it here
it may be filtering by document type alias and therefore missing the Iframe doc type out
or
it may be checking for a field such as 'title' to write out the menu item, and your iframe doc type is missing that property, and you just need to add it in.
regards
Marc
Hi Marc,
I am working together with Leon on this but I have taken over asking the questions so he doesn't mind :).
I am not exactly sure where the navigation code is. I have been trying some different approaches following your suggestions but as yet cannot get the Iframe page to appear in the navigation, only pages with the document type 'Default' can be seen in the navigation. 'Default' seems to not have any properties that are called 'title' or anything similar, if I copy the same properties as 'Default' to the Iframe it will still not show up in the navigation area.
Below is the Default template code code:
As you can see in the hierarchy the 'Main' page is Default's parent. Below are two screen shots with the Main page's template code:
Main seems to reference Views/Partials/MainMenu.cshtml so I have also included a screenshot from MainMenu.cshtml below:
I thought maybe it is something to do with the page being on the menuItem but I cannot find out if that is true or where I can add pages to the menuItem.
Please let me know if you need any more info.
Thanks again,
Toby
Hi Toby
Good tracing through the system! you are on the right track!
Essentially you have this in the Main.cshtml layout view
this is rendering the output of the mainmenu partial view, but the key thing is the 'Model' or the data that is being sent to that Partial view, eg Model.MenuItems
The MainMenu partial just loops through these 'MenuItems' and writes out the nav, so your IFrame page is missing from this MenuItems property.
And this property is defined by the IMainViewModel interface.
Now this 'could' have some implementation logic to determine the MenuItems - have a search in the solution for any code featuring MenuItems as a property to see if this is the case... or this might be a 'content picker' called MenuItems and you need to 'pick' the Iframe item to make it appear on the page.
There doesn't appear to be any filtering out by page type in the code you've displayed
regards
Marc
Hi Marc,
I have been searching around for the IMainViewModel and MenuItems but as yet have not found anything that relates to either beyond the MainMenu.cshtml and Main template posted above.
I have used the search bar in the top of the page and manually looked through all the different files on the Umbraco developer page.
Could IMainViewModel and MenuItems be on a hidden page?
I have managed to get the Iframe and other contents pages required to show in the navigation by manually selecting the specific pages required using the Query Builder in both the MainMenu.cshtml and Main templates but they do not appear with the same formatting as I have in the original navigation bar, which we would like to retain.
If you have any idea how or where I can find the source of IMainViewModel and MenuItems that would be really helpful?
Thanks again,
Toby
is working on a reply...