Hi @MASN ,
as @OOlashyn pointed out, you should take a liquid template to render the iframe. The iframepart can be used as a single page template or may be embedded in other liquids, what comes in quite handy.
So, given you know the id of the entity (e.g. a contact) you could go like the first part of the example (my liquid example for that).
I personally prefer to do this kind of things with some javascript as pointed out in the second half of the example.
Of course, the way you do it depends on the request your users have.
If you access eintities from the crm, do not forget to enable entity permissions fior that specific entity. Else, you will not see data 🙂
Another issue is, that you might have to set content-security-policy or x-frame-options on the site you want to embed. Some sites (like e.g. www.google.com) do not let themselves beeing embedded in an iframe.
Also, the embedding page has to speak the same protocol, so it has to be https as portals are served via https.
When you want to "talk" to the iframe, just use window.postmessage and register a handler on the embedded page (and on your page to be able to get answers as well 🙂 )
One problem with the iframes is usually the handling of responsiveness. So, when i use that approach a have a communication between the two windows and on resize, the embedded page tells me the need for height and width and i have a listener on the hosting page to align the size of the iframe in order to avoid scrollbars.
A lot of text, sorry, but may be, it helps.
Have fun,
Christian
my liquid example:
{% assign thiscontact = entities.contact["73CC4D87-0641-EA11-A812-000D3AB4653D"] %}
{% if thiscontact %}
<div class="row">
<div class="col-xs-12"> here the iframe will go if the contact exists... </div>
<div class="col-xs-12"> <iframe style="width: 100%; height: 300px;" src="https://www.bing.com?q={{thiscontact.fullname}}"></iframe> </div> </div>
{% endif %}
<div class="row">
<div class="col-xs-12"> set the source based on code </div>
<div class="col-xs-8"> <input type="text" class="form-control" id="iframesrc"/> </div>
<div class="col-xs-4"> <input type="button" id="goforit" value="go"/> </div>
<div class="col-xs-12">
<iframe id="tgtiframe" style="width: 100%; height: 300px;"></iframe> </div> </div>
<script language="javascript">
var navigateIframe = function() {
var tgt = $("#tgtiframe");
tgt.removeAttr("src");
tgt.attr("src", $("#iframesrc").val());
} $(document).ready(function() {
$("#iframesrc").change(navigateIframe);
$("#goforit").click(navigateIframe); })
</script> ps the code was formatted using some external tool which may be made it syntactically incorrect. I do not know how to put in srccode here, the html was interpreted and i saw my iframes...
