Build Your Own Net Promoter Score (NPS) Survey on a Web Site

Advanced

About this Tutorial

Create an embeddable NPS system on a web page.

Sheet Resources

Access Sheet

Copy Sheet

Preview Sheet

Featured Formulas

AVERAGE() DCOUNTA() ROUND()

Video Transcript

<div>0:01 Hello, so we're creating an NPS score for embedding into website, so this is what I created. It's better sheets NPS score, you can actually go to bettersheets.co slash NPS and see this score. 0:12 Uh, and you can also do the survey if you wish. Uh, and that is powered by a Google form and this number is powered by a Google sheet. 0:21 And this is all based on this line of code.

So we use function to get in our app script to create this, uh, code which just grabs literally one cells . 0:34 I want to walk through with the entire process of this, but I do want to tell you that you can get this spreadsheet itself. 0:40 Uh, I'll create a copy of it that you can get. And I included tailwind and ruby code here. The exact tailwind and ruby code. 0:48 That I use. So if you want to make any changes to this and use your own, if you use tailwind and ruby great, you can keep everything except just change out the URLs which I'll go through in a moment. 0:57 Umm.

You'll need a Google format and Google sheet for that. But if you are not Using ruby and not using tailwind, you will have to convert this. 1:07 But I'll try to walk through this a little bit. Umm. To tell you how this is working. Umm. Because this is a pretty cool. 1:13 And for those who are non technical. Umm. Maybe just a little bit of explanation will allow you to copy paste the. 1:21 Code and use it on your site. If you wish. If you have any issues or problems of course you can always email me anytime. 1:29 So this is a net promoter score. I will try as a user take the survey.

I'll click number 10 here. 1:34 How likely are you to. Thank for watching! Recommend. Better sheets to a friend or golly. Let's if I want to add anything else I can. 1:41 But let me just submit a number . Number 10. Great! Thank you for response and let's go back to the sheet and should be something different. 1:49 Now it is not 8.4 something is 8.5. So this changed automatically. How does this work? So as I mentioned before I have Ruby and Telling embedded here. 2:01 But the actual embedding is pretty simple. Let's go to our sheet and look at it.

We have our responses as a form. 2:09 Normal form linked to a sheet. And the sheet here is just the average of everything in B2. This is the score. 2:18 I did get the count just in case I wanted to show that as well. So again we'll go to extensions, Apps Script . 2:24 And over here in our code it is a function do get. We're getting the variable data which is spreadsheet app.getactive spreadsheet which is the entire file. 2:33 We're getting the name of the sheet by the name score. We're getting a1.

Just the value that it's in a1. 2:41 Then we're returning using content service dot create text output and we're converting that data no matter what it is to a string . 2:50 So sometimes it's number sometimes it's other things. We're converting it to a string and then we're returning this. We go up to deploy new deployment if you've never deployed it before. 3:02 Uh, you will have to execute as yourself anyone should have access and click deploy. It's going to give you a URL. 3:12 If you go to an incognito tab and use that URL, you should get just the number . This is 8.53.

This is exactly what we want. 3:22 Uh, and you can test it this way. Go to an incognito window. Take that exact URL. Just paste an URL bar and you're going to get an error bar. 3:29 So how does our website get that? Well, let's go back to our code and I'll show you. So this is uh the headline, current net promoter score and we're using a p div here. 3:44 Uh or paragraph and we're calling it ID number . And then in this script we're saying hey go to this URL which is the web app URL that we just deployed. 3:54 We copied that, put it right here. We're saying fetch that URL.

Then take the response. And turn into text. Get the text of that. 4:05 And then we are going to the text is the doc. So now we're creating a document.createElementSpan within this ID number . 4:14 Okay. And we're up pinned. Name that to here to that number . We're setting the attribute. This is just setting some uh styling here. 4:25 Again, you can change this if you use some other CSS other than tailwind. And this is just the top section. 4:32 Okay, we're just getting that number .

I've shown you that before in another video where you embed a number on sheet or you embed a headline in a website or the webpage. 4:43 This is all fairly much the same. But what about this? Other section down here. How likely are you to recommend better sheets in these buttons? 4:52 So what we're doing here is we just have again paragraph, a little div here, a little formatting of those text. 5:01 And then we're using Ruby to say create tenling.

Links one through ten where the link is, it's the form URL and it's a pre-filled form. 5:11 So you can get this link by going to your form. Let's actually go to our form, tools, manage form, go to live form and click this edit button or you can always edit the form. 5:26 Okay. Over here in the three buttons here we're get pre-filled link and we're just gonna put a number , actually let's put number 10 here, get link and what we're getting is a URL and I'll show you that here. 5:44 We'll create an HTML URL.

So this URL is the form forms your URL all the way up to view form and this probably looks normal. 5:57 This view form. It then has this and entry dot and a number here equals 10. So this URL in totality is saying entry dot this entry number . 6:11 So unique entry put number 10. So let's look at that in an incognito window. It is already pre-filling 10. So if we take that last element 10, change it to a 4. 6:22 It's gonna pre-fill 4 in. So now any number we put in here, at least 1 through 10, it's going to pre-fill that URL. 6:30 Uh sorry pre-fill that form from that URL.

Cool so that's what we're doing here is we're saying take this iteration 1 through 10 and iterate through all- of 10 of them create 10 links, uh create the little hover, uh shadows, there's some gaps here to just form these buttons here. 6:53 But that's what the Ruby is doing in this case. And you can do that in any number of other programming for um languages as well. 7:03 But that shows you that We're just going to iterate through this URL, this pre-filled link. So we're using pre-filled links here. 7:13 We're using uh embedding uh web app URL and a pretty simple one too.

I have to say if we go back up to extensions code. 7:22 This is fairly pretty much two lines of code in here. We're using the function do</div>