[Resolved] Add an iframe to Elementor using dynamic URL

[Author]

Posts

[Greig Neilson]

I want to use a Types field to generate a URL for an iframe, and display it within and Elementor template.

I can display the iframe successfully using the Elementor shortcode widget. But when I try and make it dynamic it fails.

I tried following the advice in this ticket but I can't fully understand the solution: https://toolset.com/forums/topic/how-to-add-dynamic-url-to-src-within-iframe/

Many thanks!

[Waqar]

Hi Greig,

Thank you for contacting us and I'd be happy to assist.

Can you please share temporary admin login details along with the link to a page where this iframe's code can be seen? I'll be in a better position to guide you accordingly.

Note: Your next reply will be private and though no changes will be made on your website, please make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar]

Hi Greig,

Thank you for sharing the admin access.

The way Elementor's shortcode widget processes the before and after content, it converts the HTML code for the iframe into special characters or HTML entities.

Also using a text widget to mix the field's shortcode and HTML also doesn't work, since the builder seems to strip the iframe code.

<iframe src="[types field='website-theme-demo-url' output='raw'][/types]"></iframe>

An alternative can be to register a custom shortcode that can convert the field's data into an iframe tag and return the output.

Example:

add_shortcode( 'convert-field-to-iframe', 'convert_field_to_iframe_func');
function convert_field_to_iframe_func($atts) {
	$a = shortcode_atts( array(
		'field' => '',
		'width' => '300',
		'height' => '300'
	), $atts );

	$field_URL = types_render_field($a['field'], array("output" => "raw"));

	if(!empty($field_URL)) {
		return '<iframe src="'.$field_URL.'" height="'.$a['height'].'" width="'.$a['width'].'"></iframe>';
	}
}

The above code snippet can be included through either Toolset's custom code feature ( ref: https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ ) or through active theme's "functions.php" file.

After that, you can use this shortcode in the Elementor template's text widget like this:

[convert-field-to-iframe field="website-theme-demo-url" width="400" height="600"]

Feel free to adjust the values for field, width, and height, as needed.

I hope this helps and please let me know how it goes.

regards,
Waqar

[Greig Neilson]

Thanks, Waqar, works perfectly!