[Resolved] iframe/embed code integration with elementor

[Author]

Posts

[CaseyK4294]

Tell us what you are trying to do?
Add dynamic embed code/iframes. I added the embed code in a the text editor of the WYSIWYG custom field type and can see that it works when I click over to the visual editor. I then use the elementor text widget to call the code in dynamically but it doesn't render. Instead it removes a piece of the code and then shows the text of the remaining portion of the code itself instead of the widget. Do you have any resources on how to accomplish this?

Is there any documentation that you are following?
Cannot find documentation specific to what I am trying to do. I did find these two links, but I am not sure they apply to what I am trying to do:

https://toolset.com/forums/topic/how-to-add-dynamic-url-to-src-within-iframe/
ttoo
Is there a similar example that we can see?
The screenshot attached shows the widget/iframe when placed directly into the post template using Elementor's HTML widget, but the HTML widget is not dynamic and doesn't pull from toolset. Right above it is what it looks like when I try to pull the iframe code using the Elementor text widget pulling dynamically from TS field.

What is the link to your site?
hidden link

[Shane]

Hi Casey,

Can you try adding the Toolset Shortcode for the field into the elementor text widget.

The Toolset shortcode for the field should be [types field='my-field'][/types] where my-field is the slug of the field.

Please try this and let me know if it helps.

Thanks,
Shane

[CaseyK4294]

Sorry, this link didn't copy into my original post and I didn't want to submit an additional ticket:

This is the methods I am trying now:
https://toolset.com/forums/topic/add-an-iframe-to-elementor-using-dynamic-url/

I tried including the shortcode you shared here, but I am not sure if this is how you meant to use it. Screen Shot attached.

[Shane]

Hi Casey,

Thank you for the clarity. Based on the code Waqar had provided you will need to output the "raw" url. So you will need to use your Types field like this.

[types field='my-field' output='raw'][/types]

As you can see i've added the output='raw' attribute. This should now work for you.

Thanks,
Shane

[CaseyK4294]

This doesn't help. Maybe I should start at the beginning. I want three separate sections on my template page that will dynamically call in the code for an iframe/embedded code section. When I use Elementors regular code widget, the iframes work, but I want to be able to call the code in dynamically. I tried using a text widget with a WYSIWYG custom field, but that didn't work, so I tried the solution linked above but that isn't working either.

[Shane]

Hi Casey,

Perhaps if I have a look at your setup I will be better able to help.

Would you mind providing me with admin access to the website so that I can have a look at this for you ?

The private fields will be enabled for your next response.

Also please send a link to the page where the iframe is to be displayed.

Thanks,
Shane

[Shane]

Hi Casey,

What I see in the Types custom field is this below.

<script type='text/javascript'>
var ws_wsid = 'g71568fd22a224d7893b1416e6d0e4604';
var ws_address = 'Somerville, NJ';
var ws_format = 'tall';
var ws_width = '100%';
var ws_height = '350';
</script>

<style type='text/css'>#ws-walkscore-tile{position:relative;text-align:left}#ws-walkscore-tile *{float:none;}</style>
<div id="ws-walkscore-tile"></div>
<script type='text/javascript' src='<em><u>hidden link</u></em>;

Confirming that this is what is being used to generate the Iframe as this is essentially just script tags.

Please let me know.

Thanks,
Shane

[Shane]

However I see that you are using the dynamic field option from Elementor.

Some elements may not work when using the dynamic field option because elementor will actually strip out some of the HTML from the output in the dynamic field option.

What you need to do is call the field directly with our Types shortcode in order for it to work correctly.

For e.g I was able to get your map iframe to display with .
[types field='great-schools'][/types]

Please let me know if this helps.
Thanks,
Shane

[CaseyK4294]

My issue is resolved now. Thank you!