I have an instant app that is embedded into a webpage on my organization's main website for members of the public to be able to look up their council representatives. In a custom pop-up, I have each representative's email hyperlinked with a mailto:email address where users can simply click on their name in the pop-up and it will open a mail window.
The pop-up works great in the app on AGOL, but the issue is with the embed. When selecting the link, an error pops up saying the content is blocked. HOWEVER, on the embedded map, if the user right-clicks and opens the link in a new tab, then it works just fine. There is another link in this popup to a webpage and that link works just fine. This issue is only with the mailto links.
This is an oddly specific and weird issue and I'm trying to discern if this is an issue with the organization blocking content (which wouldn't make sense since it can still be opened in a separate window) or if anyone else has experienced this.
Solved! Go to Solution.
I actually managed to figure this out. If setting up a hyperlink in a pop-up on AGOL, the html code doesn't automatically assign some of the attributes when linking to an email address "mailto:email@address.com".
The html code defaults to using the <a> tag for hyperlinks. In the case of mailto, the default is <a href="mailto:email@address.com">TEXT(e.g. Send Email)</a>.
This default, I belive, was causing the embedded app to search for a default mail app within the embedded window rather than opening a new tab/window and searching for a default mail app in the web browser. This was causing the "content blocked" message to appear.
To fix this, the html code in the layer pop-up needs to be modified to include the "target" attribute with the "_blank" value assigned. "Target" specifies where the link should be opened, and "_blank" tells it to open a new window or tab. The code can be changed to <a href="mailto:email@address.com" target="_blank">TEXT(e.g. Send Email)</a>.
This is specific to linking email addresses. When linking another web page, the html code defaults to including the the "target" and "rel" attributes.
I actually managed to figure this out. If setting up a hyperlink in a pop-up on AGOL, the html code doesn't automatically assign some of the attributes when linking to an email address "mailto:email@address.com".
The html code defaults to using the <a> tag for hyperlinks. In the case of mailto, the default is <a href="mailto:email@address.com">TEXT(e.g. Send Email)</a>.
This default, I belive, was causing the embedded app to search for a default mail app within the embedded window rather than opening a new tab/window and searching for a default mail app in the web browser. This was causing the "content blocked" message to appear.
To fix this, the html code in the layer pop-up needs to be modified to include the "target" attribute with the "_blank" value assigned. "Target" specifies where the link should be opened, and "_blank" tells it to open a new window or tab. The code can be changed to <a href="mailto:email@address.com" target="_blank">TEXT(e.g. Send Email)</a>.
This is specific to linking email addresses. When linking another web page, the html code defaults to including the the "target" and "rel" attributes.