Remote Content

Embedded iFrame

Embed an external page (full content, also style, javascript, ecc) in a boxed iframe in your page.

Removing the border it will appear styled and working like will be a native content.


Web Scraping

Extract contents from other site to integrate in yours.

Set the URL page you want to scrap and enable "Incorporate in page".

Automatically your server will fetch the entire Body of external page and put it into Widget body.
If you need only a single element of the page you can filter it setting a "Tag, ID or Class" related to wanted element using jQuery selector syntax

Here some example of selector you can use:

  • Tags: for example "quote", "header"
  • ID: for example "#my-content" , #footer
  • Class: for example ".block", ".site-body > .title"

Read more about selector syntax:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

If there are several element selected with setted selector, you can define how many element will be display:

  • only the first
  • all
  • the first ten results

EXAMPLE

Check here a scrap from Wordpress site and Elementor site:
https://www.dynamic.ooo/demo/remote-content/

NOTE

  • Some site will block this technique.
  • Pay attention to original site data credits.

Rest API

Fetch JSON data result from remote service and print formatted content.

Set the URL of Endpoint you want to query, enable "Incorporate in page" and enable that return datas are formatted in JSON.

You can manage return data as:

  •  a Single structure 
  • a repetitive block of an Archive with a initial structure
The HTML representation of data is extreamly malleable, you can construct the main block with dynamic contents using Tokens.
EXAMPLE
{"id":3798,"date":"2018-08-17T09:06:05","date_gmt":"2018-08-17T07:06:05","guid":{"rendered":"https:\/\/www.dynamic.ooo\/?post_type=dynamic_widgets&#038;p=3798"},"modified":"2019-03-16T20:18:46","modified_gmt":"2019-03-16T19:18:46","slug":"remote-content","status":"publish","type":"dynamic_widgets","link":"https:\/\/www.dynamic.ooo\/widget\/remote-content\/","title":{"rendered":"Remote Content"},"excerpt":{"rendered":"<p>View DEMO<\/p>\n","protected":false},"author":3,"featured_media":3718,"parent":0,"menu_order":32,"template":"","_links":{"self":[{"href":"https:\/\/www.dynamic.ooo\/wp-json\/wp\/v2\/dynamic_widgets\/3798"}],"collection":[{"href":"https:\/\/www.dynamic.ooo\/wp-json\/wp\/v2\/dynamic_widgets"}],"about":[{"href":"https:\/\/www.dynamic.ooo\/wp-json\/wp\/v2\/types\/dynamic_widgets"}],"author":[{"embeddable":true,"href":"https:\/\/www.dynamic.ooo\/wp-json\/wp\/v2\/users\/3"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dynamic.ooo\/wp-json\/wp\/v2\/media\/3718"}],"wp:attachment":[{"href":"https:\/\/www.dynamic.ooo\/wp-json\/wp\/v2\/media?parent=3798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
  • Representative HTML code demo:
<div>
	<h3>[title.rendered]</h3>
	<div>[excerpt.rendered]</div>
	<a href="[link]">Read more</a>
</div>

See the example result of an API call:
https://www.dynamic.ooo/demo/remote-content/


HTML Manipulation


  • Fix Relative Links, If scraped html code has relative link this setting will fix them transforming in absolute link.
  • Target Blank Links, if links are external add automatically a target _blank attribute to link tag
  • Fix Lazy Images src, if remote site use data-scr lazy load method then it convert to normal src on images tag

Cache

To perform a better page load is important to enable Cache, so your server will not fetch remote contents on every page load (summing time of remote page load + local page load) but will respond quickly with cached result that will refresh on every setted time expire limit.

Still need help? Contact Us Contact Us