--- title: "Jamstack Fridays with T&T: Personalization with Uniform Canvas" description: "This week we are showing off the ability to personalize parts of a website and A/B test using Uniform Canvas, Tailwind.ui and Next.js" date: "2023-07-20T07:59:48.000Z" url: "https://timbenniks.dev/videos/uniform/029-fevaivas-ye" youtube_url: "https://www.youtube.com/watch?v=FEvAiVAS-yE" playlist: "uniform" image: "https://i.ytimg.com/vi/FEvAiVAS-yE/maxresdefault.jpg" tags: ["composable-architecture", "cms", "api-design", "personalization", "frontend"] --- # Jamstack Fridays with T&T: Personalization with Uniform Canvas This week we are showing off the ability to personalize parts of a website and A/B test using Uniform Canvas, Tailwind.ui and Next.js Watch on YouTube: https://www.youtube.com/watch?v=FEvAiVAS-yE ## Transcript oh tony is gonna surprise me it's like halloween my birthday is soon dude alright i'm gonna i'm gonna share something with you today tim and it is um it's on uniform platform okay it's gonna be it's going to have tailwind it's going to be nexjs and we're going to do some cool personalization with some of the pieces of our page within canvas this is jam stack friday with tnt [Music] before we dive in because you said a lot of words that people might not know what it is because we are on our gemsec friday's episode right so personalization sure people know what that is but what is canvas can you give me like a one sentence run through and then show your screen canvas is our uh offering by uniform that uh gives developers business users marketers an ability to build compositions okay not pages but compositions that can be later injected anywhere they want in the mobile app in a facebook page in a website in pwa yeah or they can just inject it into a page and replace the whole page if they want to and these compositions are built by connecting like different sources right not just from one place no uh you're able to bring in different sources so kind of going to our composable dxp and everybody is talking about that they have a fancy word yeah but really we are the composable dxp we are able to bring all different sources together and given ability for companies to build what they like based on that awesome so welcome to gemstock fridays and we're going to go a little bit into the product where tony and i work at the startup i'm going to show you some cool stuff at least that's what he told me i don't know yet that's the fun part about this one so how about you share your screen and wow me how about that i'll try there he goes all righty then all right so what do you see here is a set of components uh where i'm building in an ability for us to create content and add it into a composition as i earlier said we need to build compositions but compositions are built out of base of components so these components are going to bring data directly from uniform it's not going to come from an external source but there's going to be a component on the page that will also will be feeding data from contentful cms for example now we have a page which is a composition component that has a header which has a navigation item well a navigation which will have multiple navigation items in a second so before that let's go ahead and take a look at what is navigation so navigation is just a navigation component that holds slot that has content and i can add navigation items in here and i can personalize them so this is how you structure your components and then you add them inside of your compositions and since i use slots here i can nest component insider components yeah so slots is where you include other components basically right it's like a placeholder kind of thing yeah cool so let's go ahead and take a look at my home page and let me delete all this there we go so we're going to start from scratch yeah let's start from scratch let's take a look at it ctrl s a little shortcut we have here click preview and boom i have content that is coming from that's really interesting to me because you just emptied this out oh there's a hero okay so we have a one hero component in your main placeholder that is graffiti from contentful okay yep and i have tailwinds as i mentioned so i can actually do some management of my background colors directly from this property here or a parameter yeah so let's go ahead and just do this personalization really quick we will add a hero personalization realization choose a default variation or a matching and then i will add another hero yeah and i'll go to my and select architecture accept it and here i'm going to change background color to blue okay so we are now personalizing either for architecture or graffiti and then when you personalize it it will show different colors i guess i haven't seen this so i'm just kind of trying to understand what's going to happen cool so what we're going to do here is we're going to do personalization of content plus the property of css property so let's see how that will look i could have just refreshed yeah that's fine i guess default version let's do what if architecture set score boom nice so you just change the css class but it looks magical that's a nice combination right something simple that really gives you this different vibe so if you want like uh your um your team needs to do a b testing of colors of a button hey this is an easy way to do it directly from uniform so let's go to here now and start building out that navigation so first thing i'm going to add a navigation and then let's start adding navigation items all right so as you can see all of this data can be easily feeding from a headless cms so let's just do home for example well in this case it's not coming from a headless cms but from our canvas system right but you can kind of choose correct where it comes from yeah so you can choose how whatever the source is so let's save it up and then go and refresh our page close this stuff here oh there it is home oh and we're looking at architectural personalization yeah yeah we'll clear that for now so home is here so let's go ahead and add one more navigation item and call it i don't know exhibitions and then and give it a slug exhibitions okay refresh we have navis okay so this is pretty much and i'm showing you how you can easily manage your navigation directory but how about we personalize that navigation and show you different navigation items based on your intents navigation where's my navigation this is what i want to personalize sorry exactly yeah and inside of navigation i want to personalize items yeah you can do so many different approaches i guess okay so here we do home i guess like what we had we'll just do a home home add analytics information here so navigation personalization realization and then let's just do we'll ignore default variations so matching personalized variation ignore default variations and we'll do a number of variations to show let's say three okay so three menu items basically correct so i have some intents that already pre i have prepared ahead of time so let's call this membership and then potential membership is my intent whatever the link is and then we need to specify something here so visit slug slug so nothing nothing for these two items so what i can actually do is i can actually take them out put them on top here so they will so they always show and they're not based on personalization yeah okay cool and then i can make that one again yep and now here i can say that if i match an intent go ahead and show me this navigation item because i selected the matching criteria show matching personalization variation ignore default variation and we don't have any default variations yeah exactly so you can just show that okay so i'm gonna go here now refresh my page i'm gonna see home and visit exactly then i'm gonna do architecture and then i'm gonna say potentially this visitor would like to see oh and look it just showed up that's very interesting so that navigation but to make it more interesting looking let's add a little more content here so we have testimonial we'll go ahead and use it as let's say architecture and here i'm using a different capability of utilizing that css style but i just added them as a drop down so i don't have to type it's a little easier because content editors might not want to like type bg blue 600 or something exactly and they might forget to enter something in there but here is them boom and they might not know what yeah they might not even know what it's there so then i'll add another potential membership here intent make sure it's personalized membership and the reason i'm doing this i'll explain in a second i'm going to refresh this page and as you can see a component popped up yeah and the only reason i did is because when we're doing the personalization of a navigation you can't it's not that effective it doesn't pop up it's useful for it for your visitors when they visit the site but here as you can see uh we have first three different personalizations kind of working one is we're doing the content plus css property and then a component pops up because we are in that membership um intent and plus we're adding another navigational item so that's what i wanted to show you i wanted to show you how easy you can go in different direction just start doing personalization and uniform makes it so much easier what i really like here is that you can you can go quite granular right you can actually personalize specific little properties there like the color or a font or whatever you want it because we hear quite often like hey can i do an a b test of my button being red or blue and that's actually super easy in this case you can just change it to gray hit publish or red or whatever and it will probably just show now right and you could also do a personalization with another component here that then changes color because you like graffiti more than architecture all but by five points yeah it's nice and yeah i have not seen it work this way and it's super clean and you did this in like i'm looking at my clock we're we're 10 minutes 15 minutes in and it there you there you go you just did that it's very cool and i can move the component above now oh yeah cool yeah drag and drop and and notice that i'm using one um same content one property here same content different property here two different components so it's nice so people if you like personalization if you like drag and drop stuff and a simple front-end to be able to query this stuff you should check this out at uniform.dev because this is where we work and we're super excited about this product that we created like we didn't really show you now how it works in the code but it's generally easy to do this and maybe that's for another episode so thank you for watching and thank you tony because this was cool thank you for doing that little extra work there of course thank you guys see you soon awesome cheers bye