--- title: "Personalizing Storyblok with Uniform and Nuxt.js" description: "In this stream Tim from Uniform is accompanied by Samuel and Alba to help him set up Storyblok from scratch. After that they dive into how to integrate Uniform with Storyblok as a custom field type to show off how to personalize Storyblok." date: "2021-06-11T07:28:59.000Z" url: "https://timbenniks.dev/videos/live-uniform/003-vkfasdfduf8" youtube_url: "https://www.youtube.com/watch?v=vkFASdFdUF8" playlist: "live-uniform" duration: "1:23:17" image: "https://img.youtube.com/vi/vkFASdFdUF8/hqdefault.jpg" tags: ["composable-architecture", "cms", "personalization", "frontend", "developer-experience"] --- # Personalizing Storyblok with Uniform and Nuxt.js In this stream Tim from Uniform is accompanied by Samuel and Alba to help him set up Storyblok from scratch. After that they dive into how to integrate Uniform with Storyblok as a custom field type to show off how to personalize Storyblok. Watch on YouTube: https://www.youtube.com/watch?v=vkFASdFdUF8 ## Transcript three days of work and that ah okay emails and etiquette and again and again wow well we are live so let's see we don't have any viewers yet but we are live so that's super cool and there should be some tweets going out because i scheduled them let's see if that works i'm just gonna go quickly and check our youtube so we actually do have some people watching so i think um let's you know what we're just going to start and if people come in it's all good so hello everybody feel free to comment and connect with us and say anything you would like because we're going to be talking about storyblock and how you can personalize a gemstack website because gemstock websites are generally static right but we can actually do dynamic stuff with that so how about we do a round of introduction so alba who are you and why are you here well i'm always from spain but since one year and a half ago i live in amsterdam in the netherlands and i'm a senior front-end consultant and passionate people ah the company that makes possible pbes amsterdam yes world and that conference that are so cool and i just started working here uh with the teachers that i love that i use for creating my own website that is snags straight log uh tiger css the things that i use daily so for that i'm here i think and and now yeah now i can work with these technologies here so i'm work i am working on the passion people website all the conference sites we we are factoring so it's so cool and i hope to help you with this way well you are definitely a specialist in all the things that i like so it's going to be super interesting to see what you have to say when i show off our stuff so samuel what's up man it's been a while yeah it's written a while last time we saw each other in like some conference i didn't even remember really i don't even remember oh anyway the real real time is like definitely amsterdam like uh 2000 2021 the last conference in person but hi everybody uh it was like nice uh nice uh yeah thinking about the old good times uh by the way i am the samuel um uh i'm here from uh i'm the devil right now like the head of the developer relations which i'm like finding out what that's exactly mean oh yeah all the responsibility and i'm working for uh our from storyblock and uh my my story is like uh very interesting i was like not uh planning to be a web developer i was like always planning to be like a software analyst okay i was like also studying at the university for that and i was like already doing all that uh crazy jobs like uh insurance systems and that kind of crazy stuff which was uh to be honest like quite boring and uh somehow i landed in germany and i couldn't use i wasn't i wasn't so able and couldn't speak so much and you know like it's quite difficult to be an analyst uh if you can speak the language so i changed the web depth and that was much more fun you see the results finally so i will look at your where you are in your career so that worked for sure yeah it's a much much more fun i would say and after some time i find the next which was like uh the love on the first first of like first look i mean basically i should call myself next developer because i was trying to yeah yeah i guess for two weeks or literally like two weeks then i found out about the next i never went back to view oh really there you go so sorry i like and then uh i was missing only one thing and it was like the how to take care of my content so if you have a client and all that stuff and that's uh when i try started trying to different content management systems and i found out about the headless system i was like this is a cool idea i was like even thinking like i would love to build something like that but then i found it already that somebody built something pretty cool like that and that was the story block yeah in this case and uh the ceo uh or dominic our boss he he just get me like on the board basically uh by the approach i just wrote them uh with some minor changes and they just implemented it in 24 hours that's a nice moment to join the company right so they blow my blow my head and then i was like it's gonna be fun i was ambassadoring by advocating for storyblocks next speaking on small meetups and slowly getting to the bigger bigger conferences and then the last year after we get the seed round and after existing also the company for five years we just uh starting to hiring so i was like the one of the first employees and now we are already like uh 40 people if i'm correct like this month uh wow 240 people on a seat round you must have some good revenue no no we wow that's great man thank you for that introduction i i didn't know all about all that stuff so that's cool so what i wanted to talk about today is of course about storyblock because i used it for the one of the first times the other day and i just filmed myself trying and it worked so well it's like oh that's very interesting and a bunch of my contacts that i work with they all have storyblock working with them and they're like hey but how does it work with uniform and what you guys do and can you integrate them like who knows so basically the output hey christian let me just put that on the screen this is my dear colleague christian hi hi hi christian how are you man thank you for joining us and there we have arisa hi elisa thank you for posting something awesome so what i basically want to do today is kind of talk about what uniform does at least what we do now and we're going to be doing much more different things in the future but we'll start with personalization and how that works in um headless cmss because that sounds quite normal right it's not that normal it's actually pretty complicated and i'll talk about why and i think maybe um let's just start with a little presentation about what personalization is on a technical level because there's a reason that a lot of developers don't actually do personalization because in traditional systems that are not headless it's pretty complicated and it's pretty hard to do and it's pretty slow and we have core web files and all the other fun stuff right so that's why we have headless cmss and gemstack sites but so we're going to go into the future and like how can we personalize websites with gemstack that are normally static so feel free to comment on anything both of you because you are working on the other end you're at the product in alba you are actually using your product every day with all these systems so let's see if what i show you actually makes sense and if it doesn't i would love to know more about why not because i might have to explain it differently or we have to do a change and you then change our roadmap right so let's talk about personalization but first of all why is it actually important right because i keep talking about it but why and so basically personalization creates relative relevant content for the users right and so if you have relevant content that generally makes you love a website because it's so intuitive it does what you wanted to do without you actually realizing that it's trying to do that right and so if you love the content of a website generally you have a higher conversion and what i mean by higher conversion let's say you have a goal to buy shoes or go to a conference and buy a ticket if it's personalized towards what you want with your goals in mind you will have much more higher likeliness of actually buying that ticket right and as it turns out based on a whole bunch of research that is 19 more conversion like 19 think about it but imagine if amazon had 19 more conversion on their sales that would that means millions a day right that's how we did this number that is like when i first learned about this when i joined this company i could almost not believe what i was seeing as it turns out really good personalization you don't even notice it it's just the website fits you and with that you will start buying things or interacting more or commenting more or you know swiping up or whatever you want to do right so to get to that 19 you need to do personalization but it also needs to be a super fast website right and with that in mind i kind of want to talk about the types you can have of personalization in the technical sense right so initially the first personalization or kind of the first came in with the sweet systems so what i mean by sweets are the software like the big monoliths that are not headless but that have a big server with all the stuff in it like from a front end to a database to a web server to personalization or to a whole bunch of other stuff and we're talking about wordpress for example or we talk about adobe experience manager or sitecore or appy server or all of those kind of traditional systems that we all are used to right the thing is though if you want to do anything personalization based with these systems you have a super tight coupling to what they have intended for your front end to be like right if you want to do super custom stuff it's going to take you a lot more effort to to change that front end and generally they are rules based so what that means is you have um rules that put you in a certain group or something called a persona or a segment right so if the sun is shining then i show this and so those rules um once you get into a little bit more interesting storytelling approach there's going to be a lot of rules and so many rules that it's almost not possible to do technically but also operationally like it's really hard for people to understand all those rules because what if you have 20 components that all have different variations based on personalization and you have six personas that all have those rules attached to them and then you want to add another persona you kind of have to have a phd in rule creating to make that work and so that's really hard to do and the problem is that these systems are origin based right every time you hit the page that system needs to go to its server and say hey what are the rules for this person and what persona does they fit and then let me find the right content and then render the page and that is really slow and so it's an interesting approach because you have everything in the same place but it's very limited because of all this and then the next iteration of trying to do personalization better is with third-party scripts and this is the stuff most people will know about nowadays it's like the a b testy and these kind of systems that you you grab a source file javascript you put it on the page and it will change your dom based on the user behavior and it is quite cool it works pretty well the only problem is that the code is in that javascript file and it's rendered by some other system so as a developer you don't have much you know control over it plus it's render blocking javascript because the browser doesn't know what dom to render and because it has to wait for that javascript file and so the performance is a little bit better hey let me just put this here your very first new deathrail welcome my friend welcome to the stream so basically these systems are pretty cool but they are also origin based but it's the origin of the third party basically the performance is quite okay but it's render blocking and they do have a bunch of ai models which is pretty interesting but they're not super super good because you don't have that much structured data so um yeah eraser the whole storybook family is here that's super cool to say um so let's go to the next one and the last one in this list and this is where uniform fits in right so we do api first personalization which means it's kind of a decoupled system just like storyblock is with a bit of sdk to connect and suddenly it all works and so this is decoupled but it is first um how do you call this like it's not third party but first party because we have an npm package and you put that in and because it's jam stack right it all fits in one package so the performance is not at all touched and because it's decoupled you can use a cms like storyblock or any of your competitors to kind of add the personalization in there and we don't do rules at all we have a completely different system that is semi-automated so it's much easier to set it all up so how that works let's just go in in a second hey tony this is my dear colleague tony let's put him in here and so if i don't know something tony will actually help there we go if he has time it's a very busy guy anyways so we went over the types and of course uniform is the last type because it really fits the headless world right so how do we do it so like i said we are api first we don't have segments personas or rules but we have something we call intents and signals and what those are i will go into in a little bit so we can kind of understand how that works and once you know i will demo it on the on the website so you instantly kind of get how that works and so what we do because it's jam stack right we do personalization on hydration time and how that works i'll show you in a bit but that means that it's super fast because all the data is there it just has to show you a different component and if you don't want to do it without javascript we can also do it on the cdn edge with edge workers and that's not really the topic for today but we will be pushing a bit more on that soon because we can basically have page loads under 100 milliseconds that are completely personalized with these edge workers so you don't even need javascript for it and so that's kind of awesome but also complex so that's not for today i like to say that we have the fastest personalization out there but i'll leave that up for you to see that's not really cool to just say it and not show it that's kind of silly so um by the way if you guys have any questions feel free to shoot i just didn't want to interrupt you but uh there's i just wanted to add one more point to the last slide uh when you mentioned like the javascript personalization there was like uh i don't remember the exactly who was who thought it was not from but it was so mind-blowing is like the personal installation basically should boost your conversion but if you like go too far away too far with this role with javascript it's at the end the a b testing was usually also like working exactly either way so if you removed at the end the a b testing personalization then the conversion went out because it was like so much javascript that was blocking oh so it was actually too slow yes yes these are big problems right and we are here to solve those because we're in a world where everything needs to be fast but also we don't like tight coupling to anything and actually sergey you have a question let me just put that on here so today i was about to ask how do i cloak with furso and here we go personas so i'm not actually sure if i understand what cloak means in the context of herself cloak okay um if you guys don't know i know that tony is in our chat here so potentially tony if you know would you mind replying to sergey and sergey if you don't actually get an answer now feel free to reach out on twitter i know we follow each other so you can just find my twitter and then we're happy to demo anything for you if you want okay so let's talk about what we what i mean when i say intents and signals right let's talk about the philosophy that we have at uniform for personalization and that is the intent so generally when you go to a website you have some sort of goal you have an intent to do what you want right and so um okay say okay i see your comment i'm gonna go into it in a bit and then um we'll finish this one first and so let's have in mind that we go to a conference with alba i know you work on conference websites right and let's say we're doing a new conference that has a talk track for developers and for marketers so different talk tracks but also we have cfp right we want people to submit the cfp so they can speak well if i'm a developer and i want to go to this conference my intent will be to watch those developer talks right and so when you know the intent of a user you can then personalize so personalization helps users with their intent to make that goal met right so what we do is while you browse the website we actually create a real-time intent profile of you and so based on that profile that we create based on how the scoring works against that intent that we think you have we will personalize based on that so you don't have to do the rules and the personas and all that stuff because um it is basically semi-automatic it's a bit of code that you do there's a bit of content management and combined that will create a profile for you in intense score and with that we personalize right so how do we know your intent there's a whole bunch of stuff here that i will not go into now because that's a lot but we can go about the basics right so we figure out what your intent is by the signals that you sent and so each signal that we catch or capture from you we will basically change the intent based on that signal that you gave us so let's talk a little bit about that um the conference website right so we have visitors with the intent to submit a talk well it could be that they received an email from passionate people because you're in their network as a speaker right and it has a link with call to papers so you might click that link well that means if you click that link with the utm url inside right that means it's a super strong signal because you go to that website specifically from that link knowing you want to submit it so you can see strength is 100. and so when you click on that link the campaign link that's a signal that you give to us but it can also be that you just went to the call for papers page because you're browsing the site and that is also a signal that you might be interested but it's slightly less strong it's 50 in this case or potentially through the passion passionate people's crm system you already had a cookie that says you are a developer or you're a tech expert so that might already give a small signal to our system that says this person might want to speak maybe not maybe they do let's see what else they do on the site and so you can see we have segments that are cookies we have signals that are browsing pages we have signals that are specific query parameters but we have a bunch more signals i'm like going to a landing page or fisting certain things multiple times right and so before this goes way too long let's talk a little bit about how the data flows in a gemstack site and then we'll just basically go in but before i do that let's have a look at the question from sergey so cloaking is a search engine optimization technique in which the content presented to the search engine spider is different from that presenter to the user's browser i know this one and so this was basically one of the two things google told you to do if you had a single page app right it's either you do just ssr and you make sure that google reads the pages ssr or you do the other thing the cloaking one where you basically just do that spider you quickly say ssr some pages and make them static and that's what you give to the spider the thing is i kind of don't believe in that so much and so in our case if google comes to the website we just don't show the personalized version because we can choose to do it on hydration time or on ssr time or with the edge handlers right so if you just choose to do that with javascript the google bot will just see your normal page it won't be personalized for that user because it's kind of not baked in and that that's what makes that so flexible um i say i hope that actually answers your question if you have more questions feel free to ask so let's talk a little bit how the data flows within jam sex sites right so you have this intent we just talked about this i want to let's say i want to see developer talks well you send the signal and in this case i just have a little function here that says use behavior tracking so you go to the developers page where all the the talks are listed and then you go back to the home page or it goes somewhere else and suddenly there's a bunch of components that are personalized to the fact you just gave the signal that you're interested in developer talk and so that personalized component works a specific way right so it has variations right if you don't have any personalization it just shows you the basic thing and this is what google will see right this is what's rendered as first variation but we also have the developer variation or maybe the market variation because you went to a marketing page and so and you can do many different ones you can also have a combination of developer and marketer together because you might be interested in marketing developers talks i don't know whatever you can kind of do whatever you want here and so this is how i set it up in storyblock and you'll see that in a sec but you can see this is a personalized banner this is kind of a wrapper component for the variations of default developer and marketer and this is where it became so easy in storyblock because you can just have a reference field and you can add other components to it and that just works really well and so you see there's the personalized banner and there's the variations that our code will then choose from when it renders a page and so each component variation has an intent tag specified from the uniform dashboard so in uniform you can actually set up this is a developer intent and we want to track the behavior that's what you see on the left side right and we can add many as many as we want here and then inside storyblock we have the developer banner and there is a tag connected here on the bottom on the right bottom that says uniform so you see that little field that's what i built in one day the other day this week and so this little field connects to the gemstock site or to the sorry to the um uniform dashboard because when we hit publish it's just on the api and this field looks at that so if you have multiple variations of a component and you tag them to an intent our frontend knows what to do at one point so basically i need to apologize this is react code i'm sorry i didn't have a slide with few we do have that but you'll see that in a sec sorry guys anyway so basically we have a personalized hero wrapper component with two components inside so basically we have a read variations function that gets that list of variations that we just saw which is this list right of the variations so we have a personalized component that comes from our sdk you give it the variations and then you tell it when you find the right variation to show render the hero component and this is just a few components that you um you know you import with your page mapper that you guys have in story block so basically you can also do this with slots i'll show you in a sec and this personalized component is smart it just checks whatever was whatever signals were sent it just stores it locally in memory or it goes to let's say indexeddb or cookies whatever it will figure out your signals and therefore your intense core and it will show you something is it may ask yes of course it's a uh you can also define like multiple like uh show different uh like components there or it's like only changing the content um um i will show you in a sec what what you can do because what it actually gives you are just the props of the component it just gives you the json from storyblock so okay whatever that variation of the json is that you want you can do anything you want with that right so basically what we do is we get the intention signals from uniform and so you set them up in the dashboard and once they are available you can actually when you save them they are available in your cms from our api and so when you publish we do also another thing because on our own cdn we actually store a static json file with the whole configuration and it's kind of strange why we would do that right this is my favorite image basically let's talk about how we connect this in gem stacks to make sure that this is clear right because by design gems x sites are only dynamic at render like at build time sorry build time it becomes dynamic and the rest is static so the only moment where you can get all the information from the cms and from uniform is at build time so what we do we have a little uniform cli that you just add to your project and when you do next generate it will actually grab that json file and add it to your code base it becomes part of your bundle so it's now part of your js bundle but of course um well it has like your intents and signals and whatever else we'll show you that in a sec and so on build time it will get the data and it will of course get the story blocked data because it has to render a page right it just queries all the variations and then it builds you a site so what this means is if the configuration is there and all your data is there it just has to combine it and it can do personalization on a gemsex site and so basically both of these have this intent json with the strength the type is behavior and it's it's a developer type and so it's very interesting to have this information to be able to render a page so and then you have this again so i know i spoke like long how about we actually look at something what do you think because i think it's a it's it's nice what you are showing because for example in the conference sites we are personalizing each of the blocks but not for intents or whatever people do just uh because of the site if we are in a different site we are doing different things with the same hero so but what i think is you create a one component for each case instead of a grappler because i'll show you because of course that hero you might also want to use somewhere else without personalizing right and i'll show you how because i do that also in the demo okay that becomes otherwise a little complicated so let's just um okay so i'll show you the site so welcome to the awesomest black and white that is trecul which is a completely french thing here i like that and so um yeah yeah we should update the demo already like with a storyblock like i i didn't actually take the time to do this but i didn't have it i just had the one day to do the whole integration field that completely works by the way and this demo site like normally our starter kits look like this this is the uniform conference right i'll show you this in a sec because it's much more complex normally it looks like this now it just looks like the default banner and it says personalized is false and so let me just first click around and show you how that personalization works so when i now go to the developers page right and this is the developer talk track and on this page you will find a lot of developer talks blah blah blah and now i go back to the home page and suddenly this is now the developer banner and so when this is shown it has been personalized and you can see that this boolean is now true and so that was instant right there was no changes or anything no loading it was just personalized so when i now go to a marketer and i refresh the page so i go to the marketer twice right and go back home suddenly it is now a marketer better and this is just normal nux there's no craziness going on um to be able to debug this a little we actually have a really cool tool um because with without this it's pretty hard oh wait let's let me remove the overlay so you can see it better yeah so basically in this thing we have i hope you can see it it has marketer developer cfp and some other stuff that i will talk about a bit later and so you can see that the marketer strength is now 100 because we went to the page twice right and the developer strength is 50. so now that marketer is a higher score you will see marketer on the home page but when i now go back to the developer page and we look at that they are both a hundred what do we do now honestly i don't know let me check okay so developer one because probably in story block it's the highest in the list but if we wanted to we could make another variation and we add two intent tags we actually say this is a marketer and a developer and then we would show that one because that matches more and we can of course also just say reset this course so this is look how fast this is this is basically just okay let's do developer beam oh we're already developers all right let's reset we're default i can say marketer set you see this is dynamically showing you this so if this one is a higher score now suddenly it's developer and so this is how fast this is imagine having like this whole website doing that right that actually shows you a bit more like when you go to this page and this is a bit more nice of a demo right so now i have no personalization we have developers marketer developers marketers this is the mix of talks there's a mix of products when i now go to developers this is a whole bunch of stuff about developers and i want to go back home now take your development to the next level but you see the talks are now more developer focused and the hoodies are actually do you speak javascript now i'm a developer back developer magic one so it it all kind of changed a little but the look is the same exactly but we can choose if we want to change that right when i now go to marketers and i go back you see we went once to developers once to marketer so we are now a marketing technologist so we now combine the two scores and we show marketing technologies bags so when you look at this uh this one it is actually the debug is turned off on this one and so if we just go only to marketers it will show you much more marketing focus but you can do way more right let's go to a product and say we like blue hoodies and now suddenly the whole personalization are hoodies and blue back home there are blue hoodies now and so you can go to the stratosphere with all of this and this comes from algolia this comes from big commerce and it all just works with a nice integration so i think we might have a new comment let's have a look uh sergey says look look this is a good one to put thank you yeah i really appreciate that i can underline um the thing is i don't know about this website we have had this running for a bit but i think when we lighthouse test this i don't know honestly because i have some indexeddb data stored i'm not sure if this is going to be high but generally these score just as high as any next website this honestly is a next site but we can also do it in next i did it with few storefront basically without any issues 98 on my countryside wifi while streaming that is not bad for a fully personalized website with products and everything right so let's have a look at storyblock then okay so now we are inside and for the people who don't know storyblock this is more samwell and alba's side it's really cool how this works right you can just inline edit stuff and we can kind of like add blocks and stuff uh you should remove the overview because it's like uh uh so i apologize yeah sorry and where do i do that here that's how i do that um so we can kind of like add blocks and stuff right and inside a teaser this to me is so magical you don't see this very often in a headless cms that i'm basically just looking at my local host i save this and now i go back to my home page on the local host and suddenly there's my teaser right so this is pretty cool to be honest and for you guys i know this is normal but for the rest of us this is not that normal because if i wanted now to grab my teaser and then move it up on top of the personalization there it is and if i wanted to change that personalized stuff i can click on this and then you have those three variations right so let's see developer right so here this is the little field that i built and you can kind of you see there's a developer attached now because we went into the developer banner and we can also add let's say marketer against this now or we can change it up completely or we have some advanced options that i won't go in too much now but this there are so many things you can do because you can actually set a threshold because oh my mouse is doing something but let me refresh my page this is just me and my mouse got attached to the dragger oh again you might have a bug somewhere okay maybe maybe your uh plugin you made have a pack no no it's my no so basically what you can do is i won't show this now because we don't have all the content for it but it's very interesting to add a threshold because when we go here right and you you see all the information here when i go to developers and i go back home you can see in the score that developer here is 50. but maybe you have somebody who's like a die-hard developer and goes to the page like 60 times so if you you can also set the threshold to let's say 200 so they have to visit the page four times and then it shows that content right so you have all these types of options and you can say actually let me just put it to a thousand percent so this one is now always going to show or you can actually say okay this one now i just removed the tracking and by the way when i click these things this is all stored into storyblock directly so i had a lot of fun adding this kind of stuff into the storyblock cms because i just used your ui kit to do it and it really worked really well i'm super impressed with how storyboard gave me the sdk to do this and i was able to kind of do it in a day and what made it slow is my personal skill in how i actually do the form routing and how do i store the objects because the way we store objects in uniform is a little bit different than i had in mind myself i like arrays with objects and this is object with objects so you don't get find friction you don't get order and sorting and all these things so i had to my brain was slow but the build like this that was very easy um this is awesome i don't have a word to be honest well the thing is if you have clients asking you about personalization the only thing you'll have to do is go to uniform an app make a free account oh i have to log in well i can do that demo effect right so i have my storyblock test project here and here i have my personalization and so you can see the developer the marketer all that stuff hey joe what's up man thank you for joining us um so basically you can go into developer and set up your behavior here like you can make it stronger or whatever and honestly this stuff it works super well and it's super easy to do if we wanted to we can just say okay let's do um framework oh frame okay and we add uh let's add a behavior of a strength 75 and this is like so um okay so let's publish this guy so we now go back to storyblock i'm not i think i need to refresh let's refresh just too bad i think you should refresh yeah and so now if we wanted to go to let's make a new banner add a block let's add a banner and this banner is going to be the framework manner view and next oh without the typos please and then suddenly there is framework right and now let's save this publish um so now it doesn't really do much there's just a option for the fact that we have a variation for the framework but maybe what we can do is we can actually make a new page um how do i make a new page there it is i cannot type today there's going to be a normal page and on there we're going to add a banner and let's just say okay oh you're always the same type of always the same type my my brain is faster than my fingers that's where you get this um and then okay so we framework page about view next is awesome and again i had my vaccine shot yesterday maybe has something to do or i'm just silly anyways so we also tag this thing with framework and i will show you the code in a second i'll show you the code to see how it connects because now we make a page with just a banner no wrapper around it and we add this intent tag here right so let's publish this guy and let's go to slash framework hey i typed it correctly oh uh it's a friendship page page you can click on that it's my own mistake yeah you can click and go there oh sorry i i know i should have done that um if we look at the console now let me just zoom that a little you can actually see that we have um signals here from our system and let me see it received all of the information and and there is you see all the different ones a connect if you don't tag the page you don't have any intent or it's reading also the text of the page for example you can you can completely choose if you want like you can actually what i did now and i'll show you the code in a second is when you render the banner by default and you set a prop to please track this one i would just add a little function to track it based on the intent okay that's why this happens automatically right so when i now go here and say um where is my framework one it's kind of strange i don't see it because this is an enrichment it's not the one i want to show um i might just quickly rebuild this this is what we call the the the demo effect don't worry it's happened to me all the time i have like test everything and also like if i'm doing live conferencing then suddenly somehow it's not working and the images are not loading or something's happening exactly uh there it is the framework behavior okay we're gonna try again we go to the framework page right framework page next is awesome home and there's our framework banner so it had to just capture the the stuff from our api to have the the structure and the configuration so basically what you can do what i built now is when you render the banner component normally i just let it track whatever tag it has but you can also have 20 components that all track a bit differently some tracks stronger than others or when you click a button there's an event that can also track so you almost code it like you call google analytics right okay oh yeah here is my boss in the chat how about that you can also push intense course into the tracker in code so that could be any interaction form field exactly alex so i was about to show that actually where you can kind of choose you can also say in your next page i'm just always going to track one thing and you can do different things that way and so if we look into the code let's go to that banner right that we just saw can we see this yes so right now if there's a uniform tag in the banner i'm literally just taking my uniform optimize next module because this is injected into the context right and i just say track behavior and i just get the intent tag for whatever is connected to that component right so in this case what is connected to the component is the intent tag framework with the specific strength we can also add all these other things that will then also be sent there because i get that from the data model right if we want to go to that um if so if i want to see that framework page let's go here let's just basically we can do this so the intent has framework with the strength of 75 so this is what it got and this is basically sent now so when we go to the homepage and it shows you the personalized thing that's the next bit which is inside this personalized banner what i do is i basically get all the variations possible and i get those from the block uniform options personalization list field i just called it this right that is um oh we have to go back to the homepage you see this uniform variations list that field that is this guy so basically i get all the information from the block and i just return it i just return the image the title and the description and something more specific the intent tag and if you have a full-blown integration with our sdk in your cms we will have helper functions to create your variations for you right you just say give me variance and there's a little function that that maps this data for you i didn't have that right we would just put it in the uniform dev space and so basically now i do that myself i give this intent tag and so here is the personalized function you give it the variations right let me just show you the variation so you can see what we're dealing with when we are at the home page so basically the variations are this oh i actually also added an image but i'm just not showing it in the front end but with the default banner without intents then we have the developer banner a description and the developer intent and we have the marketer intent and we have one with the framework intent so there are actually four components in this one component and we give all four of those to the personalized component and it does some magic it actually looks at all the things in indexeddb it looks at your cookies whatever signals you gave and it returns to you a variance object with the things that matched most because if i did this i would give get back the three last one the three best ones so if you wanted to do a search result or something like that you can also ask for more back and i just grabbed the first variant and i gave that to the banner from the block prop so i kind of faking the block prop i just give it and i also get a personalized prop to see if it's actually personalized and there's some other things that you can get from this context and so basically i just reuse the same banner and then there you go so you can also like change the order of the banners like now correct you can like give me the three banners and changing the order i can do that that's very nice and it is in the end if you go to your pages it's just this it's just your normal story block with the bridge and everything there's nothing else i did and so of course to the components this is your mapper i just added the banner like you would normally and i add the personalized banner like you would or normally and so there wasn't that much that i had to do and so one of the bigger changes is actually in the package.json because when we do a build or a generator whatever you want to call it we run the normal next stuff but we also do generate intents and so the moment you hit build uniform will grab the manifest of all the stuff so when you go back to the console and i scroll up a little bit you see when i hit build it actually grabbed the intent manifest from the uniform app and that is actually it saves it then in the static folder of next which is this guy so these are all the information that we put in the uniform app dashboard you see we have the dev signal we have the market signal some other stuff and so basically this makes it very easy because our personalization component knows about this file it also knows about the variations that we just saw on the homepage right and with that combination and whatever it can find as tracking it will personalize and we also have google analytics implementations in there so you can basically just the moment you personalize something it sends an event to google and so you can really see in your google analytics which things were personalized and which were not cool and so i think i spoke like a lot and we went over lots of things um so what do both of you think about any of this does this make any sense yeah for being makes because for example if you don't want to use an i like uh netflix that you can see that they are always changing the cover of the tv show because you see another two so but it's obviously another thing because you are not defining what kind of intents the people used to do in your website to change anything but for example if we make a generic component or generic uh plugin in next that will read every content of every page and send them the text as a as a tag instead of having the tag in each page i think could be useful because you just read yeah you just search in the intent manifest uh in the whole page if you have some content related to that tax and that's it because actually it's very simple the only thing it really does is it has a list of intents in the manifest right and it gets the intent tags attached to components so it's basically a list of variants and it knows which ones to match because of the json file we just saw and the only thing that it does it grabs that array it orders it and it shows you the most important one based on that scoring the algorithm to order it is really fancy we have some super cool things going on because we have many more options to do stuff like the strength but also the override and we can also say if you go to this page based on your behavior we gonna weaken the personalization because you might not be as interested anymore right there's many many options and i can send you guys some links on the more complex use cases but you don't need storyblock you can just have json right as long as a piece of content has a tag attached sorry sam i'm sorry but what i meant to say is you can honestly the only thing it does it gets a list of stuff that have tags attached to it and it orders it so don't worry but it's not that visual like a i'm not afraid don't worry i i don't think so that if i will say to marketers that they should this js should use jason right because we are very developer friendly i just showed you something that i built in a day and it really works and i can click deploy now and put this on netlify and it runs and it has a lighthouse score of 100. and that works really well but now as a marketer i can actually go to the uniform app and click those things together and i can go to storyblock and in your interface i just add this thing and it works so if you're a business analyst or a product owner and you have ideas about stories you just ask the developers can you make sure that if i add the tag to this that it tracks something if i add a query string that it just tracks something um sure that's the only thing you do in your code you do that once or twice or you have a bit of an update here and there you add your analytics and then the marketer people can do anything they want with it because they just click it together and suddenly it works but imagine if you want to do personalization or a b testing a b testing basically works exactly the same way i just don't have it set up now but it's the same thing you have two options you film tagged and then our a b test component is similar to the personalized component it's like fuzzy matching and then at one point it gives a or it gives b or it gives c or whatever um imagine having other tools where you have to go into a different system and then integrate it all and then your conversion goes down because it's so slow and like you don't really understand it or you have to do a whole bunch of rules but imagine you want to do wait let me just quickly share my screen again to show you that one part wait there it is just not here like so when we go to this one right imagine this list if you want to personalize this imagine these are like 20 and you have a rules-based engine not the scoring thing i just talked about for each of those you have to add like 15 rules to make sure that they are at least showing up for my persona with all the combinations you can do but what if you want this one to be more important than that one i don't think you can do that with rules no it's right it's a it's a very very cool question i'm like like we are also struggling like i have to say like as a headless cms it's uh quite complex that if you think about the headless scene as like how target or with the people who are targeting is like from the marketers content editors to developers to the like the see people who are like doing the decisions and like to set up the home page it was like quite interesting uh talk moving through all of the teams that everybody gets uh there's something and even like then the headless basically means we are decoupled so like we are like supporting next next uh vue.js react savalt php swift and again and the list goes on and now how you should like do the documentation like the learning hubs and all those stuff like show to the people if you are going to show them everything and they have to choose like okay i need to find that one little thing i really want to learn and this is like quite i have to be honest like quite complex and quite quite i would say like hell and if i if i see you but you should show there you go yeah it's like if you're showing me what you what you can do is like animal okay it's something that if i will show also in the team they will like we want to use it now or like i i would like to use the try it on the conference so man um so honestly reach out to me i'll help you build that conference site or alba probably will help you because he knows how to build these sites i'm totally happy because this we can make this like um how do you call this like this is a community effort i'm totally happy to help you and if it actually works and you're happy with it you just go with like a smaller license and if you're truly happy you can also push this to your partners and become we can also have our partners to work with this because i worked in agencies for like 15 years right and every client i had says i want personalization and we always said really um you know phase 15 maybe not your mvp not your first rela first release it's too hard and so the thing is all these developers they are like oh personalization i don't want to look at it all a b test that's something for a year in the thing is now this can be an mvp i literally did this in one day of course it looked black and white let's be honest but if i spend a week you have a full conference website with all the data from storyblock completely personalized yeah but you need to stories right i mean that plugin is also i did the plugin basically come on and i know the website is like right but i didn't show you all the options for the plugin because we actually have more things because intents only help you to go so far but what if you want to actually kind of make it a little bit more fragmented because let's say you go to the developers track and you like few or you like react or you're like svelte you don't want to make intents for fuel reactance felt because then you have suddenly four intents that you have to do something with it's actually more interesting to subdivide them so you can do framework and then add something to it and we call that enrichments so you can actually do framework view or framework react and then you can have a more granular way to do it and i also coded that into the the plugin already it's not completely finished but what that means is you can if you want to do that well you remember the hoodies that were showing you the blue ones and the black ones those are the colors are those enrichments those are the extra subcategories because you might get a hundred categories that you all want to personalize for you just grab them from commerce tools or big commerce and automatically add those things into your enrichments in uniform and then suddenly in your front end you can personalize based on those product properties or anything that you want and it can go pretty crazy it can go very far and so maybe for later um i can actually show you um we have a video that our ceo lars and i i'd interviewed him on all these complicated things all these things you can do and we had 40 minutes in which he just showed all the different options you can do and so someone else if we actually want to work on that conference website you should watch that and then we figure out what to do because you kind of want to have a nice story oh florence you're a little bit late my friend but that's fine um yeah exactly welcome the js baguette is perfect so arisa says it's amazing that the lighthouse scores are almost all hundreds how long does it take for deployment how long does any project on netlife take for deployment with next a minute maybe like nowadays the deployment is well it's if you have a lot of pages of course it might be hard uh or if you have a lot of code it might be hard but it's it's never longer than five minutes i guess yeah it depends on the like how many pages do you have you can still like uh cut a lot of stuff from it uh from it and like the features depends also the features you are deploying but usually like you would have to give like like few hundred or thousands website uh pages there that it will be like any minutes literally yeah and you know we are quite specialized in that deployment phase of things because we also have some other sort of products where we really use that a lot so it's generally it's really optimized what we do so when we do a demo to let's say a partner or a potential customer we actually demo it so it goes on netlify automatically right so while we demo it actually deploys and then we click around and show some stuff and then we go to netlify and it's just deployed yeah and so that's how fast that goes yeah what what is also like cool it's uh you build up that plugin and i like uh like you show also like those uh hoodies with the big commerce and and this is like what is awesome about the gem stack like in storyblock you you just have the integration with the big commerce or and other ecommerce tools and you know just can like create a component storyblock where you will integrate you will install like install you will use the integration to bigcommerce and also the integration to uh uniforms exactly two customers done and done and it's exactly done it's uh you don't have to do anything and this is how we did it also with that that demo i showed you with the hoodies and stuff honestly that is just exactly how you explained it we just for that one i think we use contentful just because we could it's any cms that has components that can be referenced um i'm up for it call me we'll figure it out now but honestly now that i noticed how good your sdks are to build components and build you know those those custom fields i did that so fast i will spend a bit more time to make a proper starter kit so when you guys want to start with it you just clone that nux repository and it just runs and then you can i will already connect it to storyblock because there's not that much to it if you want to connect next to storyblock and there's not that much to it to connect it to uniform the one thing i still want to do properly is to actually make it a next module you just do npm install and everything works we are not there at the moment because our software is changing quite a bit because we're a young startup we move very fast we do really cool stuff there's a reason i joined these guys man it's and you know i thought i was a pretty good developer but connected to these guys i'm like oh my god let me just do demos let these guys actually code like they did in two weeks what i did in another job in a year it's ridiculous i know what you mean yeah you know that feeling right when dominique codes something you're probably like oh okay yeah yeah yeah i have that too and i love having that because you learn so much from these guys and i have other things like i've worked at agencies and i work with enterprise so i can give feedback based on that which is also valuable right um do you guys like we are in for like an hour now is there anyone in the audience who wants to see more about storyblock do we maybe want to show how to add a component to next and show it in storyblock does that make any sense or because we still have like a bunch of people watching so if anyone wants to know more about storyblock i'm happy to do that or if not do you guys have anything you want to discuss i'm i had just like i'm like a little like without the wars it's like what they showed uh in the one hour it's like uh like mind-blowing talk to be honest and even like if i see all the integration i mean in generic and you can like integrate with any headless cms basically and this is also like what i love on the whole gemstack like we are able to integrate between each other even like if you want to go from a header a storyblock to a different headless cms and even like what all the features are coming like the real-time editing uh and storyblock that you can see the live previews and something special man i love that part and now we also like introduce like you think it's like uh all the time there so this in context menu uh you know like these three dots and that's like yes added like a four weeks ago i think so you just like before you just started to play with the storyblock demos i think it was added into the next module and this is like also something i'm like really really to be honest uh i see a lot of stuff yeah i think there's like also a lot of ways to make it like more powerful like uh exactly to do like maybe do you mean this right yeah yes yes and i honestly see there's still a way to that i'm not going to promise but i'm just working on that that there could be like some uh customizable parts of it so for example if you want to open a directly uniform uh intenses then you will just click on the three dots and it will jump to the to that field to the plugin yeah this kind of yes you can do so many things now right yeah and that would be so cool to like see those integrations that we can build and like yeah yeah yeah but this actually like and also what i love about it like let's let's not save this yeah it's the other way around yeah yeah yeah yeah it happens to me all the time okay well that makes sense because that happened to me like every time it's happening to me we have a feedback and the news then it's already ready for it yeah awesome because what makes it so easy for me is like i just go to let's say my banner and here i say okay here's my uniform field but in a page i don't have that field so you can kind of easily choose how to make your data model and then when you're editing you can also change your data model it's just so easy and another one like here it is tim praising you because you have a partner portal that just opened up to me and it just worked and i can go to my field type here's my uniform field and it just works let me just start my local developments i'll show you uh you should also like remove the overlay because a lot of stuff is still on the side of the storybox so now it's like overlapping let me dream no no it's fine um so wait let me just go to any form story block so this is my feature for the enrichment branch so let's let's see if this works right so uh maybe i show you the console so basically let me just zoom in a little so if you want to actually build this component you get this lovely build tool here and i can just say okay show me the output of what i'm gonna store so when i click on something here that's the framework one we just looked at right here and then there it is and if i just start changing the options to make this a hundred and add stuff this model is stored and now this is saved in storyblock and it just works like having just this little thing the way i can code this and if i if it's finished i do npm run build i copy paste my output paste it in here and this is now my my plugin works right and so i've been adding another one this one is good fun because potentially those enrichments like here's the hoodies right there can be lots of different colors so i can also just check that you can choose more and i can also choose all the frameworks and so now we have it like this and i can add an intent tag and then my output is filled and so i've been having like really good fun trying to build this stuff like that and this is the newest mode right did you use our uh design uh design system already yeah it's ui kit of your it's your system basically yep right if we inspect this one you can see here so this is uk with um the uk form row all of this stuff is specifically your your tool right here the uk form label and that's why it's so easy i almost didn't build have to build any html or css it just worked there's one i have one cool feature for you by the way i think for this oh tell me if you go to go to storyblock uh share the screen please and i think that i hope it will work but it's this is like also great for your user so just go to any story where you have those banners okay do i go back to https i guess that shouldn't be a problem uh hopefully i guess okay and here oh i need to load my thing again give me a sec yep yep here it is fast enough i think it's still building absolutely it's building up it's uh something the initial build is taking some really yeah but this is just next it is uh so and if you go to personalize banners uh banner on the right side yeah uh there is like like open any of the banners whatever like this but whatever and now go to the uh define schema but click on that arrow on the right side so not on the button yes on the arrow and there you find the difference okay and different presets basically you can create a team place so like variants of your existing uh yeah of your existing components so let's call it like this a developer banner and just add a piece preset uh the button down there like add preset and i think like you can set it as a default also the preset and that's it so and now safe skills schema yeah yeah save schema i think it's changing the screen still and now if you go back to the personalized banner and go to create ad block yep you ah you have only one so if you click the uh so it was banner yeah so by default the new banner should be set up same as the as the one we did so maybe create one yeah let's create another preset so off a banner right so we're gonna define presets and then we call it marketer and do we just maybe change some content or something no no just oh you cannot change sorry this is just a preview now ah okay add presets oh yeah yeah you can choose one as default and save schema on the top or whatever you want it was only because of the default preset uh that was the change of the schema okay so now shall we just remove this one again oh wait this one is new yeah oh look at that that is really fancy and now you click the developer then you also already also set up your uh uniform fields if i'm correct so it should be already set up with the developer and then you theoretically also there it is oh there's another one i am intrigued i don't know why because there's this is probably my book or maybe who knows like who knows it's hard to say like from the view of the screen so i would have checked the code uh but what they wanted to say is like some people could be like a little bit scary of that that uh okay let's say that we just said like here is a banner and anybody who is editing the banner could set uh those personalized values so the intents of the developer like it's 150 year so what you could do in storyblock you could hide the uniform banner like the uniform setup field for all the content editors you could create a special role who will be able to set up those uh numbers and then basically using these presets or templates you could also create it like differ like strong developers or whatever and then people will be choosing already only from these presets uh like these people to be honest and what i like about this is that you guys are going a little bit towards the enterprise level right where people might want to start doing this because sometimes i'm so surprised by content editors that don't really know much about the web they just know how really good how to write but i don't want to be clicking around right and so these kind of tools will definitely help and um i think we might still want to have it as flexible as we can so we probably would still put it in but the fact that you can do it with those presets that's impressive i like it so the point is also like like sometimes the components get very complex and it's also like exactly said like if you have like let's say you have a union or continent or marketer you don't want to probably let them to play with these intenses and signals and all the valuation so that's the point where you like create like hey you can do this and you don't you don't see the these uh these fields because there is a reason for that yeah it's very interesting and i like that we can do that and that you have at least the options right and so with storyblock do you guys also have like now i'm gonna i'm thinking more about how we can use this right because what we have at uniform is also we have some sort of scaffolding setup right i'm just i'm just going to have to show you again i'm just thinking that the bracelets are the same as the templates in notion because you can add tags and and the initial content of the component so yeah yeah yeah yeah we should ask ourselves it's uh maybe we should rename them to templates because also like clients are usually asking about the templates they call it like that because in notion are called templates for that is it's funny oh cool so when we actually have and i want to ask a bunch of questions on that now that i have you guys like we actually if you want to create a new project right and let's call it uh right and we're gonna just go like this continue we actually have this magical button thing here right so we can now say well there is no story block here but it could be here because what we do now is let's say i'm not sure if it's going to work now because i've exhausted all my content stack let's say i click content stack and i want to go to netlify that wouldn't happen to start with starblock i know my friend i'm just kidding let's go contents will netlify next and analytics right continue now it's going to ask me to log into contentful i'm not sure if it's going to work let's be honest um let's do this one so create a space in contentful okay so this is make a new yeah you see i actually i'm not able to do it because i don't have spaces in contentful but what this would do basically is it creates you a new story block instance and then okay don't create the space please but then it installs my plugin that i just wrote and then it installs starter kit content and then if you continue these steps which i cannot do now sadly but what we basically do is then we create for you a github repository we create for you a netlife site and in the netlify site because netlify has set up templates right so we actually use um all the environment variables that you need from contents of content stack or storyblock or whatever we get the api keys we get everything we put it into the environment variables in netlify and we do a deploy so in five minutes you do click click click click you log in with all the things you have a git repository you have a ci stack running you have a website live and you copy paste a build hook into uniform and every time you change a uniform personalization or a b testing and you hit publish it rebuilds your website on netlify but it's also already connected to storyblocker when you click publish that web hook is fired off and it will actually also redeploy and this thing works like magic for a lot of people who just want to get started right and so if you got these type of api so we can scaffold a new story block for a user or create an account right there and add content to it with like management apis um that is super cool stuff of course it's well of course not a lot of people have this of course it's pretty cool that you have that no no we it's how the demos working in the story block if you are working uh building storyblock demo then basically you can set your uh the space but this is like the only like a really like hidden feature uh behind me we have to do it manually and then we can set some uh spaces as a templates basically and so like we have some extra internal uh discussions how to do it the only problem could be like i'm not sure if uh it's a secure and allowed to get api through the management api like api token uh you you would probably maybe have to like uh create some success talk uh sorry the step like hey uh put here the token i'm just you log in first with the user so you would give the token to the user anyways yeah exactly we will always so these things are very interesting and we can have a look together if that could work of course our roadmap is ridiculously full i'm not going to say hey let's do this next week but the thing is if we have partners that ask about storyblock these things are possible but if you have clients that say hey we want to personalize how do you do it just come to us and we partner on it and we do it because you saw i just it just worked and if you want to do this in react we can also do that because we have sdks for all of this yeah i think like uh i'm i'm going to definitely put this video on the uh next uh technology app and yeah i'm really looking forward also to the to that integration like we are like we have a lot of plans uh there's like a lot of to-do's uh a lot of stuff is now hanging a little bit behind because of the v2 like the redesign so uh sadly because you can't definitely you have a redesign but i haven't actually seen it there is a demo link uh which i'm definitely not using so i i would also like to show you oh you can share your screen and then put it on the stream it's all good i will have to find out what is the demo and give me a second i will just find out uh hey could you i i i'm very good devil i forgot uh where is the demo or the version too that's that's that's great so how does that was better by the way while sam is looking for his demo link if anybody has any sort of questions or whatever please feel free to put it in the chat i will have to get it maybe maybe not so give me a second sure no problemo we're here hanging out i just i finished my drink now i need beer i guess but it's too far away oh we have some time you can jump yeah no no go for it can you find it maybe i can find it uh everybody's already like nobody's uh live and we're looking on the slack so there's like nobody oh there you go abstract ah i have it i have i have it yes i think i have it yes no is it yes no yes no it's called beta but it's not version two so where is that no ah i don't have it you know what it's all good dude i'm very happy to see that later and what i'll also probably do is what i just showed you today in a long long time i might make a shorter video so we can actually maybe collaborate on that together and we can put that on the channel so you can have that as a reference also for maybe potentially people who want to use solid later absolutely absolutely i i really see a lot of like especially the there are a lot of a lot of people are a lot more of the customers asking about uh e-commerce and headless e-commerce this is something they will be very very interested in so really this is awesome man go on and about the v2 of the api so uh i just like uh make a little bit add so there will be like a block event and uh like uh i think the date will be like uh at the end of the august or like first days of september and we will like show something there so what and why and then hopefully we will also announce the date when it will be released so you should definitely join wait i will i will definitely join um also reach out to me if you want to do personalization on that conference website yeah let's make it happen let's make it happen let's make it a con community effort you can donate then also yeah yeah except next sorry finally i will be coding something like something i will just let you code it and then i just watch from the from the sidelines i think that's the best approach all right so i want to thank both of you and all our audience that actually um was here for like one hour and 22 minutes and we still have a bunch of people watching so i'm really appreciative of everyone and also of your time both of you thank you for joining and giving me the opportunity to show you some stuff that i hacked together that luckily worked it's pretty cool that it worked so thanks again and um i hope to speak to you very soon i hope so yes thank you very much thank you very much for the information everybody see you speak soon bye-bye