Display data e.g. as iframe on a wordpress website

Hi there, how would you solve the following task I’m having:
An embedded form on my website feeds - once confirmed by the user - the entered data fields to a scenario (using a webhook) and then performing some calculations (using google sheets). In a next step, I’d like to display this calculated data (basically, a number) on my website (=the page that opens once the user has clicked ‘confirm’ on the form as of above). So my question is, how can data be fed back from a scenario to wordpress i.e. either embedded as iframe, shortcode or the like that then displays the data to the user. The wordpress-module offers to use API/Restfull calls to wordpress. Is this the only way forward, or are there any other, perhaps simpler ways? Many thanks for any hints.

The first issue is that your website needs to display dynamic content, based on the value of some other data.

There’s a great post on that here - it looks like Toolset Blocks are the way to go. They allow you to have content on your page that comes from custom fields.

Once you have that setup on the Wordpress side, you should be able to just use the Update a Post module to update your custom fields. Select Show advanced settings and look for Metadata (custom fields).

1 Like

There’s also other plugins apart from Toolset Blocks that provide dynamic content using custom fields … Advanced Custom Fields has a free version that might do everything you need.

@Georg Could you share more details of your exact use-case? It sounds really interesting!

You can DM me if you’d rather not share publicly.

1 Like

Many thanks for your reply and giving some directions.
I just tried looking at the wordpress-integromat plugin, but it seems to be not updated and a little buggy (according to the comments). So my first question is if there are any other ways to display dynamic content to wordpress, or at least there is any other way to connect integromat (make) with wordpress using restful API.

Regarding use-case: Website visitors enter some data through a webform and then are redirected on to a Thankyou-page. This Thank-you page shall display certain information (=property valuation results) based on the initial values they entered into the form, and which requires some make-scenario calculations (using third-party services) and then be immediately displayed as dynamic content on the thankyou page the site-visitor is redirected to.
The calculation results the user is seeing on the Thankyou-page could also be displayed as some sort of iframe, of which the content gets created dynamically using some sort of ‘make-to-iframe’ or ‘make-to-custom-html-code’ module, which I can then dynamically insert into thank-you page (or any other, arbitrary page).

hi. i have actually built an entire front end for Make by using a webhook response and an iframe to pick up that response. You don’t need any plugins but you may need to adjust your logic. It’s a little involved but here’s the basics. Let me try and explain it…

The basic idea is when you trigger a webhook the browser will display the webhook response - so start the scenario with a webhook and end with a webhook response. This is brilliantly explained in this video

So if you watch that video and see how you can do it using the webhook URL, you can then embed the webhook URL in an iframe within an HTML block in Wordpress. When the Wordpress page opens , the iframe triggers the webhook and displays the webhook response.

The best way to do this is to keep everything as simple as possible when you start and then expand once you have the basics.

2 Likes

Neat solution!

Ref the Wordpress plugin comments - I believe that most if not all of those issues are resolved in the latest version of the plugin (1.5.5).

1 Like

Hello Lain, very interesting indeed, it seems like an acceptable way forward…just need to look how I could display webhook html data as an element inside my wordpress site: One question here (perhaps forward to Petr?) regarding the video: Let’s say I have dozens of users fill-out the form/booking list at the same time on ther website, how can I make sure each users sees only his ‘private’ webhook html response, and not the one of somebody else filling out the form at the same time? Do I need to assign some sort of ‘ID’ to each request (of the incoming webhook), and then assign/forward this ID to the browser (using the ?-parameter in the url) using the webhook response? Many thanks.

So scenarios run sequentially (ie they run start to finish). As you will only have one webhook there is only one way to start the scenario. If several people hit the same scenario at exactly the same time then worst case scenario is that some users might experience a minor delay - it’s unbelievably fast though. We have a large number of people using our system and it is never been an issue. If however you are expecting a HUGE number of people you may want to create a buffer where the info is added to a datastore… but in all honesty if you are expecting that number of people then this is not the right application for handling that.

as for the displaying response… the browser will display whatever is in webhook response. If you format the HTML properly then it will be a correctly formatted page within your website.

Create a really simple scenario, test it and then grow it… Start by creating a webhook and follow it immediately with a webhook response. in the webhook response simply put <h1>Hello World</h1>. THen get the webhook URL and get create an iframe which calls the webhook URL in the code block on your WP page. As soon as the page loads, you will see the Hello World appear on your page.

You can then start adding more complex items to the webhook response. Eventually you can create a full HTML page that is populated by different values.

1 Like

Many thanks for the quick response. I guess I won’t expect more than 10 people at the same time. So this means it can’t happen that one site visitor ‘sees’ the webhook response of another site visitor hitting the ‘enter’ button at the same/similar time instant? I’m not sure how the system (apache server?) can see/distinguish which webhook response belongs to which visitor, since the webhook url remains always the same…

The problem won’t exist because only one user gets processed at a time… If multiple hit at the same time then they will get queued… A “one out one in” type thing

1 Like

Ok thanks…I’m just wondering how the system/server can distinguish one user from the other when they surf the website at the same time…since the webhook will always have the same url → and the response being pushed back and displayed to all users at the same time. So it can happen when one user is looking at the response, the response could change on-the-fly since another user (on a different location) has submitted his data…?

OK… I was trying to keep it super simple but more detail is required. So the way we have done it is the iframe calls the scenario which renders the html form in the webhook response (as an aside… Using this method it’s really easy to pre-populate the form with existing data). So when users arrive at the page they see the form. Then the submit action of the form calls a second scenario (with a different webhook) which then processes the request and displays the desired response.

So the first scenario basically generates the form (so if 100 people arrive on the page at the same time, it doesn’t matter as it is read only). The form then sends the info to the second scenario. If you had 10 people submit the form at the same instant then make would buffer the responses and they would be processed sequentially one after the other.

Does that make a little more sense?

1 Like

Thanks for explanation…so if 10 people submit the form at the same instant (using the same webhook), how can it be assured that each single person only sees exactly the webhook response that he triggered (rather than seeing the webhook response of any of the other 9 people). Is there some sort of ‘Browser or iframe session ID’ related to each webhook that assures each user only sees the webhook response that is related to his ID? Thanks a lot

Sequential processing. Make will only process one request at a time… ie it won’t process one request until the previous one is complete. At any one time there will only be one users details in the scenario. Make will queue the others.

The only reason this would be an issue would be is if your scenario was really slow but you can cross that bridge when you come to it. Make is astonishly fast

Ok thanks a lot, I’ll give it a try and get back in case of questions!