Hi,
Firstly, apologies I am not a ‘coder’ so please be gentle!
Secondly, apologies again! I know this has been asked and discussed a number of times on this forum. But with different opinions as to whether it is possible of not, and I have not found an easy to follow ‘complete’ answer.
I would like to embed a ‘widget’ with the following code on a dynamic page;
<script src="//partners.designmynight.com/pf/js?venue_id=YOUR_VENUE_ID"></script>
My dynamic page is linked to a database which has field with the venue_id, and I would like the code updated with the correct venue id
Many Thanks
1 Like
This is what you will need…
https://www.wix.com/velo/reference/$w/htmlcomponent/postmessage
Step-1: Get your wished data-value out of your DB.
Step-2: Send the wished data-value to the HTML-Component.
Step-3: The following HTML-CODE goes into —> HTML-Component.
<!doctype html >
< html >
< head >
< script type = “text/javascript” >
function init () {
// when a message is received from the page code
window . onmessage = ( event ) => {
if ( event . data ) {
console . log ( “HTML Code Element received a message!” );
insertMessage ( event . data );
}
}
}
// display received message
function insertMessage ( msg ) {
document . getElementById ( ‘demo’ ). innerHTML = msg ;
sendReturnMessage ( “Message from the HTML Component!” );
}
</ script >
</ head >
< body onload = “init();” style = “background-color:lightgray;” >
< h1 > HTML Component Test </ h1 >
< p id = “demo” > Message will go here
</ body >
</ html >
That will work for html-elements, but not for script-tags, I’m afraid. They are already executed when the message comes in and you cannot actively change script tags using onmessage().
But there is a solution: write an _use http-function, create all the html/head/script/body tags you need and return them. In html-component, use no code, just the url, which you set to domainname/http-functionname.
1 Like
@giri-zano Ok, now i understand, why i could not solve my HTML-ISSUE last time 
THANKS GIRI !!!
@russian-dima Took me a couple of years to come up with this solution, so no problem. And in Stuart’s case, he wants to add a query-param to the URL which you can set from code, something like:
https://mydomain.com/myfunction?vid=12345
And in the _use http-function, retrieve the vid-param, do a db-lookup, etc, whatever you want.
@giri-zano I never worked that way. I should take a look onto it one day in future . Nice idea!
@giri-zano I don’t see the issue with an HTML element as long as the script tag is inside the html and body of the HTML element? You could always create it dynamically, on load, using JavaScript? What am I missing? Exposing an API for this seems overkill.
@vervoortyves Perhaps Giri is right.
I was trying to solve a similar issue here…
https://www.wix.com/velo/forum/coding-with-velo/how-do-i-dynamically-assign-a-value-inside-an-html-element
And could not get it to work properly.
@Yvervoort. I know what you mean, when you say, that you are able to create new HTML-Elements, but unfortunately it did not work at the end, due to some inteferences between the implemented and the onMessage-command.
Read the shown post, i think it has some similarity (not sure).
@giri-zano @russian-dima this is how I would approach it. Either you received the Id, then you pass it to exec(). If you don’t, you get it from Wix via a postMessage request. So this wouldn’t fly?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body onload="init()">
<script type="text/javascript">
// Wix/iFrame messaging
window.addEventListener('message', async function(event) {
console.log("Let's see if we received a message...");
if (event.data){
console.log("Message received from Wix!");
console.log("event.origin: ", event.origin);
console.log("event.data: ", event.data);
var data = JSON.parse(event.data);
console.log(data.venue_id);
//pass the id
exec(data.venue_id);
}
});
</script>
</body>
<script type="text/javascript">
function init() {
var id;
//write a postMessage function to get the id from Wix
var new_script = document.createElement('script');
new_script.onload = function() {
alert("Script loaded and ready");
};
new_script.src = "https://partners.designmynight.com/pf/js?venue_id="+id;
document.getElementsByTagName('body')[0].appendChild(new_script);
}
</script>
<script type="text/javascript">
function exec(id) {
var new_script = document.createElement('script');
new_script.onload = function() {
alert("Script loaded and ready");
};
new_script.src = "https://partners.designmynight.com/pf/js?venue_id="+id;
document.getElementsByTagName('body')[0].appendChild(new_script);
}
</script>
</html>
How can i test it? Anybody who has a “venue-id” ??? 
What is this —> venue? I do not know that.
Fiddle says —> “Script loaded and ready” → seems to work well.