Personalization Using Storyblok

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone, and welcome to another episode of Learn With Jason. Today on the show we've got Facundo. How you doing?

FACUNDO: Hey, how are you, Jason? Everything cool here.

JASON: Doing great. Excited to have you on the show. We're tackling something pretty challenging today, but before we dive into what that is, let's talk a little bit about you. You want to give everybody a bit of an overview of who you are, what you do, all those good things?

FACUNDO: Sure, of course. Well, hello, everyone. My name is Facundo Giuliani. I'm from Argentina. I'm a developer relations engineer at Storyblok. It's a content management system that we'll use today. So we'll go deeper into that later during the session. But yeah, developer relations engineer during these last couple of years. I was involved in the community, creating content, sharing content with the community, speaking at events, virtual events, now in person that they are coming back. I had the chance to meet Jason in person in Atlanta last June. But yeah, before that, I spent several years of my life, I would say 12, 15, I really don't remember, being a developer with different technologies, front-end technologies, back-end technologies. A lot of things that brought me to this place. I'm not only developing and creating products, web projects, applications, but also talking about them or seeing the content that we can create to share with the people. So yeah, super excited to be here.

JASON: Absolutely, yeah. So we are talking today about personalization. So personalization is one of those things that we hear thrown around a lot, but I don't even know if I know exactly what it means. So for folks who aren't familiar with the term, what do we mean when we say something like personalization?

FACUNDO: So, from my point of view, I would say that when we talk about personalization, we are talking about offering different experiences to the people, depending on certain aspects. I mean, not necessarily speaking about web development or web projects, right. I mean, in general. In life, you also get personalized experiences, let's say. If you go to a shopping mall, for instance, and you go to search in store because you want to buy some T-shirts, and you enter by yourself to the shop, you will have the people working at the shop that probably will see you and see that you are looking for a particular T-shirt. You go, you buy it, and you go out. I mean, you pay, of course. But if they see that, I don't know, a family enters with a couple of children, let's say, and they start talking about that or they start seeing the different products that they are selling, probably the seller, I mean the employees from the shop, they will come to the family, offer support, asking about what they are looking for. So the question is what's the difference between a person that goes straight to the T-shirt that they want to buy and the family that is taking a look there. Well, this difference in the treatment, let's say, of the employees of the shop, we are talking about personalized experiences.

JASON: Right.

FACUNDO: I mean, that's -- I don't know -- an analogy I like. Another analogy that I like. If you live in a big city, you can see that. Probably if you live in a small town, you see it more frequently. If you go always to the same coffee shop to always get the breakfast or always read the newspaper while you are drinking coffee in the morning, okay, you go once, you go twice, you go another time, another time, et cetera. After ten times, I mean, probably the waiter or the waitress that is working at the coffee shop, they will say, hey, Jason, how are you? Same as always? The difference if you go for the first time, you know. So again, personalization. Like differentiating the users or the customers by different aspects and offering them different experiences based on that, right.

JASON: Right, yeah. I think you bring up something that I think is important. I feel like a lot of times when we start thinking about customized web experiences, because of all the different ways that they get abused, it can feel like, I don't know if I'm comfortable with that. I don't want to track my users. I don't want to do this or that. That's such a bummer because I love that experience of walking into my local coffee shop and they know my order. It just makes me feel like I'm in a place that's mine. And that feeling of personalization, that this is a place where I am a regular, and it's a place I choose to be, and I want it to feel tailored to me, simply by my usage. That feels really, really good. So when we talk about personalization, there's definitely a way to make it evil. We've learned every good innovation will eventually be used for evil. That's really a bummer, but it doesn't necessarily mean we should never use these innovations. So today, I want to focus on the good uses, which are how do we get a website to think about our what is my usual. I'm coming to your website. How do you make me feel like I've been here before? Like the experience is tailored for me specifically. So I guess maybe that's a good question for you. How do you do that on the web? How do you make me feel like I'm seeing the same person behind the counter who remembers my order?

FACUNDO: Yeah, that's a good point. Based on different aspects of the person browsing the website, if you're talking about a web project, for instance. But I mean, going more in generic terms, let's say, you can see, for instance, the location of where the person is browsing your website. To give you an example, I see you're now in a T-shirt because you're in the United States and it's summer. Down here in Argentina, we're in winter. So for example, offering personalized content is like if I enter to a website and see a sign that says enjoy the summer, it's like, okay, I have to wait like six months to do that. So getting the location of the person that is visiting gives you that possibility. Another cool thing is, for instance, showing the weather to the person that enters into your website. You can show the specific weather for the city where that person lives. Speaking about this, you go in every day to the same coffee shop. In a certain way, you need to keep track of what that person is browsing, right. I mean, what's the preferences of that user when browsing your website. Which pages the users are visiting, which products they are buying, probably. Talking about a more familiar case, these e-commerce platforms. I won't name them. But you go, and you start to get suggestions about previous purchases. So it's like -- I mean, you can keep track of certain things depending on how you implement your project, depending on how you build your project. You will have certain ways or other ways, depending on how you prefer to use that information and how you track that information will depend on that.

JASON: Right. Yeah, and it really opens up a fun dev problem if you think about how do I make a website useful based on somebody's behavior. There are little signals we get. Okay. So I show up to a website for the first time. I've never used it before. You're going to give me a set of defaults. Now, without me ever having visited that before, if we're able to figure out what country I'm in, you've already mentioned a great option, which is okay, I'm coming from a country that's currently in summer. So show me a summer scene. Or if I ran an e-commerce site that sold rain jackets, you could just build a personalization that's like, hey, the current weather in your area is rainy. So I'm going to say, hey, it's raining outside. You want 20% off a rain jacket? Little things like that make it feel smart. And that's before you ever even know this person. Then as they do things, if they log in and give you information like I'm a business owner, I buy wholesale, I'm shopping for a gift, whatever it is. Each of those things is a detail that if I was in person, I would change the way I was talking to you because now I know more about what you're interested in.

FACUNDO: Exactly.

JASON: I think about the fact that when I was -- when I used to run my agency. The first question you would ask anybody who called about a project is what are you looking to accomplish. Then they would start telling you about their business. They would tell you about what their problem is and what numbers they're trying to change. You start to get this bigger picture. The next sentence out of my mouth was never the same sentence twice. It was always like, okay, based on what you said here, here, and here, I think we should focus on this. Here's an area that I want to dig into. And it would personalize what I'm trying to offer them to the problem they're trying to solve. We can do that through a conversation, and the conversation can be interactions on the website. You can make that really heavy handed. Like when you sign up to a new product and they're like, how many employees are in your business, what's your primary use case, and you have to check all these bocks as part of onboarding. But there's also just like, I clicked on the men's clothing. That's a point in the direction of men's clothing as being my primary interest. So you know, maybe just bubble those items to the top of the list. Then if I then go and click on women's clothing twice, now I have two points for women's and one points for men's. So we'll just bubble women's up now. We can do it behaviorally without having to track anything or ask for any data. That stuff is fascinating.

FACUNDO: Yeah, sure, sure. In fact, you mentioned something that is very important or for me is good to mention. Personalization is not about -- I mean, when you talk about how intrusive you are or watching your steps. On the other hand, what you can do is explicitly get those details. Okay, where do you live? As you said, how many employees does your organization have? You can ask for the details. If I'm asking you the details and you're answering them, we agree that information, you are able to share that with me. Now that I have this information, I can do certain things about that.

JASON: Yeah, absolutely love that stuff. It's such a -- I don't know. It feels like it's one of those things that feels out of reach. Actually, that's a good dovetail into talking about the tech here. In my logical mind, I understand this is valuable. I know that if I've got somebody coming who is shopping at a store that I own, they are more interested in some items than others, assuming I have a store with categories of products. I know that if somebody who likes hats sees hats, they're more likely to buy something than if I showed them soap. But like, how? What is the technical underpinning of this? What are you using to make this happen?

FACUNDO: Well, I mean, that would depend on how you want to set up your project or which tools you want to use, let's say. For instance, going to a simple way of keeping track of these kind of things or details, you can create cookies when a person is visiting your website. In those cookies, you can store the information related to them. You don't need a database for that. You don't need a platform to keep track of all the visitors. On the other hand, you don't need the user to create an account, for instance, to keep track of this information. You just create a cookie. I would say 100% of the websites do, but not 100. Let's say 95% of the websites do, like keeping track of searching parameters. Based on that, you can show content or do some thing and not the other.

JASON: Yeah, cookies are pretty common for all sorts of things, not just personalization. So the likelihood that somebody is going to be okay with a cookie is pretty high. That's why we all have to check those accept cookies banners on every single website we visit. And again, there's always a spectrum here. You can use any of this stuff for evil, but the vast majority of use cases are pretty good here. We can make your experience better if we just keep track of these little details that aren't personally identifying. I think that's a big, important point. We're not building a user graph or anything. We're just literally saying, oh, you clicked on this. That's you showing interest. So let's focus on that a little bit. Then if you click on two other things, oh, those are now part of your interests as well. So our ability to make suggestions just based on behavior gets really good. And if you sign in and if you have a purchase history, we can make better recommendations, but we don't have to do that. So let's talk a little bit about use cases that aren't e-commerce. I feel like this has a broader scope than just help me buy the products I want. How else have you seen personalization used around the space?

FACUNDO: Sure. Well, I mean, an example that's probably more familiar if you're also -- let's put an example. Twitter. The tweets that you see when you open the application or the website, you will see first probably the accounts that you are more familiar with or that you interact more with, you know. Or speaking about news portals, for instance, if you go -- I mean, if you always go to the same news portal and you read certain types of news or related to a certain category or topic, let's say, if I show you -- I mean, if I always enter the same news portal just to read about sports, I want to see the last match results, let's say, and I don't read any news about politics, for instance. It's not that I'm not interested in politics, but I'm more interested in reading things related to sports. So I would prefer that when I enter to the website, instead of seeing the first articles related to politics, it will be more interesting to me that I see the first articles related to sports or how was the NBA yesterday, right. Those are other examples that I think are not e-commerce or actually e-commerce.

JASON: Yeah, no, I think that's a good point. And I'm even thinking about, like, just general usage around, you know, a dashboard or something. If I go into a dashboard and switch it to dark mode, then remember that across other parts of your app. If you have an account dashboard over here and another site that's docs, carry that over. I've chosen that. I've shown you as a company this is a thing I like. Or a code company who -- like Netlify, for example. We have code samples in JavaScript, TypeScript, Go, a few other languages. So what if we just remembered that you always choose TypeScript, and we'll default to TypeScript instead of making you choose that from the dropdown every time. That happens across everything. There's just these little things you can do that just make the experience so much better.

FACUNDO: Yeah, sure.

JASON: I think this is one of the reasons people love the stripe docs. When you go to the stripe docs, their code samples don't have that insert API key here. If you're logged in, they just put your API key in there.

FACUNDO: There you go.

JASON: Like Airbase does this really well too. Airbase doesn't give you generic docs, they give you special docs for your table generated from the schema of your table. You go in, copy/paste it, and it literally works. You don't have to copy/paste your code in or switch out a key or adjust it for your particular data schema. It's just there. Oh, you want all the entries from this row? Copy/paste this thing, and it'll work in your app. That's such a nice setup compared to some of the ways that we just get used to manually personalizing things. We get a code sample or a copy/pastable, like, ready-made message. We always have to go do little edits and change out, oh, I got to replace the first name here with your first name and replace the your name here with my name. All these different little things. They're not hard, but it's just these little taxes that you pay as somebody who's not using a personalized experience. And we can always feel that polish when we go into a website that does the extra work to solve that problem for you.

FACUNDO: Yeah.

JASON: So I feel like as people are watching this, I want to make sure people don't get themselves into this mode of this is only useful if I work on e-commerce. No, this is useful everywhere.

FACUNDO: Yeah, sure, sure.

JASON: This is the secret sauce, right?

FACUNDO: And again, it's not that you can't do that. It's not that you are not able to grab a piece of code and add your personal details. But even better, right. And that's what you want to do when you are creating a product. Not only selling products in an e-commerce platform. You want the people using your product to feel happy and to choose your product because they enjoy using it or doing it, right. The same example, it's not that if you go to the same coffee shop over and over again, you can't open the menu and say, okay, I want this flat white with this piece of cake, you know. If you enter and they say, hey, Jason, how are you? Do you want a flat white with this piece of cake, and you're like, okay. This is my place. I'm feeling happy because of this. So it's like, again, providing value or satisfying the needs of the people. I mean, going to an extreme point of view, but when you have a lot of offer in the market or in all the aspects, when you have different options or different alternatives to a certain product or a certain way of doing the things, those little details are the ones that are going to make a difference compared to other platforms. I'm not saying that you will stop going to that coffee shop if they don't call you by your name. But if in the same block you have five coffee shops and enter into one that says, hey, Jason, how are you? Do you want the same flat white you took yesterday? It's a difference.

JASON: Yeah, it's definitely a differentiator. In my own behavior, I know that I will definitely select the shop that makes me feel like a regular. And sometimes that means going to the place I actually don't even think is like the best particular -- like, I might like the coffee better at one place, but they clearly don't remember who I am. They're pretty standoffish and think they're pretty cool, so they don't want to acknowledge I'm in there all the time. But then the next coffee shop over is pretty good, not great. And it's just one of those like -- yeah, I'll take the slightly worse coffee if they remember my name, treat me well, they make me feel welcome. I love that.

FACUNDO: Exactly.

JASON: This is such a maybe underrated thing on the internet. People think of the internet as being like a brochure. I have created a thing, and I'm going to set this out in front of the world. Anybody who wants to can read it, but it's one thing. We really sell ourselves short when we think about websites or web experiences as brochures like that. Because what we really have the opportunity to do is make our website into a caring guide that is actually seeing somebody coming and saying, hey, I have something that might be of value of you. With a couple of pieces of information, I can swap what I'm talking about and make it relevant to your interests, not like a megaphone that's just blasting an ad that's really generic. And it's such a big difference from a billboard to somebody who will kind of say, hey, you look like you're interested in -- like it's a billboard for a piece of clothing as opposed to being in the store where that salesman will talk to you about why that piece of clothing is special and how it will work for you specifically. It's subtle, and it makes such a huge difference.

FACUNDO: Yes, yes. For sure. I agree. Completely agree.

JASON: Okay. So this is probably a good opportunity to switch over and do a little bit of actual coding. So let me switch us over into the pair programming view here. And I'm going to bring over this window. All right. So today we are doing live captioning, like we always do. Thank you to White Coat Captioning. We have Rachel with us today. Thank you, Rachel. That's made possible through the support of our sponsors. Netlify, Nx, and New Relic, added on the show. So, thank you so much to all the sponsors. And if your company is sponsoring, I got one more slot. Hit me up, y'all. We're talking to Facundo, who's on the tweeter. I'm going to have to actually search your name because I always get it wrong.

FACUNDO: Yeah, I have the -- that's me. Yes.

JASON: (Laughter) all right. Let me drop this in the chat. And if you want to follow along with the live captioning, that's on the home page, learnwithjason.dev, as always. And we're going to be doing personalization with Storyblok today. So let me drop the link to Storyblok. And that is the extent of my knowledge. So what should I do first?

FACUNDO: Nice. Cool. So as I mentioned before, Storyblok is a headless content management system that you can use to, well, actually create content and manage that content in the projects that you are going to create without using a particular presentation layer or front-end layer. So you can -- the same content you create once, you can use it in different channels like mobile application, web applications, et cetera. Besides that, you can select the technology that you want to use because you are going to connect to a particular API and bring and consume the content from that API. So again, it's technology agnostic. You can use the technology that you want. The cool thing about Storyblok, or two cool factors that Storyblok offers, two capabilities, let's say, is that Storyblok offers a real-time visual editor. So if you're working on a web project, for instance, you've seen the front end of the application you're creating. I mean, the actual code of the front end of your application. You can offer that to the people working with the platform a real-time visual editor where they can see how the content they are creating is going to look. So if we are developers, this probably sounds like a cool thing, but it's not a big feature as it is for content editors. Because the content editors, they don't want to ask to the developers to generate a preview. It's always an added value to see the content you are creating and how it's going to look like based on the logic of the front end that you are using. Again, as we mentioned before about personalization and the differentiations, it's like it's probably a friendly user interface for you, having a visual editor where you can see the content they are creating and how it's shaped instead of having a form where you are filling details or the different fields of different properties of different field types. Then you have to somehow generate the preview for that. So I would say that one of the cool features of Storyblok is this real-time visual editor. The other cool feature that Storyblok offers is that it organizes the content using a component approach. So you can create component structures inside a headless content management system, and you can manage those components in the same way you use a front-end framework or front-end technology that follows a component approach. For instance, React. So you can create component types or block types, as we call them in Storyblok, that you can reuse in different parts of your project and page. You don't need to re-define the same content structure over and over again, right. So you can use that same component type you created in different parts of your page. You can use them inside other components. So you can create a nested architecture of components. Basically, the idea is that you can organize the content with these reusable components. But on the other hand, you can link these component structures that you are creating in the content management system with the components you're using in the front end of your application. So you can create a component called "call to action," for instance, and you can link that call to action component in the content management system with a visual representation of the component, which is probably a React component. So you will know that all the code that you are going to use in the content that you create, you are defining the same logic or the same presentation for them using React components, for instance.

JASON: Okay. Great. And I see Ben just showed up and subed 23 months. Thank you, Ben. You're almost two years old on the Learn With Jason channel. That's very exciting. I see coding cat gifting subs. Anthony, welcome to the boop crew. Spam the heck out of those emojis. Stefan, I see you in the chat. Lots of familiar faces out there. What up, everybody? It also looks like we're close to a hype train. If anybody is feeling gifty, today is the day, y'all. So yeah, let's do it. Let's go ahead and actually start coding, right. So is my first step here -- I think I already have a Storyblok account because I did an episode with Samuel back in the day. So let me see if I still have this. Oh, no. Are you going to let me in? I do have a Storyblok account. No!

FACUNDO: Oh, almost.

JASON: Confirm your email address. Okay. So resend my confirmation email. Apparently did not ever confirm my email. But that's okay. So I'm going to open up my email in the other window here, find my -- here's my confirmation instructions. Copy this link. Come over here. Do one of these. Okay. Now I got to log in and try that one more time. Hey!

FACUNDO: There we go. Awesome. Awesome.

JASON: Okay. So we're going to do personalization. If I can spell it. There. So I've now created a new space. What do I do from here?

FACUNDO: Okay. So we have only one story. That's how we call the items in Storyblok, the content items. Then you have a list of -- let's do this. Do you want to be part of an experiment? Do you want to see something new, something cool?

JASON: I -- yes.

FACUNDO: Okay. No, no, no. Don't be scared. I'm asking because the Storyblok product team is working on version two of Storyblok, of the application.

JASON: Okay.

FACUNDO: And we are releasing it in August -- the 2nd of August. And there's a public beta. So we can switch to version two and play with it. I'm saying an experiment because if you find any issue while using it, it will be very welcome feedback. But I hope it doesn't appear we have a bug and everything works smoothly. But we are -- yeah, I mean, the idea is that we lease version two of Storyblok. We're announcing it the first days of August. So it's pretty soon. We can use the new interface of the application, right. The new user experience. So cool. Now we are in the same space with the new options, let's say. In the content menu, we can see the different stories or the different content items. These content items are organized in folders, like the file system of your computer. This story, in this particular case, is the home story, which is like the homepage of your website. When you open it, you can see that this pre-generated page has a teaser on the right side. Those are the components. On the left-hand side, we have the real-time visual editor I was mentioning before. You can see on the top of the page that there's a URL there. That URL is pointing to where the front end of our website is living. I mean, if we're hosting an instance of the front end of our application, there's where you can point it. The visual editor is basically an I-frame. So you can browse any page there, even your local host. So if we are going to work on your local host creating the project, you can see that inside there. Configuring this preview URL, you can point to the local host of your computer. If not, if you have deployed your project, you can use it too. I mean, if you are deploying to Netlify, for instance, and you have your production environment, it even is cool that you can set different preview URLs in the case that you want to verify that the content is looking good in the different environments that you are managing. You can add more than one preview URL. So you can test the different environments of your application.

JASON: Nice, nice, nice.

FACUNDO: Basically, what we have here now, I mean, if you don't pay attention to the visual editor because you didn't configure any front end or you didn't connect to any application, what you see on the right-hand side is very similar to what we have in other content management systems. It's basically the content that we want to create, organized in components. You can see the teaser component, the grid component. As you can see, the grid component has other components inside of them, which are features. These are the default components, the default blocks we have in our space. The idea is that we can extend the behavior of these spaces or create new structures in the block library that we have in Storyblok that you can access from the inside of this page if you go to the white bar that is at the top. If you go to the fourth item, counting from the left, if you click there, you will see all the available blocks. I think you can drag and drop that to see that. Ah, there we go. Awesome. So what you can see there, we have four block types. The feature, the grid, the page, and the teaser. The page itself is also a block type. They can be of different types. You have the content type, which is something you use to define the template for the story or the page, let's say. Then we have the nest of components, which are the ones you're going to use inside these pages.

JASON: Gotcha. So if we want to set something up so we can start doing personalization, what's the right way to go there?

FACUNDO: So, I mean, probably we can have a homepage where you display certain content based on certain criteria for a user. So a simple example that we could follow, beginning with this space, the blank space, is having a teaser. We can show that teaser to a certain user. Let's say a message that says, for instance, if you are in summer, it says, hello, summer. If you are in winter, grab some tea, or something like that. I don't know. So there are different approaches that we can implement in the headless content management system. As we said, you are consuming the content from an API and displaying it in the front end of your application based on the logic that you're using in your front end. So what we could do, for instance, is create two teasers in the page, one for the winter and one for the summer. And then in the code of the front end of your application, you can displace one or the other based on certain logic of the code of your application, right, or based on the visitor of your website.

JASON: Got it, got it. So I've got my two teasers. Currently winter, currently summer. So I've created two blocks. Then we have this grid. So if I save this, okay, now we're saved. I haven't published yet. How would we pull this locally so we can start building it?

FACUNDO: Cool. So we can start a project using -- what technology do you prefer to use?

JASON: I know React the best, so I'd probably be fastest with that.

FACUNDO: Cool, perfect. So we can create a new React project, and I'll share with you a couple URLs we can follow. But in the developer relations team at Storyblok, we are creating SDKs to make the work easier for the developers to work with Storyblok and to integrate Storyblok into their projects. These SDKs, we are creating them for different technologies, for different frameworks. One of them is the React SDK that you can use. So following a list of simple steps, let's say, you will be able to connect to your space, bring the content, display that content. And the cool thing about the visual editor is we will be able to mark these components as editable, which means you are able to click on the components in the visual editor and actually edit them inside Storyblok. Because it's not only a preview, but you are modifying the values of the properties. You can also interact with the page itself, like click in the different components and edit them.

JASON: Gotcha. So can I use just like Vite?

FACUNDO: Yes, yes.

JASON: Okay. I'm going to create a new project. We'll put this in personalization Storyblok. I'm going to make it React. I'm not going to do TypeScript today because nobody wants to watch that. Then we'll npm install. And I don't know if we're going to end up using any serverless functions. It sees we're using Vite. I must have something else running somewhere too. Something weird is going on. Rather than me trying to figure out what's going on, I'm going to use npm run dev. I think I might have done something with another app running. Okay. So here's our count. So this is the app. We're running. Everything is good. If I go in here, I can open this. And we can see here we've got our app. So I'll run it again. And then I can move this one to this side and this one to this side. Make them both a little bit shorter so they don't show off the bottom of the screen. Then I will close this out. And let's just make a little -- so we've got a live reloading app up and running.

FACUNDO: Awesome.

JASON: Great news. I'm very excited about that. So you said there is something I can install to just pull Storyblok in for me.

FACUNDO: Yes. It's an npm package that is called @Storyblok/react.

JASON: Like that?

FACUNDO: Yes, yes.

JASON: Okay. Here we go.

FACUNDO: Oh.

JASON: What have I done? Unable to resolve dependency tree. Am I missing things? Oh, does it not like React 18?

FACUNDO: Oh, yeah. We can use --

JASON: Let me just do the legacy peer deps, and it'll be fine. It likes to yell, but it'll be okay. Now we're okay.

FACUNDO: Cool. Another thing that we may need to install, this is temporary, but React is using an API client that the product team from Storyblok created in the past. We are using Axios to do the API calls. So probably you'll need to install Axios. I know removing access to all SDKs is coming, but just to be sure we have Axios. Cool. That's all we need to install from the Storyblok point of view, let's say. So what we need to do now is to initialize a connection between our project and the Storyblok space. Where your project is living. So in that case, what we'll need to do is to go to -- I will share that in the chat. This is something we need to format. But if you go to your index file in the React project, there's a function that is included in the npm package that is called Storyblok init. So if you import Storyblok init --

JASON: At the full app level like this?

FACUNDO: I mean, before creating the app level. It's something that you will execute once, and it will be used during the project. So you can do that in line five, for instance. And that should make the magic.

JASON: And it was import from Storyblok -- what was the import?

FACUNDO: Storyblok init.

JASON: Just like that? Oh, here.

FACUNDO: No, with Storyblok. Cool. And that function receives some parameters. Well, it receives a JSON object with a list of parameters. Exactly. The first someone the access token. You need to go to your space. You go to the settings menu. Then you go to the top of the page because there's an option that says visual editor. Oh, no, access token. Sorry. Then you have the access token. No, if you go below that, there it says token. That's the one we can use. Preview means you are working on a testing environment. You can create a token for the production environment, right. Cool. We have the access token there. There's another thing you need to import from the Storyblok React package, which is called the API plug-in. When you are importing the Storyblok init function from the Storyblok package, there's another component called the API plug-in. We're going to use that API plug-in to actually code Storyblok API to bring the content. So if you want to use this plug-in, you have to actually in the Storyblok init function, another property of this JSON object, it's called use. You can put use, and then you send the API plug-in. Between brackets because it's a module.

JASON: Because it's an array. Got you. Okay.

FACUNDO: And then the other property that we need to send, which you are filling correctly, is the component list. What is the component list? What we are going to do with these components is create the list of React components that are going to link with the blocks in Storyblok, and we will tell -- I mean, this is kind of tricky. The idea is that we can give the possibility to the code of our application to render the content, no matter which type of block we are using in the body of the page. So if we have a dynamic body in our page in Storyblok, we have to give the possibility to the front-end editor to dynamically render the content, no matter which block type we are using. Because if you are using a homepage and I want to link the -- what were the names of the blocks we are using? We have a teaser, we have a featurer.

JASON: Yeah, yeah, yeah. So we need to get --

FACUNDO: Exactly.

JASON: Teaser, grid, feature. Those are the ones we're using.

FACUNDO: And page. And page. Because it's the template of the page we are using. I mean, the thing is, if we don't use a certain dynamic feature of rendering the content, you will be forced to manually define the structure of your page with the components you want to use in your page. I have to create a homepage with a page component, with a teaser component, with a grid component, and that doesn't give you the flexibility of doing that or doesn't give you the flexibility of doing it from the inside of the visual editor. So the idea is these components will be an array of linking. The name of the component in the Storyblok headless CMS and the actual instance of the React component, right. Sorry. It's like a list. Yes, exactly. So what you will have there is a list of -- exactly. You'll receive page from the Storyblok API. Then you'll say you will render a React page component. So you'll need a component called page in this case. And you'll need to include that here. Which components do we need to include in this property? The ones we want automatically rendered based on what's coming from the Storyblok and the ones we want to be able to edit them in inside the visual editor. Exactly.

JASON: So I'm just going to get these mocked up so we kind of see what's happening here.

FACUNDO: Yeah, sure.

JASON: So I have page. Then we'll do another one for teaser. This one needs to be capitalized. Then we need another one for grid and another one for feature. Okay. Now, this isn't actually going to work because each of these is kind of not functional. It's not actually accepting anything, which means it's going to stop at the page component because nothing ever gets down to these, if I'm understanding correctly. But it should at least give us a page component, right?

FACUNDO: Yes, yes. Sure. I mean, you will need to -- you will see what happens. But in the first test, we will see only the page component because all the other components are inside of the page, and we'll need some way of telling that inside the page we can have other components and that we can have a list to our components. Cool. So this is all the configuration we actually need to connect Storyblok with our application. What we need now is a way of bringing the component -- sorry, bringing the content from Storyblok and rendering it based on this logic. So to do that, we can go to the application file, the one that you're going to.

JASON: How do I actually get this -- so I did this init. Do I have to pass this into the app somehow?

FACUNDO: No. What it's doing is running a certain list of functions that will initialize the content between your project -- I mean, what you are seeing there is basically initializing some parameters and bringing the API client that will be used inside the code of your project. We need a couple of functions to be called in the code of your page or your components to actually call the API to actually bring the content, et cetera. So this is like an initialization of certain parameters based on your application and the parameters that you will use to connect to Storyblok.

JASON: Gotcha. Okay. So if I come in here -- actually, let's start the server. We can come out here and look at this. Now, if I go in here, what I'm going to want to do is just get this out of here, and we'll do one of these. All right.

FACUNDO: Amazing.

JASON: And now I don't need this. And I don't need any of that. So now we're looking at a pretty bare-bones, simple little app. And I want to bring in my Storyblok stuff. So we initialized it in main. Now I want to actually use it.

FACUNDO: Exactly. So to do that, we need two features coming from this same React SDK. The first one you're going to import is a function that we call use Storyblok.

JASON: Okay.

FACUNDO: That one. And now that you are there, we are going to import a component that's called Storyblok component. Yes, that one. Exactly.

JASON: This is not helping. I'm going to move that over. Okay.

FACUNDO: Basically, the use of Storyblok function is going to call the API to bring a certain story or the content related to a certain story and initialize the connection between that story and the content we are editing inside the visual editor. So whenever you change something in the visual editor, it will be reflected in the instance of your website or the website you are running. So what you are going to need to do -- I mean, what you will need to do there when loading a page is actually bring in the story that you want to display. In our case, it's the home story. So you send the use Storyblok, and that function receives different parameters. The first one is the page you want to show, which in our case is the home. Then you can send API options that are going to be used in the case that you want to load certain information or another feature or if you want to show the draft version or the published version of your story in a way to differentiate the draft version and the published version to talk about the version of the content that your end users are visiting and the version of the content that you are editing, which is the draft version. If you send the parameter version and send the string draft, what you are going to bring is always the draft version of your story. So that function will bring you a story object, which is a JSON object, with all the properties that represent the different values and the different properties of your story with all the components inside of them. So that will make it work. On the other hand, what we need to do is actually render the content. So inside there, we are going to use the Storyblok component, and you can send the parameter block to that. Yes. And what you are going to send to this block property is the story but not only the story. It has a property called content. So it will be story.content. No, sorry. Instead of sending the story, it's story.content. You will see the structure of the JSON object that represents the story. The content is what we want to use. We do this because you could use the story, but this Storyblok component is not only for the page itself. It can also be used for the components that you're going to have inside your page. So in the case that you want to renderer, for instance, the grid that we have in our example, the grid can contain a Storyblok component that will render all the components that it has inside of it, and you don't know which type of components they are. So you don't need to specify that.

JASON: Okay.

FACUNDO: This will make them work. And if you save now, you should see the content that you have in Storyblok. Well, I mean, render in the logic.

JASON: Right. So we set our page up to be like this. Now, what comes in to a Storyblok component page?

FACUNDO: So you receive a block there.

JASON: Okay.

FACUNDO: And the block that you receive -- well, you can use the different properties of that block. In this case, you can say, for instance, the block has a body. This body is the least of components. No, no, it's correct. What you're doing is correct. Your page, the block that represents your page, has a body. And this body is the list of blocks. So what you will need to do is map in this list of blocks to the Storyblok components.

JASON: Okay. And that'll be -- let's do a B. Each of those is like that?

FACUNDO: Exactly. Perfect.

JASON: So issue that -- hey! Look at it go!

FACUNDO: There you go. There you go.

JASON: Okay. So now we're getting somewhere. So each of these is also going to get a block. And then with these, we expect the teaser doesn't have a list of components. This one I could theoretically do block.body. Is that right?

FACUNDO: Well, no. That's a good point. If you go to Storyblok now, you will see that each one of these blocks has their own properties and their structure. If you go to the top right corner -- oh, no. That's one way. But if you go to the top right corner, like at the right of the button publish, you have an arrow pointing down. Yes. You have the draft JSON and the published JSON, which is what we were talking before. You have a draft version of the story and a published JSON. If you click on the draft JSON, you will open what is actually your story. That is actually your story with the different properties. And the different values for those properties. What you can see there is that your story has the content property that we used. This content has a body. If you open that content property you have there, we have a body. This body has the list of blocks. Each one of these blocks has a component. The property component is the string you are going to use in the list of components that we were using in the Storyblok init. So you see the property component tells you which type of component you are rendering. Then you have the different properties based on the type of the component. So you have the headline for the teaser. The columns is the property of the grid. So you'll have a list of columns.

JASON: I'm just going to copy this. This one would be columns.

FACUNDO: Exactly.

JASON: And same thing. Then with this one, we want block.name is what I saw.

FACUNDO: Yeah, name. Exactly.

JASON: Okay. So let's get back out here and take a look. These will be columns. So a little more setup there. Then if we take this and pull it over, we should see -- so if I do something like this and save.

FACUNDO: Exactly. The cool thing -- or not the cool thing, but what we tried to do to the content editors is exactly what you just did. But without having to refresh the page whenever you are changing the content and being able to do that from the inside of Storyblok. So we do have a way of doing that right now. There's another function that you can use from the SDK in the code of your application that is called Storyblok editable. That can coming from the same npm package. So if you are in the place where we define components -- no, because you have to define that at a component level. You need to mark which components you want to edit. So you use Storyblok editable, and that's actually a function that you have to add to the mark-up of each one of the elements that you want to edit. In the case of the page, probably it doesn't make a lot of sense unless you are not going to click on the page.

JASON: So like that?

FACUNDO: No, the Storyblok editable function has to be in the HTML tag. So if you go to the H1 and add the code to the Storyblok editable -- I mean, you can add something like this. Let me share with you in the chat.

JASON: Like around the mark-up here?

FACUNDO: Let me see. I don't know if you have access to the chat of this application.

JASON: Oh, I see what you're doing. So I want to do it inside like this but then spread?

FACUNDO: Yes, a spread. Well, you have to close -- well, it was not super clear, my example. You need to do something like this. So this function will receive the block. What it's doing in the background is adding some data attributes to the elements. There you have the H1. What you need to send is the block element to the Storyblok editable function. And then you need to actually render the content inside of it. This Storyblok editable logic we are adding now is basically to be able to click on the elements and recognize the elements inside the visual editor.

JASON: Like that.

FACUNDO: Exactly. Like that.

JASON: Okay. Long walk for me to get there, but we got there.

FACUNDO: Yeah, sorry.

JASON: We got one of those. We got one of these. And that should do it, right?

FACUNDO: Yes, probably we can do the same in the grid, but you'll need to add a wrapper HTML element in the case you want to click on the grid. If it's a list, I don't remember how you defined the grid HTML element.

JASON: So the grid was just a map like this.

FACUNDO: Yeah, sorry. The grid there. Probably if you add a wrapper div or something like that, you are able to click on the grid too. So in the case you want to click on the grid and edit it. But that's in the case that you want to do that. There we go.

JASON: There we go.

FACUNDO: Yes. What we need to do now is actually set the preview inside the visual editor. So instead of using the URL that says quick start, what you need to set there is where the front end of your application is living. So what you need to do is change the URL and set your local host.

JASON: So one of these. Go in here. Editing.

FACUNDO: Yes.

JASON: Saving.

FACUNDO: But there's one thing that we will need to double check. Yeah, go to the visual editor. And let me see. Because what I wanted to show you is that for security reasons, the Storyblok team decided it is more secure for you to point to an HTTPS instance of your application instead of an HTTP instance. One way of working around this when working locally is settling an HTTPS proxy. If you don't know how to do that, you have the steps there. If not, you can install -- I mean, you can see there that you can create a certificate. You can create a proxy using a different port pointing to your application. That will be another method. Those are the suggestions we use from the Storyblok team. This is for version two of Storyblok. If you want to use the HTTP version of your code, we can go back to the version one, which is totally fine in the case that you don't want to.

JASON: We have about 15 minutes left, and I want to make sure we have time for the personalization. So let me -- how do I --

FACUNDO: Yeah, back to version one. Sure. That's way easier. So if you go to the content home, yes. There you go. It should load your page. Now you can see the borders. If you click on them, you load them, and you can actually edit them and see they change in realtime. What is cool about this is that if you now add a new button -- sorry, not a new button -- a new block to the body of the page or to the grid, you will actually see the change has been implemented in realtime. They are dynamic.

JASON: Cool. Yeah, all right. I get it. I'm going to drop this one out because it's semantically nonsense. But let's go ahead and save that. Then let me fix this one real quick. And I want to make this function.

FACUNDO: Perfect. So, yeah, from Storyblok point of view, this is ready. So now what we need to do is actually the personalization logic.

JASON: Right.

FACUNDO: So that's a very good question. What we need to do is in a certain way define if you are in summer or if you are in winter in the code of your application. Based on that, show one component or the other, right.

JASON: Yeah. Okay. So let's do this for the sake of this demo.

FACUNDO: Perfect.

JASON: Right. Because we're not going to have time to get any geo in here. So we can do this in the way that I would -- did that work? What's going on?

FACUNDO: It's not loading.

JASON: Looks like it didn't load. That's fine. We'll just refresh the page. That's how I solve my problems. Did I kill this thing? What's going on? Whoops. Storyblok doesn't like whatever I've done.

FACUNDO: Oh, what happened?

JASON: I don't know. I'm getting a waiting for Storyblok time-out. Let's stop. Maybe stop the server. Try it one more time.

FACUNDO: Ah, there we go.

JASON: There we go. All right. So now what we want to do is we need to pull out some logic. So what I'm going to do is now can be a new date. And we want to check if -- let's see. I always forget how date works. We can do -- so if I get like date equals new date, right, then we can do a date get current month. If I can spell it right. Come on now. Get current month. So it says what month we're in. This is always confusing. It is July, but it says month six because it's zero indexed, which is so freaking confusing. So we will define -- I don't know what the exact dates are, but we'll say May, June, July, August, right? That feels like summer.

FACUNDO: Yes, yes.

JASON: You're from Argentina. Why am I asking you? (Laughter) We'll say summer months north, and that is May, June, July, August. We'll make that count.

FACUNDO: Yeah.

JASON: And we can say const is summer will be summer months includes -- is that right? Includes? Yeah, we're going to try it. Now get month. And then I'm just going to log this and make sure it actually is doing what I want. It is summer. Okay. So now that we know that it is summer, we can make a call inside of here, which needs to check whether or not -- how are we going to do this? So we'll have to say --

FACUNDO: You can add a property.

JASON: Yeah, let's solve it for real. Let's go back into Storyblok, and I need to edit this field.

FACUNDO: No, in the teaser. That's the one that's going to be different.

JASON: Oh, you're right. You're right.

FACUNDO: Sorry, in the content. Well, it's the same. You can do that from the inside of the visual editor or outside. If you go to components, now that we are there, you go to the teaser, and you can add the property. No, that's the top. Sorry. You can add a field at the top where it says enter a key value. You can put there, yeah, summer. And you can edit it. You can select the field type.

JASON: I want this to be in boolean.

FACUNDO: You can save the schema with the button. Cool. So now we need to go to the actual page.

JASON: This one is not summer. This one is summer.

FACUNDO: Yes.

JASON: We'll save that. Then if I want to get my draft JSON, and we'll look at the preview again down here so I can see it more easily. Here's my preview. Story, content, and here's my block. It's just going to have a .summer. Okay. So I can then check in here if block.summer equals --

FACUNDO: Yeah, you need to check in the block has a summer property because, for instance, the feature or the grid components don't have a summer property.

JASON: Oh, yeah. Okay. Does that one work?

FACUNDO: Yeah, I think it should. And does not equal summer. So that would be the opposite. That should fix it. Then it is currently summer in the Northern hemisphere. Let's change our range of months. So that's going to be summer north, but we can do summer south. What are the summer months? Would that be like --

FACUNDO: Well, it's December, which is -- yeah, exactly. January, February, and March probably.

JASON: Okay. So we're going to pretend that I've renamed my values correctly. And now it is not summer in Argentina. Okay, great. So I'm just going to rename that. Then we'll uncomment this one. And there we go. Okay. So we have very -- this is like very rudimentary. This is great. We have personalization running, and it's running in a way that's tied into a CMS. Again, look at this. There's nothing personally identifying here, outside of the fact that we would need to know if you were in the northern or Southern hemisphere, just based on the server you're connecting to. Not anything to do with you specifically. So I find this to be pretty exciting because it shows the lack of deep detail that is required to do useful personalization. Again, what we've done here is just toggled some text, but it would be pretty interesting if this is a company that has a summer function and a winter function, like a clothing store. I can show the summer or winter collection based on where somebody is coming in from the world. And that suddenly makes the site just a little bit more relevant, right. And I feel like especially when you're working in a global context, that little bit of stuff makes such a big difference. Like, imagine every website is trying to put personality in. So we're all doing stuff like saying instead of our app being like greetings, human. It's very much, hey, Jason, what's up? That's a very American way to do that. But if your site was greeting people like when somebody shows up in Spain, it was like hola, instead of what's up. Or you want to keep it casual. Que pasa? Whatever. There's so many options for this to feel a little more yours. I think that's definitely a good addition. I'm being told that greetings humans is a Disney bit. So great. I await my copyright takedown. (Laughter)

FACUNDO: Nice.

JASON: Okay. So I think we might be out of time to do anymore coding. So where should people go if they want to learn more?

FACUNDO: Sure. Well, in Storyblok, if they want to learn more on how to code, there is a website they can go, which is Storyblok.com/developers, if you are a developer, of course. We have Storyblok.com/docs, in the case you want to read things more generic, let's say, and not only developer focused. But those are, I would say, the main starting points because the developers page has links to the different technology hubs that we are maintaining in Storyblok. So depending on the framework that you want to use or depending on the programming language, we have different tutorials. We have guides. We have code samples. We have the SDKs that you can learn how to use. So yeah, basically I would say the developers page is a good starting point. I wrote an article on how to create a very small personalization project using Next.js in the case you want to use it with Storyblok. You can look at that in the Next.js technology hub that we have in Storyblok. So if you go there, you will see that. But yeah, if you want to -- yes. No, sorry. That's a new page that we created and that we are working on. If you go to Storyblok.com/developers, and you go a little bit below, you will see that we have the hubs. You will see tutorials with how to connect with Storyblok in five minutes, how to create a multilanguage project, which is very interesting, related to the same thing about personalization. Showing the content in different languages. That's the article. How to personalize your project using Next.js. It's a very small project that you can see exactly the example that you mentioned before on showing sportswear or elegant clothing, depending on where you are visiting. And one approach we take as an example to show you how to implement that with Storyblok. Again t will depend on how you want to implement that, how you want to create the project. I don't want to be repetitive, but there's a recording of the talk that Jason presented at Render Atlanta, which is a very similar use case but with a different approach on how to solve it, so you can take a look at it too. You can watch the recording.

JASON: Are those on YouTube? I actually haven't found these.

FACUNDO: Yes, they are in YouTube.

JASON: Okay.

FACUNDO: Not related to personalization, but I also presented a talk at the same event. So if you want to watch the recording, it is in the Render Atlanta channel. So if you want to learn about headless CMS, the concept of headless and how to connect Remix project to headless CMS, which is Storyblok, you can watch the recording too. There you go. There's your recording.

JASON: Where am I? Here's yours.

FACUNDO: Yeah, that's mine.

JASON: Here's me. Okay. All right. Real confused there. So here's Facundo. And here's mine. This one is about specifically kind of personalization but personalization as a use case to show this idea that a front-end dev without, I think, a whole lot of deep experience in middle and back-end stuff can really build a lot of complicated stuff. This was a really fun one. So I hope that y'all go watch it and give it a try. And yeah, headless stuff is always very powerful. So definitely worth checking out there. Let me do a quick shout out. Make sure you give Facundo a follow on Twitter.

FACUNDO: Thank you. Thank you.

JASON: And while you're looking at things on the internet, make sure you head over and look at the schedule. We've had Rachel with us from White Coat Captioning all day, taking down all the words we're saying. Thank you very much, Rachel. That's made possible by Netlify, Nx, and New Relic, all of whom are kicking in to sponsor this show. Check out that schedule while you're on it. We have some fun stuff coming up on the show. We're going to do motion. We're going to do Rust. We're going to do visual page building. We're going to do accessibility testing. And a whole bunch more that I think is going to be a whole lot of fun. So please make sure you mark your calendars and subscribe, follow, do all the things that you do so that you can be part of it when it comes out. Right? Right. Okay. With that, Facundo, I think we're at time. Is there any parting words for the chat?

FACUNDO: Oh, well, thank you for watching. I hope you learned something new. At least a small piece. No, that you get into the idea of personalization, which is pretty interesting. I think there are a lot of people, how to say, learning about it, implementing it. We are at Storyblok see a lot of customers asking about how to implement personalization in their projects. So it looks like a trend in the market, I would say, or a buzzword that everybody is asking about. So yeah, I hope again that you learned something new and you enjoyed this show. And Jason, of course, thank you very much for inviting me to be part of the show.

JASON: Of course. Happy to have you. Thanks for hanging out. All right, chat. I think we're going to go find somebody to raid. Let's see who's live right now. And we will see you all next time.