Embed HTML via database connection?

Ask the community
,
1

Hey guys, I’m wanting to embed a twitch stream into a web page which is easy enough but I’d like it to dynamically update the link depending on the page (Generated by a dynamic category page) linked back to a database which has a link to their twitch page.

I cannot see how to change the content or link it to a database. is this currently possible or is there a potential work around for it?

2

Hi dr. Evil,
not sure I got the exact scenario.
but in general, you can use the HTML component to host the twitch embed,
and then interact with it using messages.

you can code the logic that sends messages to the HTML component, and the logic that reads these messages and reacts to them.

you can read about the HTML component here:

also - try to look for info on this component by searching the forum.
others have used it as well.

good luck!

3

Thanks so much for you help. I’ve been doing some searching and reading and this is what I’ve gotten to far.

I’ll need to pull the URL from the database (not sure how to do this yet) then use PostMessage to send that URL into the HTML box?

Also I’m assuming the PostMessage command goes into the Page Code section?

1594×867 211 KB

edit:
So i found this LinkableMixin - Velo API Reference - Wix.com Which appears to allow me to pull a link from an element. I’m confused by the examples. One one part it says the syntax is
let url = $w(“#myElement”).target; // “_blank”

But on another part it says it’s
get link(): string

But also when settings the element target is it the ID I use? for example an image with the id image1 with a link to Twitch

The command would become let url =$w(“#image1”).target; and the output of that command (Which is Twitch) should be saved the the variable $w

4

you’re on the right path.
you can read this post from Andreas: https://www.wix.com/code/home/forum/show-off-your-work/communicate-with-iframe-source-code

there’s a nice example there.

5

I think I edited my post while you were typing but I’ve figured it will be easier to pull the link from an existing element on the page:

So i found this https://www.wix.com/code/reference/$w.LinkableMixin.html Which appears to allow me to pull a link from an element. I’m confused by the examples.

One one part it says the syntax is
let url = $w(“#myElement”).target; // “_blank”

But on another part it says it’s
get link(): string

But also when settings the element target is it the ID I use? for example an image with the id image1 with a link to https://www.twitch.tv/theporcelainlily
The command would become let url = $w(“#image1”).target; and the output of that command (Which is https://www.twitch.tv/theporcelainlily ) should be saved the the variable $w

When I use that commend it displays an error “Url is undefined”

963×234 10.5 KB

Also, is in the page code where I put this stuff?

6

let me verify I understand the exact behavior you want to get.

you want to:

  • embed a twitch stream component in your page.
  • have a link to a twitch page somewhere on your page
    what I am missing is where exactly on your page you want the link to be? do you want the embedded twitch component itself to act as a link to the twitch site? or do you want to have some other component expose that link?
  • set the URL for that link based on the specific dynamic page the user is in

please clarify, and I’ll be able to help.

7

So on the page, I have some text and that text has the URL attached to it as it’s link (Which is pulled from a database) I want to query that text for it’s link then feed it into the HTML box to embed the stream

8

So on the page, I have some text and that text has the URL attached to it as it’s link (Which is pulled from a database) I want to query that text for it’s link then feed it into the HTML box to embed the stream

9

OK there are two parts to this.

  1. get the link
  2. send it to the HTML component.

part 1 is easy - just use the “.link” property of the element that has the URL to get it.

as for part 2 - you need to use the HTML component’s postMessage() to send the link to it, and then use that information inside the HTML component by listening to that message and doing something with it.

read the documentation for postMessage() here: HtmlComponent - Velo API Reference - Wix.com

there’s a small example there on how to do it.

also, there are some form posts about this as well - try searching the forum.

good luck!

10

Again thanks so much for your help.

“part 1 is easy - just use the “.link” property of the element that has the URL to get it.”

I have no idea how to do this… at all…

11

bump

12

OK, let’s assume you have an image component called image1.
to get it’s link, you do the following in your page code:

$w.onReady(function () {
	//get the image's link URL by selecting it and getting the 'link' property
	let URL = $w("#image1").link;
	console.log("image1 URL is..." + URL);
});

once you have read that URL, you can move on to the 2nd phase and pass it into the HTML component.
but let’s see the first part working and continue form there.

good luck!

13

Fantastic, thanks so much! Ok. So as far as testing goes, I need to retreive that data and output it to somewhere, if it was CMD or unix a simple echo “$w” would work but here I’m not sure?

console.log sounds like it’s a log file of sorts, I’ll check if it’s in there.