Custom Maps Without Coding Using No Code Map App

No Code Map App Co-founder and CEO Nan Zhou shows how to transform geographical data into a map with custom filters.

Resources

Transcript

 Aron Korenblit: Um, 

Amen. Welcome to automate all the things we're so excited to have you. Yeah, no. So we've got nine here today. Talk to us about no code maps and how to add maps to any no code tool. Uh, so I we've already got Christian in the chat pennies. The Colleen classics. So if you're new here, let us say, give a quick hello in the chat. 

Uh, and with that,  

Nan, how about we start with a quick introduction into you, how you got to know code map. What is it? Give us like the gist of it. Say hello to everyone.  

Nan Zhou: Hi, I'm doing this kind of streaming. So. So my background, as surely as I didn't come on type background, um, I have a, I had a career in finance for 10 years and I had a passion for travel. 

I grew up in Australia and this Aussie thing as a travel, right then I was just so sick off, plenty my trips in Excel and Google maps. So I was like, Hey, I want to go something that is a consolidated tool. That's entirely match. So we go to, uh, we released it in 2009 later on the 18, um, for 19. And then there really well while like a year, year and a half until COVID happened. 

Right. And then when that was painful, like the cliff, it was like, I'm coming off a cliff. And, but you know what, like we, it wasn't entirely map-based and people love the map feature. Right. It's just able to realize your list of locations. Um, and know where to go and like, and where things are. We realized how powerful that was. 

And over time we had these businesses emailing us saying, Hey, we like your interface, but can you customize. For our business data, right. Our business use based. Right. Um, I was like, okay, we're not an agency. We can't really do that. Travel planning. It's tough. Right. But then because Colbert took forever to recover and we'll like, okay, maybe we can. 

Explore another idea. Right? So we just in January, me and my co-founder were like, okay, we're getting these requests and let's just talk what together, a, a no Colt tool, right. With the interface and math based on their own dataset. Right? Right. Very simple. Your data set your UI. Right. So that's what. Right. 

A very simple three step builder that you can put your data and then customize the color, the style, the font, the typical things like three months ago, and then kind of go out there and see, I think we're actually using it right. Is it like a broad use case, um, for this kind of custom map making? Yeah. 

That's actually very that's about the last three months, a huge learning curve for us. Right. You're seeing the kind of data sets being fed into the thing, how to use this, that people are uploading them. That's a, that's being very cool learning journey  

Aron Korenblit: for me. Yeah. And I think, you know, kind of echoing what you're saying already in the chat kind of two ideas that people, I guess not two ideas, but you know, Colleen saying love the idea of talking maps with folks from all over the world. 

So we've got many from Canada. Uh, we've got Christian from Germany, uh, Yan from France. Uh, so we actually do like a no-code map of, you know, uh, automate all the things. Right. Um, and Christian mentioned, sorry, go ahead.  

Nan Zhou: Making a remote team map. Right? Cause like it was as a team as well. At map of all the team members across the, across the world, right. 

At what position they are with the photo, this internal team management. Right. It's it's very interesting.  

Aron Korenblit: Yeah. And so we got water from, from Pakistan Glenn from the UK. So clearly we need. We need a no-code map of automate all the things. And I think that'd be really cool to put like a little overlay where everyone is. 

Um, so, um, two things I'm curious about. So, uh, in the chat, let us know what your idea is. Like, what map would you like to put and what is the use case? Because we're going to kind of spend. Eight minutes, setting up a map it's super, super easy, but then the rest is going to be like, okay, how do we create workflows from this map? 

Like a reservation workflow. Do you sell art? And you want to get payment via the map? So let us know in the chat, what your use case would be. So, uh, Andy delivery location. Love it, let us know in the chat. What are some examples of map-based use cases you have? Uh, and then I'll see if we're able to, uh, improvise all the things at the end and kind of build it live. 

But while you folks write that out, um,  

Nan, tell me a little bit about what maybe are the, like the most popular use cases. You mentioned some that you're surprised by, but what are people using these maps for so far? Mainly  

Nan Zhou: what. Um, events is a big one. If that's your, now that is going away, that we see them maps not being built up because then you can see like one interesting one is out user, a shout out to be a tripper can go with them. 

They appoint together like, uh, they're based in Chicago, Illinois, and some map up. The events held by breweries in Chicago, Illinois. Right. So every month I update it and it has filters for different themes, the music style, right? Like, it's this cool. And then you can see all the events you can see, like how, which was close to you. 

You can kind of work out which one to go. That's a cool, they then map. I think we don't see often. Right. We often see like a list of. Right. That's common. We've seen that. Um, we'll be seeing us in an interesting, like, um, a very common one is running a campaign off, like a list of business locations, Alyssa cafes, a list of companies, just like the retro, anything really. 

Right. And that's the director concept has been the most common use case I've seen to date.  

Aron Korenblit: So kind of two more questions that I'm curious about before we jump in and I'm sure that this is on. Is what platforms are people showing the map? Right. So what are the, I guess the most common I'm clearly like people can't go to the Google API and are like, oh, let me like build my it's too much work. 

Right. So you kind of take that away, but they still have to show it. Right. So talk to us a little bit about what integrations on the front end. You're kind of thinking about what you're seeing as Wix wept flow. Like what are those website builders that you're seeing a lot of traction.  

Nan Zhou: I think was saying, I mean, workflow is a big one, right? 

Because I think people workflow, user generally, or their clients generally care more about looking professional. Right. Looking nice. Right. That's what flow is. No for. Right. Very pretty websites. Right. And I think anyone who's willing to spend time to go to a custom map and they really care about. Looking actual level, right. 

That going the extra mile. Right. Um, but yeah, what, uh, we'll see one, that's someone using software as well. I think they don't need a day. Uh, well, cross I've seen some, um, but mostly like, I think it's pretty, like, it's pretty common most amongst all the platforms, because it's, it's a pretty standard. Uh, it is an embed code. 

Right. And it's pretty sad. That's pretty standard now. And it's pretty easy now. So hopefully like it's not going to be super high concentrated in one platform.  

Aron Korenblit: Yeah. So, uh, I think, I think those were, were surprised, like fighting words, almost like, oh, if you care about the look of your weapon, You put it on, on Webflow. 

And if you don't care, you're like a WordPress person. I don't think you said that, but I think I'm sure that that's how the chat interpreted what you said. And I'm not convinced that everyone in the chat is a Webflow users. So they were super happy to hear that there were  

Nan Zhou: well, but I've seen some whips has a very pretty, and I'm like, oh,  

Aron Korenblit: wow. 

Well, I, I, I, my website is on, is on, is on Webflow, obviously. Uh, um, I like to think mine is pretty, but I had no hand in actually building it. It was all the fence suite team. So shout out to them. Uh, but yeah, I do tend to agree if you care about what your website looks like, odds are it's on what flow. Uh, and that's why, you know, nice custom maps are mainly built with your product on top of what flow. 

Uh, cool. So, yeah,  

Nan Zhou: they're about that extra mile, right? Able to customize the, having the filters, which you really can't do that anywhere else. Right now.  

Aron Korenblit: I know my audience, there are lots of Webflow users, so I'm pandering and fendering so a few use cases that folks mentioned that we can kind of go into, we've got, uh, villages from yet, uh, Yon businesses with multiple office locations, step tracker delivery locations. 

So I think there's like enough as we're building, if you have a use case of like, oh, I would love to see how we do this. I have some ideas of like really geeky stuff that we can build, but let me know in the chat and with that, let's actually jump into building our map.  

So I'm going to go ahead and share my screen with everyone. 

Here we go. So we should be good to go. How about we start in no code map app.com. Right? So this is the. You know, the, the interface here, maybe before we jump in, you mentioned kind of three steps that need to happen to integrate. Now give us like the, the, the 32nd. What steps are we going to take in order to add our map to Webflow? 

Nan Zhou: Okay. Can we just open a new map and then show you straight away? Okay. Once you open a new map interface, you'll see that three step on the right upper corner. And that's pretty much how our design flow works. Right? It's you choose a template from my library of templates, you connect with data, right? And then you add in your customization, which is your style, color, whatever. 

Right. And that's how the three-step concept. And when you're done, you go to the publish button on. And then click publish. Obviously you don't have a map. You click on, that's fine. And you will see the two ways you can publish, right? You can publish a standalone page or you can embed museum the I-frame, um, cope, and we've seen it both ways. 

It really is. Depending on design of your website.  

Aron Korenblit: Amazing. So there's some folks who are there, their watch editor, like 1:00 AM, 2:00 AM note that the actual implementation of the first map is going to take us eight minutes. So bear with us if you're like, kind of almost going to say, but actually net, isn't it like 1:00 AM for you? 

Yeah. Yeah, man, this is like, this is amazing. We've got people all over the world. Everyone's super excited about this. Okay. So let's, let's speed. Not speed through this, but let's give people what they want. We'll do the first integration really quickly and then we'll do the geeky stuff after.  

So you mentioned template. 

Yeah, let's do general general. Okay. So we're applying a general template.  

Nan Zhou: It sounds like we didn't want templates, but if dyno handles I 95% of these cases, right. W, if you have any doubt, he's a general you'll handle it right. Perfectly fine. Don't worry. Okay.  

Aron Korenblit: So it's giving me a few locations here on the left for this is, this is actually a live preview of what my map looks like. 

Is that right? Yeah.  

Nan Zhou: This is our template. This is with our simple data, with some data. Then the data that we fed in, um, this is a template so people can play with it. So people doesn't have data ready to go. They can still see how you will look and feel and what kinds of display options. Right, because not able to have later on, like just ready to go on the yeah. 

Yeah. This looks  

Aron Korenblit: really good. So this is like a great start.  

So I think step two is adding in our data. So talk a little bit about what options are available today and what's coming. So  

Nan Zhou: this is the big thing for us. Now. We want to make it as automated and connect as possible. Right. This is our big thing is we want to connect as many data source platform as possible. 

We started with the most simple one, which is a spreadsheet. And then a month ago we added Google sheets. Um, and then now we working on Airtable and Webflow CMS, and these are all highly requested integration, right? And so we want to, obviously this will get longer and longer all the time, but now this is the, for that week. 

In the pipeline that's planned. Um, so yeah, it's, it's, it's ideas just connect with data, wherever your data sits right now. And hopefully one day we'll be able to just connect it bug in and we'll magically map everything  

Aron Korenblit: for you. So let me just kind of understand this correctly. If I have a. With, you know, the data in a way that's structured that you want. 

Right. So there's imagine there's like a template or something like that, that I can start from. I just share the URL here. So we've actually got one up and running here. So this templates  

Nan Zhou: simple, right? 

It looks like a standard table, right? The idea is not to require extra work. Right. So it's like, it has a heading role and then bunch of places, right. And a heading role is how we recognize your data and absolutely anything you want, like whatever you want.  

Aron Korenblit: Oh, it's anything I want. So you, you will, I can add, add rows and you'll just add them as new line items on. 

Okay.  

Nan Zhou: At this point is 15 rows, but you to have a special place where you need more 15, let us know. We'll add for you. We can put allow more, but right now it's 15 and you can have anything, right. We have obviously the sample one that just to show you the typical use cases, but like, it could be anything. 

Well, like we have people like use it for like, um, Tax rate. And so to the states, we have like, um, like we had, had been when she was in what was like funds raised by  

Aron Korenblit: the company. Right. Interesting. Yeah. A map of companies. So what's interesting is you don't say here's our structured data map your data to the way we expected. 

You're actually just saying. Use, whatever headers you want and we're going to add them to every card on the map. So, you know, we don't have to yeah. You guys figure that out. 

Yes.  

Nan Zhou: So that's one of the only thing we need, right. Address the key, obviously can't use coordinates in the dress as well as other, the floor dress or the coordinates, right. When you want. So we have map, right. Otherwise it's not going to be a map. Okay.  

Aron Korenblit: Okay. So what I'm understanding is, as long as you have an address and some headers, you can pretty much build a map with that. 

These are not necessary. None of these are required except the address. And so let's actually go ahead and, and import this if you will. So we're saying just import the URL, right? Let's import that, right. You're mapping.  

Nan Zhou: So, yeah, it fix it up, sign high, picks it up. And the gray letter, the gray text underneath your header is how we recognize  

Aron Korenblit: the column. 

Oh, interesting. So this is your mapping. So you're saying this is a category. This is a rating.  

Nan Zhou: We're reading the whisk when you there. So what we're saying is we know, okay. It's image versus as a called action button, that would decide where. Got it right now, whether it's a description like addressable number website, or is a category filter. 

Got it. Right. And so the filters will become automatically filters be generated. Outbuilding is figuring that  

Aron Korenblit: out. Got it. So you're saying, you know, I'm going to, I'm a Airtable. So you're kind of saying, oh, okay, this is a single select, right. So we're able to filter based off of that. This is a rating. So we're also going to be able to filter on that. 

This is a category, like a single site, like the other ones. So you're doing that work of like, just send me the data, I'm going to figure it out. Right. This is an array, right? So this could be like a multi-select or something like that. So you're able to just interpret it on the fly, making it as easy as possible for that person. 

Like just Chuck your day. And we'll try our best to get it right. And then just import it. Um, and we'll put this to the test a little later. We'll see if we can, uh, you know, see what kind of, uh, options we have once we go to your  

Nan Zhou: day with yeah. So like obvious description, you don't want a bunch of, of all descriptions of phone numbers and things. 

So we have set it up that we recognizes the photos, vessels, non filters, right. As much as we can. And are we adding more? Based on people as we see more data sets coming in, as we sell more heading column heading, coming in, we are constantly fine tuning it and making them more robust.  

Aron Korenblit: Right. Absolutely. Are you confident? 

Let's do it. Let's start the import. Let's do it. So there's a question cursing from Yon that we're going to get to, which I think, um, w we'll get to them. So yeah. Just want to let you know, I've seen your questions. We're gonna get to them in a bit. Let's finish that important, Glen. Totally agree. Super smart. 

Uh, to be able to like map by your end. So I don't need to worry about that. So boom, finish import. Okay. Now we've got, this is the live shot with our live data, right? So where, okay, this is where, where is this? Where did you get your oh, of course. Okay. It makes, are these good restaurants? Do you know these restaurants or did you just make these, some of  

Nan Zhou: them, not all of them. 

And then that was pre COVID. This. A lot of containers. I think some of the metal clones.  

Aron Korenblit: And is this your rating? Was this how much you would give them? I think I  

Nan Zhou: work with Google. I think 

I haven't been home for like three years, so like I I'm so out of touch  

Aron Korenblit: now. Okay. So I won't, I won't try these, but okay. So we've got our set. No, we've done this  

Nan Zhou: description, right? Say descriptive data goes to the filter data, right? How each card? Um, in the display on left side. Sorry. Yeah. Filtered on the adviser. 

And the list is on the left hand side, right in the list on the, in the, this is why you see about the place name, the star rating. Right. So we know that, okay. It's a south star rating and we'll give a special display. If the name. It's a dress and everything. Right. And then the other ones we know can be filters. 

So it became automatic degenerate, you know, filters, but these are all automatic generator. Like you didn't do anything, right. This became right.  

Aron Korenblit: Okay. So, um, so that's amazing. So you've kind of just hanging on, okay. These are all the possible filters, right? So this is like a Boolean. These are the different kind of multi-select. 

I can do price. I can do rating. You've done an on your end. So we've now. Uh, done that. Now let's talk about customization. There's some question from Christian that we'll get to any second around. How does this look on mobile? How do we embed it? Things like that, but talk to us a little bit. Okay. By the way, I don't know if you've watched the show. 

I'm not a designer. I think this map looks great. I will probably never change it, but assume I am a designer. What are some of the, the things that people usually.  

Nan Zhou: Actually the one thing is it's not even valid design. I don't know. I still have color scheme. Right. Because every company has their own color and font. 

It's very interesting. Everybody has a color scheme. Right, right. So yeah. Some people like I personally really like that. Right. If you click on that, the map changes, right? I think it looks really cool, but it's like, it's the whole dock mode versus, um, no one mode. Right? Um, so that's, that's a simple one to change. 

Um, And I think we have people like, you know, change that. So the display is interesting. Like, let's go to this. Um, the display means what you want to show in the list of you on the side. So you have the short, a condensed summary view. You can change that. You can change like all kinds of things as long as it's either. 

Right? Right. And then for the cost plan, obviously not all of them. If you scroll down to like the list, you'll see. Um, some places have a culture action. Cause we had them linked before. Right. So it'd be name it.  

Aron Korenblit: So what you're saying is that our call to action is the website. Oh, call to action. Okay. I've literally have a field. 

Okay. This is a, I have a call to action.  

Nan Zhou: We'll pick it up. If you have column headers, cause cultural action will pick it up and you become. And this is way the phone gets, right. That's the, where your real generating your  

Aron Korenblit: leads. Yeah. So we're going to play around with this in a bit, and this is again where I'm going to ask people. 

I have some ideas. Yeah. So we could potentially do a reservation flow with Airtable, like with like open slots or we could do like a payment work. Right where we put like works of art that are in galleries, for instance, and you can be like, I want to buy this piece of art with Stripe payment links, but let us know in the chat, like, which one of those is the most interesting, or maybe none of them. 

And, you know, we'll just go with whatever. So let me know in the chat, how do you want to play around with this call to action and we'll do it in a bit. Um, some people ask me  

Nan Zhou: what you slice up, Calendly link,  

Aron Korenblit: Alan Lee. Yeah. We can definitely do that as well. I do have a calendar. The session  

Nan Zhou: is to discuss whatever, right? 

Like, um, Zoltan, if you have a list of agencies. Right. Um, yeah. So that's interesting. And then the mocker is obvious, right? You want number versus no number letter was no letter, any color you want. That's obviously where your company color scheme comes in. Right. Um,  

Aron Korenblit: Cool. Okay. I know none of this were automated. 

All the things, I don't know what my colors are. I have to I'm like, I feel awful. So I'm just going to leave it like this. I think this is, and if everyone's, oh, I can do this as well. Okay. I should know this, but I won't, you know, so I can pretty much customize this all I want. I know that if you're building on Webflow, people are going to be like super picky about all these things. 

So the, you know, uh, um,  

Nan Zhou: the rudimentary basic look right now, like, like people on passive people now, who do you think, just more professional looking, right. And that's fair. Right? We move that, that rule stage, right. We should be in a more advanced stage now and we want to make it very, very simple to do.  

Aron Korenblit: Um, yeah. 

Great question from a mirror. Can we get the dataset? Yeah, absolutely. So let me give you a view link. I'm going to drop that in the chat. I'll also  

Nan Zhou: just everyone, each template. We actually have a sample Excel attached, so you will see. So if you go back to the screenshot, your you, it is, um, yeah, if you go to the data tab, And then if you just click on, uh, that the, that, that one is fine. 

Oh, maybe downline. Okay. Let's try another. Cause you already, you already uploaded data. Let's try that. You can see that link there. The blue link  

Aron Korenblit: download example. Okay, cool.  

Nan Zhou: So even the Google sheets has one too, just because you're important. So you don't show that anymore. Um, but each template has one. 

Aron Korenblit: Okay. Great. Yeah. So, uh, so I dropped mine if you guys needed downloads, if you want to follow along, go ahead and do that. Um, okay. So I think we're at the point, I I'm very happy with this map. I'm not a designer. Um, so let's go ahead and publish. There's a question from Christian, a question of how does this look on mobile? 

So, uh, you have a sense of, can we visualize that here? Or should we look at that once we integrate.  

Nan Zhou: Yeah, you bet. It just, we haven't, we we're going, we're going to add some point to visualize the on there, but it's you had to visualize on thing on the purple.  

Aron Korenblit: Okay. Got it. Okay. So let's so let's go ahead and publish this. 

Let me clear that out. So Christian, we'll get back to your question once we've answered.  

Nan Zhou: I'll mobile. Wait, when we first launched it wasn't even optimized is large early. And then we took another couple of weeks before our mobile V was optimized for now. We'll lose, spend quite bit time  

Aron Korenblit: on that. Okay. Well, good time to come to automate all the things, right. 

Hopefully  

Nan Zhou: that's good. And think it's intuitive. Mobile is always very chunky.  

Aron Korenblit: Um, so what I've done here, I've gone to publish, we're going to embed on two websites. And we're going to go to Webflow now, again, I'm a terrible designer. I am a CMS person, so I literally just have a blank page called map. Right? 

Where, uh, where did they put the whole HTML stuff? That's weird. Am I in the wrong or did they put the HMO? I crazy  

Nan Zhou: items.  

Aron Korenblit: No. Oh, they logged me out. What is going on? Um, yeah, let's go to my test website, uh, command D no, I was locked out for some reason. It's I? So it's weird, right? You would assume that I'm like a Webflow person. 

I am just awful on the designer, but it's very simple. So. Essentially, we have our navigation here. This is our kind of our HTML. And let's go to our map page, which is just blank. And I already have an HTML in the I've already embedded it. Damn. This is embarrassing. So let me delete that. Let me delete, save and close. 

Okay. And let me do that again. Just so folks understand what we did there. We're going to kick the plus, add an element. We're going to go over to. I love Christian that you think I'm, uh, I'm advanced enough to use Webflow shortcuts. I'm just nowhere near that proficient in Webflow front end. Um, okay. I just copy pasted that code. 

I'm going to save and close and boom. Like that's, that's pretty much it, to be honest, like we've just gone ahead and, um, embedded. I can't interact with it from the interface itself, but I can publish. That's good there, and now we have our kind of live map, right. So I can filter, I can do all that stuff. 

This is, this is live. So I'm going to drop the link in the chat if anyone wants to play with this. Um, and yeah, thanks everyone for coming to automate all the things we've just dumped checking. We can do a little more, um, there's the shortest stream we've ever done. This was easy. Um, so I do want to get to Quish Christian's question, which is, um, how does it look on mobile? 

So I'm just going to go into the inspect. And, um, now I'm in just like responsive, right. But I can specify specific, let's go iPhone 12 pro. And this is what it looks like on mobile. This is also a little messed up because of the way I've embedded it. Right. So don't, this is not all filters. Um, oh, do I? Yeah. 

I have some filters on, I think, uh, no, I don't clear. Let's close that I have my results here. I can click through, um, it looks really good on mobile. Yeah,  

Nan Zhou: it looks better than this normally. Sorry. I'm sorry  

Aron Korenblit: to say this. No, it's it's because of how I've embedded it. Uh, just because I've embedded in a Webflow, like you can dimension in what flows and the fact that I'm rendering in the browser and not a real. 

Mack. So do not take this as a live of what it's going to look like. Yeah. So Christian says the embed needs height equal 100 view height. Yeah, let's try it. I mean, I don't, I don't, let's give it a try. So I want a height, you height, and then I want 100. Is that it? 

Okay. Let's publish that  

Nan Zhou: as we try all that.  

Aron Korenblit: Interesting. 

Um, okay. That looks much better already. It takes up much more space. Um,  

Nan Zhou: you can actually drop down the  

Aron Korenblit: list. So I will, I got two fingers. How do I do two fingers on this test? I will let people do this. You guys figure it out. This looks great. I'm going to make it responsive. Just refresh that. Go back to like normal desktop. 

Nan Zhou: There's also sample on my landing page. So you guys can  

Aron Korenblit: take, um, no, I, I thought so. Glen says I frames are tricky. I, to be honest, this is all me. I don't know how, what flow works in the front. End enough to make it look nice. So I will, I'm throwing it out to everyone here. Embedded on your website, uh, come back and tell us what settings we need to make it look nice. 

It was the issues with me. Um, that's great. So we've been embedded in  

Nan Zhou: no, me too. Like so far has. Good without users, but I'm always here. If you have any questions or  

Aron Korenblit: issues. Absolutely. Absolutely. So I'm curious. Okay. Coming back to like, okay, so we've done it. Um, any, any kind of suggestions of how people should think about adding a map to a page, right. 

We've just like embedded it. Right. So do you have any like best practices, thoughts about how people should think about adding the map to the page, how to like, make that page look nice and then we'll go into the workflow part.  

Nan Zhou: I think because we were for two ways of doing the math publishing, right. And the two ways we really got our ideas by studying the major masters published out there, namely things like Zillow, booking.com and BMX. 

Right. Like MBB takes a full page, just says that's the entire page on the map view, right? Booking button on the main page they map. And it opens up the map page right. In a pop up. And then, so it really is. We figured that's come to most common way of doing it, depending on just how big you want your map to be. 

Really, if you have a large data set and you want a match to be really. Then Alto justice to a button and to a full page. Um, if your math is more about visualization, visualization of a dataset, then I think, um, and that this is not so big yet, like less than a hundred places, then I think embed on the page yourself. 

It looks very nice, right. It really like spoos up that page. Right. Um, and it's more obvious for users because they see it right there. Right. It'll have to have a button and go secondary page. It really is. It comes down to the size of a data. Uh, how hotly impact you want, how much do you.  

Aron Korenblit: I'd love to, so it seems like we have a lot of a Webflow experts of which I'm not one. 

So if anyone wants to like show examples, um, and like play around with this and, you know, create a, a button that opens up like this really nice, uh, pop out with the map, like go ahead. Shared with, with Nan. I'm sure you you'd love to see it. See how people are playing with it. What's possible. What's not possible. 

Ultimately. You're early enough to get feedback from folks like, you know, individual users like lunch. Yeah. So, uh, yeah, like a competition go out and build a cool map.  

Nan Zhou: And like, I also, I'm not a designer either. I just kind of go out and look at other websites and go, oh, that looks nice. And this was that way. 

Right. And let's make it possible to do that way. Right? Like you guys are way more professional with this out to make things look nice and like stands out. And I think that's what really the goal is. Right. Take location, data display to another level, right, right. To increase engagement, to increase conversion, to increase like regeneration. 

Aron Korenblit: Right. I hate to break it to you, but I think, uh, seeing what other people are doing and redoing it is being a designer to an extent. Right. So I think you, you might be a designer then, like, ah, I knew it. That's what I, I don't know. That's not fully true, but I think to an extent that's definitely true. So, um, Okay. 

Um, okay, so there is a set height pixels in the embed code, right? So, um, so if we go ahead and go height, right. So right here. If you set this to 100%, I guess that's what people are saying of the viewport that might work. Um, I don't, I don't want to do it. I don't want to know. I don't want to mess around with this. 

I'm going to give you some, I'll let people play around with that. Um, but I do want to do like a part that I kind of want to play around with is this idea of, okay, well, let's say I have a workflow around, you know, specific restaurants. Right. So, um, let's say I want to add restaurants or let people submit restaurants to this list, right. 

Um, so Nan, what, what do you think, what workflows should we kind of spend maybe 10, 15 minutes building here, maybe as examples of what you've seen or let me know in the chat, what you're interested in of like, okay. I have my data set, but how do I actually create cool, like more advanced workflows on top of just showing them. 

Nan Zhou: I think the one thing, like I said, the one thing that I think is super interesting is that cultural action, right? Like to me, oldest stuff in a day is help generate lead more revenue, more bookings, more sales. Right. And I think that's what we added. Right. We're willing to see how many different ways people can, what kind of links people can getting there. 

Right. And at this point, we've had people doing WhatsApp chat, you know, what have business now. So you tend just have, Hey, chat to us what's happening. Right. And then we have like Calendarly, we have Stripe, we have, um, like contact form, but just like a foam foam, like basically like any linking ad there you'll be automatically linked to the button that we generate. 

Right. And then take you to, uh, take your user. To find ways to make a purchase the can to communicate with you. Right. And I think that's like one of our biggest differentiation,  

Aron Korenblit: right? So, uh, uh, we got our donation from Krisha. This is my first ever donation on the stream. The huge shout out to Christian. 

Uh, I will be buying coffee on Christian, so thanks so much really appreciate it. Uh, I, I, yeah, you can, you can give donations to the stream now as a really appreciate that Christian. Awesome. Um, so yeah, man, that's amazing, dude. I really appreciate this. I'm glad that you know, you're enjoying this. That's amazing. 

So really appreciate it. Um, made my day, honestly, this made my day.  

Nan Zhou: Well, you make it when you receive it's like, oh my God.  

Aron Korenblit: Yeah, no, it's, it's, it's weird. Cause I do payment links on the street. But I'd never had someone actually be like, I'm going to, I'm gonna use it. So that's fantastic. Um, absolutely. He made me blush. 

Um, cool. Okay. Well, yeah, so I actually think let's do that, that example of, um, you know, payment links because payment links is something that, um, I showed last week. So if you're interested, I did like what flow client. Where, uh, it was a customer use case, but there's no reason why you couldn't make it like a restaurant use case, uh, or any other like art. 

You mentioned art in galleries, tickets, event tickets. Yeah. Great example. That's been much, much, much more on your feet than I am today. Um, so, um, let's actually do that as an example. So I'm just gonna go over to my Stripe dashboard here. Sign in. Yeah. And let's actually go ahead and create a, a potential product that, uh, you know, we want to sell, right? 

Yeah, let's do it. We're doing it live. This is, this is automated, all the things, you know, so it's going to test mode. Um, that was creative product. Let's imagine that. Um, oh, interesting. Oh, it's I'm on the wrong account. There we go. Okay. So last week was the Webflow stuff. Let's add a, I don't know. Let's add a, what, what did you, what was an example that you put in  

Nan Zhou: music? 

Um, music  

Aron Korenblit: let's go. What do people listen to today? What's like, no idea, right? Like Billie Eilish. I dunno. This is like the first, I don't know why that's like the first thing, whatever. Let's go music ticket. Let's not, let's not age ourselves here. Um, it's going to be. Services little young. Yeah. Um, standard pricing. 

It's a, one-time, let's say it's 120. Now this is a price that you could, or a product that you can actually create from Airtable, uh, or via API, which is what we did last week. Right. So let's save that product. Um, and now let's create a payment link of that product. Right. So the product is just like the Stripe entity that has a price that saying, you know, uh, that music ticket is worth $120. 

The payment link is saying here is a hosted website to pay for that product. Right. We're not going to collect taxes, but you can, there we go. We're not going to split. So there's actually a good example. If you're reselling tickets, you can actually like autos. The cost, like if someone, the vendor, you can keep 20% and then give them 80% automatically with the connected account. 

Um, that's something I did with CJ, like couple of months ago, or like in January, I think we're going to create that link. We're going to copy this and I'm just going to bring it into the call to action here. Right. So if I go to that link, I have my checkout page. So this is actually like going to be the call to action that folks can pay. 

And let's say that this is a music ticket, right? Let's I dunno, like music image as the janky, this is going to be janky. Webflow. Folks are going to hate this. Uh, we're just going to copy that image. Yeah, exactly. So we're taking that image. So we're essentially just, we're going to say that this is music. 

Maybe you're, you've got restaurants and music, you can do like a whole travel thing, but what's cool about this one is you're going to be able to have people pay, you know, right. Where, yeah, exactly. Um, so let's go ahead and go back to, so yeah,  

I guess the question for you then is how do I update my data? 

Is this live? How does that work?  

Nan Zhou: Yeah, we'll go back to you all builder and map. And then, um, so click on. Google sheets, sink a little sheet again. So that's the method you chose and then just think clean center.  

Aron Korenblit: Yeah. So one thing that for sure, you're going to get people, people are going to ask you, like, how do I auto-sync that's for sure. 

Going to be, I'm sure it's already kind of come up where people are going to ask you, like, how do I auto sync that data? Um, so what restaurant did we update? It should be called  

Nan Zhou: follow the  

Aron Korenblit: very left. Oh, terrific. On street are a medic. I lose it. We lose it. We only have nine results instead of the 10 that we had. 

Oops. What happened in there? Let's check. Let's check the call to action. Maybe the structure of the call to action. Maybe if I just go that way, it shouldn't matter. It shouldn't matter. Okay. Let's check it. Let's sync it again. Yeah. Yeah, sorry guys. That's okay. This is automated. All the things people are super used to things happening. 

So resync finished.  

Nan Zhou: That's no, that's canceling. So just close  

Aron Korenblit: down. Okay. Let's refresh. There we go. We're back. I think I just forgot to refresh. Okay. Yeah.  

Nan Zhou: That's  

Aron Korenblit: okay. Yeah, no, no worries to refresh here. Now we have it. Yeah, right. And the call to action opens up that checkout payment, like, right. So you can actually like, kind of get payment directly on the map. 

So I think, I think, 

yeah, let's call it. Let's let's call it by that. Makes sense. Call to actions, little, a weird, uh, here to change that. 

Nan Zhou: Oh, yeah. Buy tickets or whatever. Right. And  

Aron Korenblit: then, yeah, I can just refresh. Yeah. Amazing. And I could buy so you can have reserve, you can have whatever you need. So I think we can do confetti. I think we've deserved it. So congratulations then. Do I not have confetti anymore? Oh no. Wait. I can get it. I can get, make to work. 

I think I can make it work. One second. 

Right. Yeah, confetti's back as competitive. Um, so if you're new to the stream, uh, we do confetti when we, uh, when we succeed, when we've got our workflow working and, um, you know, I thought that was a very successful one. Um, so some of you already, you're already getting feedback in the chat, which is, uh, folks would love to have an override yield for the CDA CTA, if you have different CTS, right. 

Depending on. This is what happens, man. People are gonna, people have requests. People want, wants already building costs. Ms. The confetti. Absolutely. It's been awhile. It's so glad to be back, uh, you know, showing confetti. So I do want to, I'm like, I want to geek out a little bit more with folks around this. 

So I, I, and I'm just like shooting ideas here as what people can build. Right. So last. Last week on the stream, we did, um, client billing. So let me just find client billing.  

Nan Zhou: Yeah. And I Stripe has really opened up a lot of possibility.  

Aron Korenblit: Yeah. So if you imagine like your restaurants could be, um, like I have a customer table, but you could have a restaurant table and Airtable has automations where you can have, you know, when new record is created in my customer's table, Go ahead and send it to Google sheets. 

Nan Zhou: If you don't have a custody map to right. You're gonna have a method customers.  

Aron Korenblit: Yeah, yeah. Or yeah. Or whatever. Yeah. So what's cool is you can actually like, you can send it to the map automatically, but what you can also do is, and that's what we did last week is like auto-generate. The payment link. So as you're adding customers, you create your product in strike. 

You create the link, you make that as a CTA, and that can all be one action. When someone submits a form. So someone submits themselves as a custom. Whereas a ticket that they want to sell. You kind of put it on. Um, you create all of those records, you bring it into a Google sheet until you have a direct native Airtable integration. 

Right. And then, then you just update the map once a day and it has all of those new entries. So I think if people are really interested, I can do a bunch of more workflows. So I'm really excited about that opportunity.  

But I do want to spend maybe like the next 10 minutes, just answering folks questions. 

Uh, before I do that, Nan, any thoughts, any things to add around before we jump into some Q and a,  

Nan Zhou: um, no, I think you've covered everything. Um, actually, cause we, uh, we, we only, we go with two people, right. Me and my co-founder. So it's a limited knowledge or imagined on the column headers and the kind of dataset. 

Right. So I'm always excited to see new columns, new data sets. Shown to us be important, right? To challenge the robot robust robustness of our actual converter. Right. That's very,  

Aron Korenblit: so I totally agree. And trust me, if one thing that comes out of Automato things, people are going to test your robustness, ask you questions. 

Um, there's a question from Christian that I think is really. Uh, Christian who gave me two years really appreciate it. The man of the hour, which is, um, is there an SEO function or structured data possibility. So maybe Christian, do you understand that question? And, um, Christian, if not, maybe kind of add some comment. 

Nan Zhou: Yeah, he acts the  

Aron Korenblit: lab. I guess maybe the question is, you know, will, because this is an I-frame, you know, is the, is there an SEO kind of thinking here where if you're just embedding the map, the I-frame might not be picked up. I'm not sure if that's the question.  

Nan Zhou: I don't, I'm not XCO expert on this and sometimes it confuse me, but like I find SEO a little bit confused. 

I only understand the basics. Um, but I can look into that. And if you send me email question, I can look into that address.  

Aron Korenblit: Reply. Cool. Awesome. Kevin more context? Yeah. Christian, go ahead.  

Nan Zhou: Expert at all. Right. So I don't want to make an answer up by now.  

Aron Korenblit: So, um, any, uh, who is, uh, uh, this, I think this is a question slash uh, Which is, uh, can never be more than one call to action, right. 

Or link to something else than a website, maybe like a download, like a PDF or something like that.  

Nan Zhou: Um, I think the link anything, right? Like we showed earlier, it can be a strike. Uh, it can be a WhatsApp lane can be your, a calendar link, really any link, um, You can use that if you are more than one, it's definitely doable obviously. 

Right. But, um, we handle parity. I mean, for all our pain users, obviously we definitely prioritize their requests. Um, um, I've been more on the imagined, so it's definitely doable. We just add another column in the data and I recognize the second call to action button.  

Aron Korenblit: Got it so possible. But. You know, be a, be a good, be a good, be a good customer. 

And then, then we'll prioritize it, which I think is the right thing to do here. Um,  

Nan Zhou: yeah, I'm solid because it's busy. We will have to make a live. Of course, of  

Aron Korenblit: course. Um, speaking of pricing, that's actually a good place too. I have a question for you. Like what is the pricing? Um, and I know there's like a pricing page that we can kind of look at, talk a little bit, um, yeah. 

Of what the pricing is.  

Nan Zhou: Yeah. So I want to explain this too, right? So it's the basic is simple 1539. So then you see that 1 cent of Matthew, right? And you're like, that's weird. Um, it's not us being graded is because we had to pay Google maps API for like the, the two main one we pay for is one every map load or Matthew, we pay Google. 

Right, right. Like wait 7 cents, no one 7.77. Right. And then on top of that, where to pay for the actual math, the geocoding and all, all the other stuff. Right. So we kind of just like made a simplify and then go, Hey, go to lump it together into one step. Right. And then really as passing on the cost, because it just otherwise just very big liability. 

Aron Korenblit: So 15 for pro 39 for business plus pain. You know what the Google maps cost is essentially something you would pay in either way. Speaking of Google maps, there's a question from Jaan, uh, which is you connect with open street map or other map providers and not Google maps. I told you question slash feature requests. 

That's what you're going to get here  

Nan Zhou: right now. Uh, at, at one point when his damn Google map is the most expensive one of the APIs. So I definitely sound like, um, it is, would be considered that later on, we would do open street map or do Mapbox, right. As almost like different pricing here. Uh, just right now, it's not. 

It's just not high up. It just puts down the list. Right? We have, we have a very long list and then we had to find where to prioritize it. And it's this not Tufts, everything.  

Aron Korenblit: So, which is fine, which is normal people. People are excited about this. And I think that's good that you're getting so much like ask. 

So I guess a good place to end is where people, where can people reach you? Um, is it Twitter? Is there email? What is the best way to reach you to ask more question?  

Nan Zhou: Twitter or email, email, just know, call math path@gmail.com, email or Twitter. The same thing is no call Matt pap the handle, or it's my name? 

I'm then I'm sure yours will show up on the prescriptions later, but yeah, I'm always on Twitter. I'm very responsive as a person, like yeah. As if at a time zone when I'm sleeping, but in  

Aron Korenblit: general, and even then sometimes you respond, you come to streams in the middle of the night, so really appreciate it. 

It  

Nan Zhou: is, I have a weird body clock, so. 

Aron Korenblit: And I huge. Thanks. I think we're going to end this early. We got no more questions. So Nan, huge. Thanks for coming on, showing us how to build this amazing app in 10 minutes. Huge. Thanks to everyone who came beyond penny, Glen, Christian, our first ever contributor to automate a little things, really appreciated. 

Um, meth. Thanks for coming, Glenn. All of you really appreciate you coming on. I will be back next week. Because of Colleen's amazing work. We have streams scheduled,  

Nan Zhou: I think from Yancey and pricing for charities and  

Aron Korenblit: stuff,  

Nan Zhou: we would to actually everything we can for charity education or that, um, the only thing we need to really pass on is the Google API pot. 

So we'll find ways to really minimize it. Um, Otherwise. Yeah, we will, for those cases, definitely we'll make an exception on  

Aron Korenblit: pricing. Absolutely. Well, that's great to hear. So, um, yeah, Nan. Huge. Thanks. Huge. Thanks to coming. We'll be back next week with, uh, Jason with talking about a new automation tool. We've got Kodak. 

Uh, we've got a bunch of streams coming, so huge. Thanks. I will see you back here. Same time, same place next week, Nan. Huge. Thanks for your coming. I hope people will build amazing maps. Uh, and we're so glad to have you in the ecosystem building amazing. 

Yeah, and good night go back to sleep everyone. Who's on the w in the European time or in Pakistan, goodnight to you. I'll really appreciate all of you coming. Have a great week and I'll see you back here next week. Bye everyone.

Key takeaways

Similar streams