How You Can Add LIVE DATA to Your Webflow Site (Super Cool!) | Full Guide

on today's video i'm going to show you how to take real data in my case it's going to be sales data but it can be any data and implement it into your live webflow website it's going to be super cool stay tuned [Music] hey everybody what is up my name is ron segal welcome back to flux and this time i want to share something really really cool and actually quite advanced that you can do with webflow without code and so and more than just show you kind of a tutorial of what i did to implement real live sales data in my website i want to show you how i troubleshoot problems because i didn't really know how to do this until a couple of days ago and i struggled with some issues that i i want to show you how i solve them so that maybe you can solve your own problems and do whatever you want to do in your webflow website so here's the gist we recently uh put up a new website for fox academy and i wanted to use real student data here so you can see the number of students we have in every program this is the webflow master class this is for example the 10k website problem website process and you can see we have different different students photos but also a number of students that is constantly updating as people purchase now originally and some of you noted in the design case study that we have for this website by the way if you didn't see the case study watch it here um originally when we put the website live i i didn't thought about i didn't think about connecting it to the real data so basically what we did is we took kind of a static number and we put a counter so that you know every second the number will grow and kind of gives you the the feeling of people joining but as some people commented i didn't really feel good about it because it was kind of fake even though the original number was true the numbers just randomly went up every second and i wanted this to be real and so i went ahead and i did this and let's see basically how i did this so we're running our courses on a platform that's called teachable that's basically where we host our courses and i basically knew that i can probably connect teachable through using zapier and zypr is kind of a tool that connects a lot of other no code tools to webflow so here's the way that i i wanted to set this up and i'll show you where i struggled the first the first thing that you want to have is you want to have a cms collection for the courses because for each one of them you want to have kind of a field for the number of students so you can pull that number and use it and this field you can update it through a zapier right so basically i went into zapier this is my zapier account and i've created a news app called update website with student number and this is the trigger so this is what when something happened when a new enrollment in teachable happen you do this and here i've set up a condition because we have three programs and so basically it sets up that you know let's dive into this let's do edit here so basically if the name of the course is webflowmasterclass run this and this basically kind of splits the zap into the three cases depending on which course somebody is enrolled into now basically the way that zapier works is there's a trigger if something happened then you do something so initially what i wanted to say is you know if somebody purchases let's say the webflow master class you go ahead and you increment this number with one but then i struggled because basically when you go ahead and you input the number in the you know in the zapier here in the update live items you can't use the same number plus one you need to just tell them what is the new number you can't kind of run a mathematical operator on it and so basically that's where i was stuck i didn't know so how do we pull that number increment it and then bring it back inside the database i didn't really know how to do this so at that point i basically wrote a support ticket to zapier i told them here's what i want to do but i don't understand how to pull the number from webflow so that i can update it and then bring it back basically they told me that zapier has something that's called zetabear zapier zapier storage which kind of operates as a database like a medium you know a database that lives within zapier and you can pull data from it versus you know webflow where you can't pull data you can just in input data back to it so basically i had to do kind of a setup which is create this zapier storage with three rows in it for each one of the courses with initial number and then what happens is that we have kind of like if the trigger happens you go into this zapier storage which is basically this one and then you go into the relevant key in this case wfm stands for webflow masterclass increment it by one and then we have the updated number so that we can go into webflow of course we choose our account we choose our our project we choose our collection and then which is the field that you want to update and here in the number of students we basically take the number that we've updated right here and we update it with the new number so basically after doing this when the zap runs this basically updates the number in the cms collection all right so now basically what we've done is we've updated this custom field here now let's see how i've implemented the custom field basically a custom field you know it would be very easy to put it inside the website however well first let me show you how i did this and then we'll see what my problem was so basically i went here into the website and here into the number of students i've put here as you can see in the place where i want the number to be i've put in a collection of the courses and in each page i basically filtered and you can see it right here on the right i filtered for the relevant course so in this page because this is the page for the webflow masterclass i only want to see the item that its name is equals the webflow master class and obviously this is different in every one of the courses but then i had a problem because the field here is called a number this is just numbers however i wanted the numbers to have kind of a comma separator you know usually when you write numbers after three digits you add a comma but the number field here which we've updated can't have commas because this is just a number field so i was like how can we take this number and we can add this comma and i didn't really know how to do this so i did what i did what i usually do which is google use google and just google my problem which is in this case webflow add comma to numbers field basically this is what i googled and i found out that you know even in 2016 so four years ago people already had this problem um and it wa there is no kind of built-in solution in this however you know dave here from webflow actually gave the solution so basically you create a very very simple um function that you add to this to the custom code of the site so basically there's a function that when is run is just adding the the coma to the to the string and so i've added this to the site header and then instead of just putting in the number inside as a text inside the you know inside the website where's my webflow website right here all right so that's why in here instead of adding the number i'm adding a custom code and in this custom code basically what it says is run this function quite like dave said here basically i rewrote this with the value that i wanted so in this case it's pulling and you can add data from the cms from in into custom fields so in our case we want to pull in from the cms the number of students so we run this function right number with commas run this function on number of students and that's it just write it to the document and when you put it basically the end result is this it's just going to run write the number but it's going to add the commas so that's basically it now i've got a number that updates itself regularly every time somebody purchase and again this is different on each one of the pages and yeah and it's now connected basically to teachable every time teachable will have a new enrollment my webflow website is going to be updated automatically and this is really really fun and brilliant i hope that you're going to be able to use this in your own website we're going to do a really really deep dive into the web flow build of this website because there's tons of other cool web flow stuff that we did with this i'm not sure when i'm going to do this because i want to do this live to interact with you but um i need to figure out a good time to do this live with you i don't want to just upload a normal video for this anyway hope this video was useful if you want to learn more about webflow make sure to check out the webflow master class in the link below and i will see you on the next video

Channel: Flux Academy

Views: 33,726

Keywords: live sales data website, webflow, web design, live data, webflow live data, webflow live number, web development, website builder, tutorial, web design tutorial

Id: L2ZKaEnhXas

Length: 9min 29sec (569 seconds)

Published: Wed Oct 14 2020