Pricing calculator using ChatGPT

We all know we can do a lot more with custom code. And there is a fast way to do this using ChatGPT. So today we're going to build a pricing calculator in Webflow and inject it with custom code from ChatGPT.

So here we have this site. It's a site that Diego Rangel, a Solution Engineer here at Webflow, built as a demo for clients. So the idea is this pricing calculator that you can use to enter different details about a project, different types of deliverables, the hours needed, the hourly rate, and then it'll do a quick calculation and give you a summary. So our goal is to make this work, all with the help of ChatGPT.

So, to get started, let's open up a new browser and go to chatgpt.com. From here, we're just going to describe what we want in a chat message. So let's start by telling it we have a Webflow site and we want to add a pricing calculator. We want a custom code solution. Then we'll describe the functionality we need.

So let's submit this and see what we get. And ChatGPT is going to generate a response. Let's see the code that it generates. So it gave us a JavaScript solution. It says to place this in Webflow's custom code or in a code embed. So that's essentially what we're going to do. Let's copy this to the clipboard.

And now let's go back to our Webflow project. So here's our project, our page here. And from here we're just going to go into our page settings. And then go to custom code. And we're going to paste this into the body. So let's paste this in here. So let's save that and then preview it.

So here's our preview. And let's test this out. So we'll enter a few items here. And we can see it's calculating. And then let's try removing some items. And again it's calculating. So this is great! The calculator is working. Now let's try it with a couple more items. And it's giving us a summary of all the work and it's giving us the total. So this is a great start.

But we want to make this look a bit better. The default styling doesn't really match our site's design. So let's ask ChatGPT to help us style this as well. So we'll just write a quick message asking it to update the code to match our site's design better. And we can describe what we want. So let's submit this and see what it gives us.

So ChatGPT gave us some updated code. Let's copy this and paste it into our Webflow project. And now from our preview, we can see the updated styling. And this is looking much better. The design matches our site much more closely now. So with a little bit of prompting, we were able to get a working pricing calculator that matches our site's design, all with the help of ChatGPT.

Now, of course, this is a relatively simple example. But it shows you what's possible when you combine Webflow with AI tools like ChatGPT. You can quickly prototype and build new features without needing to know how to code from scratch. And as AI tools continue to improve, these kinds of workflows are only going to get more powerful. So give it a try on your own projects and see what you can build.