Custom Module for iFrames on Landingpages

[TLeue]

Hey there,

i'd like to integrate an iFrame on one of our landingpages. For that i'd like to build a custom module in the design manager. Although i'm not a developer nor can i write in html code. 

With some help i created this:

It seems to work just fine. When i plant it in my landingpage i can insert an url as i want BUT the url doesn't work.

I've read something about not all urls are eligible to use in an iFrame, but it's necessary for our project. How can i make this work?

Thanks for your help!

[Jnix284]

Hi @TLeue  to test whether your iframe will work, you can add the Rich Text common module to your page and choose Insert, then Embed and paste your iFrame code there.

You may not see a preview of the iFrame in the editor, but if it works, you will see it on the preview page when you open it in a new tab.

This is also much easier than creating a custom module and can be formatted using the Section and Column alignment settings to work with your layout.

[TLeue]

Hi Jennifer,

thanks for your answer! 

I already tried it with a Rich Text Module. It worked on desktop but not on mobile versions. That's why i wanted to integrate the java script, because it makes the whole thing more responsive. 

[Jnix284]

@TLeue ah, I see, are you able to share the iframe code you are trying to embed?

Have you tried separating the javascript in the Page head HTML instead of creating a custom module?

I'm not saying you can't make the module work, it's just not the easiest solution for a non-developer

[TLeue]

Hi Jennifer,

thanks again for your message. 

What do you mean with "Have you tried separating the javascript in the Page head HTML instead of creating a custom module"?

Thats the iFrame HTML Code:

<div id="voty-iframe-wrapper"
     style={{
        display: "flex",
        width: "100%",
        overflow: "hidden",
      }}>
  <iframe src="https://voty.votyapp.com/iframe/voting/29"
          style={{
            display: "block",
            margin: 0,
            padding: 0,
            overflow: "hidden",
            width: "100%",
            border: "none",
          }}
          height="100%"/>
</div>

Thats the Java script:

const iframeWrapper = document.getElementById("voty-iframe-wrapper");
window.addEventListener("message", (e) => {
if (e.data?.key === "votyHeight" && iframeWrapper) {
iframeWrapper.style.height = ${e.data.value}px;
}
});

[Jnix284]

Hi @TLeue no problem, happy to help.

What I mean by separating the javascript is to add it to the page head HTML instead of via the rich text editor.

Here's a video of how I have it configured using the rich text module.

I didn't check in the video, but I did check mobile view afterward and it seemed to work as expected - let me know if that's not the case, this could have more to do with how the theme is coded than how the iframe is embedded.

[TLeue]

Hi @Jnix284,

thanks for the video. Unfortunately it doesn't work as i hoped it would.

I've copied the code you've embedded. If i integrate it exactly like that, the desktop version is totally wrong. I have to make it bigger, but when i do that the mobile version gets messed up, because it's not responsive.

Whats wrong with the code i've sent you in my response above? Why can't i just integrate it exactly like that?

Thanks again!

[Jnix284]

Hi @TLeue happy to help clarify:

iframes have to be coded to be responsive, the iframe you've copied isn't configure that way, but you can follow the steps here to make your iframe responsive.