81% OFF online library of tutorials for mastering Google Sheets
This tutorial is not available for free users. Please purchase a subscription to view this tutorial.
Hey there stranger!
Please sign-up or sign-in to watch this tutorial.
Embed a Headline in a Website from Google Sheets
About this Tutorial
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.
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: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: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: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: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?
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.
Sheet Stories / Video Notes + ADDED: Email Notifications
ChatGPT Clone in Google Sheets Part 2
Add Title Case to Google Sheets
Show Sheet Tabs Based on Edit
Why Different Cell References in AI Integration in Sheets?
Getting Started Coding in Apps Script
Seek Errors When Coding Apps Script
Think Like a Programmer: Develop The Mindset of an Apps Script Coder
Embed a Number in a Website from a Google Sheet
ChatGPT Clone in Google Sheets Part 1
Create Navigation Like A Book or Presentation
Add Click Tracking To Your Google Sheets | Bitly in a Google Sheet
Hold a Giveaway Raffle in a Google Sheet
Capture Emails from Website Form to a Google Sheet (Without Zapier)
Embed a Headline in a Website from Google Sheets
Quickstart Tutorial OpenAI API in Google Sheets
Create a new Spreadsheet from just a Name in a Sheet.
Bjarne Asks: Can I show the Last Time of the Last Edit in a sheet?
Email Yourself a Cell from a Google Sheet, Every Day
OpenSea Data Inside Sheets
Create an Email Campaign Stats Calculator
Twitter App Clone in a Google Sheet
Dylan Asks: How to Automatically Delete Rows If Cell Contains Value
Highlight Row as You Move Your Cell Selection
Create a Timer with Apps Script
LinkTree in a Google Sheet
Password Protecting Data In a Google Sheet
Automatic Weekly Backup of Google Sheets
Create a CPM Custom Function (Create Better Calculators!)
Move Entire Row when a Cell is changed to "Yes" - The $75,000 Google Script
What Can You Automate in Google Sheets? Every single trigger available to Google Sheet users
Sync Two Tabs Without ImportRange()
Google Sheets Stories? No! But we'll add timestamped video notes to your google sheets.
Password Protecting Data In a Google Sheet Part 2 The Basics
Learn to Code in Google Sheets, For Programmers
Benoit Asks: How to Convert Case
Add a Checkbox to Turn on Dark Mode
Write Your First Script
Find Keywords in Any Column. Create quick search dropdown to find keywords
Basic CRM - Add a Powerful Script To Move Row Based on Status
How To Improve: 1,000 Business ideas: Business Idea Generator
Let's Make a Bookmarklet!
Troubleshooting Bitly in a Google Sheet Script
Unique Features - Design a Better Dashboard Part 2
How To Set Up Stripe Webhook to Google Sheets with Google Script
How to Edit a Macro
Sheet Stories / Video Notes + Clear 24 Hour Old Videos
Add A Timestamp to Task Lists (without Now Formula)
Make your Custom Functions Like Native Functions | Custom Function Autocomplete
Create a Changelog Between 2 Cells Custom Function | To learn Double For Loop
New Syntax for WhatChanged Formula in Google Script
How to Record Macros
2 Ways to Delete Lines Quickly (CAREFUL, it's a script!)
Deep Inside Dark Habits Google Script
How to Trigger Macros Daily
5 Ways to Create Coupon Codes | Create UUIDs
Create a Radio Button From Checkboxes Using Google Apps Script