Embed iframe content in a panel on Contact detail view

[TimHarrison]

Hi,

Forgive me if this has been covered already. I've searched for a few days both within the forum and throughout Google results to figure out how to do this. Any info on customization either seems to me unrelated, or it's over my head in understanding at the current moment.

My goal is to include an iframe within a panel on Contact or Lead detail views. This iframe will display the content of a user profile from my analytics platform Matomo. I need to inject the Contact's email into the iframe URL so that I can pull the specific user profile from my analytics platform.

How do I create that custom panel?

I apologize if my terminology is off. I've just started working with Espo so I'm learning the ropes and trying to understand the code and how it works. Please let me know if I can provide any clarifying details.

Thank you,
Tim Harrison

[TimHarrison]

I was able to follow the steps here to create a basic panel: https://github.com/espocrm/documenta...cord-panels.md
I've also been able to extend the basic example to show an iframe in that panel with the hard coded content I'm looking for. It looks pretty awesome.

Next, I'm trying to figure out how to inject the email of the record I'm on into the template file so that it can be included in the iframe src.
I'll also need to figure out how to conditionally show the contents of the iframe depending on whether content comes back or not from the url (If the user does not have a Matomo profile, show a "No data for user" message instead of the iframe.)

[TimHarrison]

Ok I finally have my final solution after trudging through this whole thing by myself.

I came across the following code within a system view file client/modules/crm/src/views/record/panels/history.js

if (this.model.name == 'Contact') {
                if (this.getConfig().get('b2cMode')) {
                    attributes.parentType = 'Contact';
                    attributes.parentName = [B]this.model.get('name')[/B];
                    attributes.parentId = this.model.id;

The part about "this.model.get()" was the piece I've been looking for to gain access to the elements of the page I'm on. With a little testing, I was able to pull the user's email address with this.model.get('emailAddress')

I passed it to my template with:
this.email = this.model.get('emailAddress')

I also needed to figure out how to dynamically show the iframe contents only if they had a valid email address and then only if they had any data on our analytics platform. I accomplished this by making an XMLHttpRequest to the API. If the contents came back empty, then render a "No data for this user" message instead of the iframe.

Here's my final solution
I created a template file which will just hold a simple container for the iframe or message. I created the file client/custom/res/templates/panels/matomo-user-profile.tpl with the following contents:

<div id="iframe-container">
</div>

These are the contents of my client/custom/src/views/contact/panels/matomo-user-profile.js view file:

define('custom:views/contact/panels/matomo-user-profile', ['views/record/panels/bottom'], function (Dep) {
    return Dep.extend({
        template: 'custom:panels/matomo-user-profile',
        afterRender: function () {
            var url = "https://<removed>/index.php?date=today&module=Widgetize&action=iframe&idSite=1&period=day&moduleToWidgetize=Live&actionToWidgetize=getVisitorProfilePopup&segment=userId%3D%3D";
            var api = "https://<removed>/index.php?date=today&module=API&action=index&idSite=1&period=day&method=Live.getVisitorProfile&format=JSON&expanded=1&segment=userId%3D%3D";
            var email = encodeURI(encodeURI(encodeURI(this.model.get('emailAddress'))));
            var xhr = new XMLHttpRequest();
if (this.model.get('emailAddress')) {
    xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300 && xhr.response != "[]") {
        document.getElementById("iframe-container").innerHTML = `
            <iframe style="border:none;height:100%;left:0;position:absolute;top:200px;width:100%;"
                src="${url}${email}"></iframe>`;
        document.getElementById("iframe-container").style.overflow = "hidden";
        document.getElementById("iframe-container").style.paddingTop = "56.25%";
        document.getElementById("iframe-container").style.position = "relative";
    } else {
        document.getElementById("iframe-container").innerHTML = "<h4>No data available for this user.</h4>"; }
    }
    xhr.open('GET', api + email);
    xhr.send();
} else {
    document.getElementById("iframe-container").innerHTML = "<h4>User has no email to track them by.</h4>";
}
        },
    });
});

It may not be pretty code, but it does the trick. I'm merely sharing this so that the next poor sucker that has to try to figure this same thing out can have a solution.

[tothewine]

> so that the next poor sucker that has to try to figure this same thing out can have a solution

that's the spirit

[Fehu]

Hi Tim,

That's excellent. I wonder if this would work for a solution I would like to create. In essence, I would like a new panel just below the lead contact information where I could hard code a few phone scripts links. Once an agent clicks one of the phone links a new box would appear with the script carrying basic contact information like Name or email address etc. Thoughts?

Marcus

[TimHarrison]

Do you want the popup box to be a model in the window, or a new window? A new window would be easy, as that would just be as simple as setting the target of the anchor tag to "_new". Besides, that, the whole iframe solution should work the same for you. Be sure to add the domain of your CRM to the CORS domains on the service that's providing the iframe content.

[Fehu]

Yes, Tim Harrison, I was thinking either would work but the model would be better. In essence, I would like to have a panel just below the contact information where clicking a ling of a button would open the model or a new window. Something like this...