00:01 This is not a trick. Over on the left side here, I have a Google sheet with one cell and it says headline from a sheet.
00:09 And on the right side I have a website called embed from sheet.card.co. And at the top it says Headline from a sheet.
00:17 Why is that? It's, it's because I'm embedding text from a Google sheet into this website, and all I have to do in order to change this headline is to change the data in the spreadsheet.
00:29 So here I can say this is a headline from a sheet. Now if I refresh the page, it automatically will adjust the headline at the top.
00:40 This is a headline from a sheet. Now this is pretty cool, right? I hope this is blowing your mind. And it's not a trick at all.
00:49 It is quite simply we are using a little bit of JavaScript, which I've already written for you, a little bit of app script as well, which I will go through in this video for you.
01:02 And you can get this exact code, you can get the html, the Java script, the code, everything is all here in this Google sheet for you.
01:14 So how am I doing this? First off, let me go to the back end of card. So one, one point is I'm using card c a r r d.co.
01:25 You can go to card.co/camy and sign up if you want. It's like $19 a year. I'm, and here's the backend of it.
01:34 I have an embedded code here on a little bit of styling, a little bit of H one and some Java script.
01:42 Maybe all you want from this, if you already have your own website and you have the ability to embed a little bit of, of html and JavaScript is you probably want just the JavaScript and the and that's it, right?
01:55 The he, the HTML is pretty simple. We're just doing a span inside of an H one and we have the ID headline.
02:01 And then in the script we have our url, which we're gonna be pinging, which is a web. We're gonna deploy that from our Google sheet, which I'll show you in a second.
02:13 And we fetch that and we then get the response. We do a little bit of data here and we get the text document dot create elements span.
02:24 We go look at where the headline is, headline dot a pen, child text. So we create a little bit of text, right where that span ID equals headline.
02:35 Okay? That's it. That's the whole JavaScript here. The magic I think is done on the Java not JavaScript side on the app script side.
02:44 So that's it for the website. If you have your way, a way to embed html and JavaScript, then you have all of it here.
02:53 There's the script part. Here's the HTML part, and then you have, I'd have a little Bit bit of styling here, and that's just like my personal choice cause I wanted to make it H one.
03:03 All right. That's card super easy. You can have a contact form, you can have some buttons, you can have some more text if you want to add more text and just change your headline also.
03:13 This is great by the way. I'm gonna pause this video right now. This is great. If you just want to enter a little bit of like data, like a number inside of a website and you don't know how to like, or you don't want to embed the entire Google sheet, you just want the text or the number from it, this is a great way to do it as well.
03:33 But in this particular case, I have the whole span of a headline, but you can definitely use us to, I embed a number.
03:39 Alright, that's it for the website part. Let's go over to the cript part. I'm gonna make this, try to make this full screen so we can see this a little bit better.
03:49 Alright, what is going on here is on the backend, we have one do get function. We use this do get, which is a, a little bit advanced function, but it is a typable function, meaning on Google side it's called a simple trigger.
04:08 DoGet well, Git is a part of getting data from a website. There's get, there's Post, if you want to send data to a website, there's update, there's delete.
04:18 Those are other options you can do. But get is just grabbing data from a website and what that website we already created is doing and that JavaScript is doing is saying Go to a URL and get whatever it's gonna give you.
04:33 And this is gonna give it whatever we have in the sheet. And literally it's two lines of ABS script. If you are unfamiliar with ABS script right now please go take spreadsheet Automation 1 0 1.
04:47 If you're watching this video, you are a member of Better Sheets. You're either watching this as a video or you're a lifetime member.
04:53 Either way go. You have access to spreadsheet, automation 1 0 1, the course and all of the videos involved there. And that will help you step by step understand what I'm about to do right now, which is variable data.
05:08 Meaning we're just gonna get a variable and we're gonna call it data. Get the spreadsheet app, get active spreadsheet, get the entire file here.
05:15 We're gonna go grab the sheet by its name, which is data. We're gonna go to the range of a one and get whatever the value is there.
05:23 That is all we're doing right here is we're just getting the value of whatever is in a one. And then whenever this do get function is called, we're gonna create text from that.
05:35 We're gonna change that data to string. Right here. We have this two string, and then we're gonna create a text output.
05:43 And that is it. We are gonna get, we're gonna get that URL by hitting Deploy new deployment. I think I already have one.
05:52 So if you have to select your type, you say web app the other ones you don't have to do right now, but Just, just Web app.
05:58 If you're doing this for the first time, hit Deploy. It might take a second or two, but here we go.
06:04 We have a web app url. You're gonna copy this string here, this entire string. Now what's gonna happen is I just go right to that u URL alone.
06:16 I do nothing else, nothing happens. Okay? Cuz I'm signed in. Let's do an incognito tap. That's the problem. It's not going to happen.
06:24 It's not gonna work if you are signed in, but everyone outside is gonna be able to execute this. It's such a weird thing.
06:31 But I can go to an incognito mode and it says, this is a headline from Sheet, right? It is taking that content that is inside of the sheet in that A one, and it's just giving it back to whatever is calling this url.
06:44 Now, this URL is pretty crazy.  It is a Google url. It's a Google server. I want, I can't even tell what this like is, but it works, right?
06:55 This url, every, the entire URL is used and we're grabbing whatever data is there. Now, let me show you this, this will change if I change the text here.
07:07 This headline from a sheet, ain't that cool, right? I just added that extra line. Now we refresh the URL and there's the text.
07:20 This is, this is what's powering that website that's embedded with the text, right? This url. And what that URL is doing is it's just going to a one of our data sheet and grabbing the string and saying, we're gonna return whatever string is in here, whatever value is in here.
07:37 That is it. We can have a number, we can have a string of text, we can have one word, two words.
07:42 We can have a whole paragraph. Isn't that cool? So in order to use this, I think the last thing I have to show you is once you have that url, once you have it, put it in here.
07:52 Html a sorry, B one, paste it into here. And I've already written you all of the styling and the H one, the html and the script here.
08:05 If you just need the script, you only have to take part of it. But I've had, I had added in here, U URL goes here, and then I actually put it in here with substitute.
08:14 So you can just click once, select this cell, copy it, and now I have all of the text you need with the URL in the proper place for the JavaScript.
08:25 Now, again, you don't need to use all of the H M L and the styling, you might just want the JavaScript portion.
08:32 Totally fine. Copy this and use it as you wish. Obviously you're gonna need your own url. So what you're gonna need to do is you're gonna have to copy this sheet and you get both the data A one, this is a one cell sheet.
08:48 You get the HTML sheet, which gives you this HTML and the ability to add your url. And what you're gonna do is You're gonna go to Extensions app script, have this already.
08:59 There, don't have to change anything in the do get, just hit Deploy new deployment. And that is it, right? Deploy maybe select the web app, deploy, use that url, put it into B one.
09:16 Yeah, B one here. And there you go. Now you have a way to embed any data inside of your website.
09:23 Now how you use this, let me know how you use this. It's really up to you if you're gonna use this for some numbers, if you're gonna use this for some text, some head, if you wanna do a b testing of headlines day to day, and you don't really want to update the code all the time some issues that might show up is, I don't know if you could tell from this video, but if I refresh this page, it is a little slow.
09:49 That doesn't mean that the webpage itself is slow. The webpage itself card is fantastic and it's fast and it's great, the the, but it adds a little bit extra time to get that text.
10:01 So that text will pop up moments after you refresh this page or, or go to this page. So that's one issue that I found.
10:09 And I always thought, I used to do this years ago with something like Sheet Zu or Sheetzy where I could turn my we Google Sheet into an API and use that API on a website.
10:19 And I always thought, oh my God, these services are so slow. What I didn't realize is that it's probably Google servers here.
10:25 And in this case, we are not using intermediate service. We're not using Sheetzy, we're not using Sheet Zu, we're not using any sheet to api.
10:33 We are, we are, we have created our own sheet to API inside of a Google Sheet, inside app script, and it's still slow, right?
10:41 So we're trying as best we can to go to Google servers, but Google servers aren't as responsive as they as if we had our own server somewhere on some hard metal, right?
10:51 So the reason why that might pop up late is because it's going to Google server. It's, it's loading the webpage, loading the html, loading the JavaScript, and then going to that page and coming back and saying, oh, here's the data.
11:04 So it's a bit slow, little bit slow and you'll notice it. Thanks so much for watching. Again, please email me anytime you use this.
11:13 I'm happy to hear how you use it. How will you implement it if you implemented it on a card? Use card.co/kafi card.co/kafi and oh, <laugh>, I th I think, oh, try, I think it's try.card.co/kafi.
11:32 We'll get you there. There you go. Try dot card. Yeah, that'll get you card. Again, it's very, very cheap. $19 a year for some amount of pages.
11:44 I'm paying much more than that. Not much more than, actually, I'm not paying that much more than that, but I have a hundred pages that I can use.
11:50 I love card. It's fantastic. I'm using it all over the place. Enjoy this video of how to embed a headline in a website.