[Resolved] How to add dynamic URL to src within iframe?

[Author]

Posts

[Joe H.]

Tell us what you are trying to do?
- I want to display on front end an iframe in which the src is populated by a toolset custom field, so that each single post will have the same iframe but pointing to a unique url. (These are fundraising pages (custom posts) where the iframe shows the current progress of the specific fundraiser being presented on that page).

This is the original code for one such iframe, generated by Donorbox:

<script src="hidden link" type="text/javascript"></script><iframe src="hidden link" height="93px" width="100%" style="max-width:500px; min-width:310px; max-height:none!important" seamless="seamless" name="donorbox" frameborder="0" scrolling="no"></iframe>

Each instance of the iframe for each fundraiser is identical except for the URL, so...
I've made a toolset URL custom field so that now in my test example the code is this:

<script src="hidden link" type="text/javascript"></script><iframe src="[types field='db-progress-meter-url' output='raw'][/types]" height="93px" width="100%" style="max-width:500px; min-width:310px; max-height:none!important" seamless="seamless" name="donorbox" frameborder="0" scrolling="no"></iframe>

When I place the above code into the wordpress wysiwyg text editor, it renders properly

However when I place the same code into a Toolset wysiwyg custom field and then add this custom field to my post template (created using elementor) nothing renders on front end.

I am probably going about this the wrong way. Is there a simpler way? Very open to suggestions.

sample post: hidden link

[Shane]

Hi Joe,

Thank you for getting in touch. I've testing this on my end without elementor and it works fine.

What I want you to do is to use that same wysiwyg field but without the Elementor template. I just want to see if it renders on your side from just the WYSIWYG.

I do however see on your page that you sent that the iframe is rendering but as you said its working with the default wordpress editor field so i'm assuming this is the field that it was added to.

Please let me know.

Thanks,
Shane

[Joe H.]

Shane, do you mean I should try adding the field to an Elementor-built page using say, a text widget, that dynamically points to the TS field, but do so by simply editing a page or post directly instead of adding this field to a page or post template (which I've already tried)?

If so, I've done that and still the TS field does not render at all. Where the TS field should be I just get an empty elementor div.

Additionally, if I simply add the TS shortcode to the native wordpress wyisyg text editor (i.e. on a non-elementor page) using 'Fields and Views', it also does not render.

You're correct: on the test page I linked to, I was demonstrating how the code renders correctly when added via the native wordpress text editor. That's what you're seeing on the front end. Below that should have been the TS version of the same code. But its not rendering. Just an empty div.

[Shane]

Hi Joe,

That is strange as it renders on my end.

Would you mind allowing me to have admin access to the website to have a look at this for you ?

It should be noted that it is coming onto the weekend and the forums will be closed at this time so if i'm not able to resolve this it will be Monday before we can pickup again.

Thanks,
Shane

[Shane]

Hi Joe,

It seems that you were using the Elementor custom field rendering blocks. However what I would recommend is that you use a regular text block and add the WYSIWYG shortcode to it as i've done here.
hidden link

Now you can see the field rendering correctly with the iframe.

Thanks,
Shane

[Joe H.]

My issue is resolved now. Thank you!