Small group workshop: Visual Builder setup for any stack

[Music] joined here today by some of my colleagues here, Tim Bennix and and Loa Ethridge. My name is Brandon Eckles and we are here today to talk about Visual Builder and how to make it work for any any stack that you have and going to dive into some scenarios. We really want to make sure that we answer questions and that this is engaging and and valuable for you today. uh we know how uh much value there is in getting Visual Builder set up and what it unlocks and enables for for your teams. So, we want to make sure and cover as much as we can and we'll dive into it. We're going to just give a quick quick overview on what Visual Builder is and then dive into some of the scenarios that uh that that we encounter when setting it up and then we'll go through and uh into each of those scenarios and walk through them. Like I said, we will want to answer your questions. So, submit them. uh you can submit them in the in the engagement part of the panel there. We're recording so we'll be able to share this out afterwards. Uh anyone that was anyone that registered, we'll be posting it uh online as well. And so look out for that afterwards. All right. So what is visual builder? And when we talk about visual builder, sometimes we encompass a few of the different things within content stack that are related. But just to give you a quick highle overview when you're in the entry editor includes live preview. So being able to open up from the sidebar and get a live preview of the changes you make right there within the form editor. It also includes our new visual builder which is a fully immersive and intuitive page for just clicking into different fields on a on a page and being able to edit directly uh within the context of that within the context of that experience. And it also includes our timeline which allows you to pull up any experience, pick a date and see what that experience might look like based on upcoming releases or publishes or things like that that might change the content campaigns or anything like that that you have. You can see how your content will be changing uh over time. And the best parts about this, right, I mean we this makes this just totally changes editing and and content building for for for content teams, right? is far more intuitive. They can get content out faster. They don't have to rely on developers as much. The developers aren't bogged down by requests from the creative team or from content teams. It gives them the confidence to understand that what they're building will show up in the right way and the way that they expect without having to go through a whole bunch of steps or hurdles to do so. And uh mo I think most most importantly visual builder really makes uh personalization far more possible by being able to see how different content will look to different audiences uh see how it changes over time and things like that. And I think beyond that um you know again there's a huge focus and emphasis here on on the on the content team or on the the actual user who's building out content and giving them the freedom the the speed and everything like that. But I think the biggest part about this is it doesn't give up the complex or the the control or or governance that our developer teams that our developers want. And so this is I think a great segue into like low you could probably speak to this in such a better way than I can of understanding not why this is just important for content teams but why it's valuable for developers too. Yeah. So, I think real quickly I'll just touch on like the content teams and why it matters there, right? Like Brandon, you talked a little bit about flexibility and being able to play around, but really sort of the goal is like actually being able to test your content out and, you know, really make use of those repeatable content patterns. Like a use case for this would be for example, if you're a global enterprise, right? you might have translation or localization going on in personalization at the same time. And so you would want to be able to sort of have a drag and drop. So you could not only make content changes, but look at those changes and see what they look like across various segments, right? If you divide your audience up. So I think that like to me that is one of the most important and really cool things that you can do. Like if you have different content for people who are in Europe versus the US, you can look at that content and actually preview it while you're actually building and making changes. And for you know sort of developers right the real reason why it matters here is you spend less time on things like content updates right and you can focus more on innovation and feature requests. So what else can we do to further make you know these repeatable content patterns that we have based on our brand system or our design system how can we flesh that out a little bit more and give editors a little bit more tooling in terms of their content components. Um, you also are able to again with that sort of empower the content team so that they can go off and make take control of their content and their content creative process. And as far as B business leaders go and the overall organization, right, you can expect more return on your investment um with a faster time to market in terms of your content. And we all know that that is super important to a lot of businesses today. Oh, and one thing we might want to discuss there is that we can also share a live preview of a page you just made. But then if you send it, let's say to your CEO, they don't have to be logged in or have an account in content stack. They can actually just see that thing that you just made. They can add some comments. If we have time today, we'll show that as well. Sorry. Hello. Continue. No, you're saying that your CMO does not have content stack bookmarked on their navbar. Is that what you're Yeah, exactly. to have that of course. Yeah. And also just, you know, with that sort of that preview sharing capability, right? Like it's reasonable that you might have to show someone a page that you're working on that also isn't in the CMS at all, right? It doesn't necessarily have to be the CEO or upper management or leadership. It could just be someone else on your content team that is just not in the CMS. they do other things or someone else in a different team on an organization. Exactly. Yeah. Which is such a It happens all the time, right? There's people who are just they they work in these tools every day, but you can't expect everybody to do the same. Right. Exactly. Right. So before we jump into explaining a little bit further and a demo, we want to ask a quick poll question. Um so drop your answers in the chat. Which setup method most closely aligns with your current visual builder arch architecture? And your options are you use the live preview SDK, so a direct integration, um raw API calls with middleware, um or staging or non-productiononly environment, or you're not sure um and want to evaluate your options. And that last one is probably why you're here, right? So, we can give you a lot of options today. So, um, low, do you should we grab our first question already before we dive in from Jeff or would you Let's do it. Let's jump into a question. We love questions and having interactions like this because it can also shape what we show. So, can anyone access these preview links? Um, this doesn't risk exposing delivery or preview tokens. Exactly. So what we've built is that if you create one of those share links, you have to add somebody's email and only when they click on the link that's in that email that works for that user and that's it. And then after that that doesn't work anymore. So that's we kept that in mind. There's no environment variable leakage or any of that going on. So you cannot just make a URL and post it on the internet. Let's say that wouldn't work, right? Um well if we have time today because we didn't really discuss it internally but we can still show that if that works. Um I think this is probably good enough time. I think we've got pretty good sample size here. Yeah. Yeah. Let's have a look. Yeah. I love it because it might be that we have so many answers now that it's kind of leveling out. It's always interesting to see. Yeah. It's still it looks like the majority is at uh not sure. we need to evaluate our options which is great because we're going to provide them. Yeah. Because there are like this is the super interesting thing about content stack is like because it's all hatless stuff right you have all these different APIs that all have to work on their own and so that's why we have so many ways to actually set this up. Um that's really a good thing about it. So you can you can have any sort of setup to do it but also that sometimes might make it a little bit complex because hey does my setup also work you know right luckily it's not one sizefits all so I think u we can go to our next slide yeah let's move on and I think this one is probably my screen if that's mine Let's see. Yes. All right. So, this one is we're going to go die hard technical like immediately, but I this one relatively short and then we just show the thing giving context to whatever we just showed and then we can, you know, dive a little bit deeper in why we did it this way. And so to set up a visual builder or a live preview session, there needs to be some sort of communication from the CMS to your website. And if we want to do visual builder especially, you see your website there and you can click on things and then suddenly menus pop out and you can kind of you know edit. So there has to be communication between your website that lives in an iframe inside our system. Um, a quick note for an upcoming release, we can now also do it without an iframe and you can open up your visual builder in a separate tab. So if you are behind a login for example, that would also work. That release is coming soon. Um, so right now what we do is we use Post message. And so Post message is an API in a browser that is basically sandbox and super secure where we do a handshake between your website and our CMS. And we make a live preview session hash just for you as a user. And so with that information, we kind of know, okay, so for this session, for this user, this is what they're live previewing. And so um what is happening is that you can kind of choose two different modes of live preview or visual builder. They're like both under the hood. They're the same tech essentially. And so we have a serverside rendered mode for if you have a website that does not run for example in Nex.js or next or react or something like that but you might have a you know a net website that has no lot of like that doesn't have a renderer with JavaScript. You can set it to SSR mode. So every time you change something in the C in the CMS, it will just refresh your iframe and you get the updated information. But you can also set it to CSR mode, which is much more um it it's it's more event driven and so your JavaScript would just update and fetch new content and show it. So it's a little bit more immediate. And so what happens is from the CMS to the website based on whatever you set up, it sends you this live preview hash, the information about what type of thing you're editing. So a page or a blog or whatever, something like that. And then there's the UID of the thing you're actually editing. And so if you are in SSR mode, you get those three things on your um URL. You get the information and you can query with that to the draft API that you're looking at from the CMS while the user is editing. and it you can you know get the page. And so even though this is an SSR thing that there needs to be a little client side JavaScript string here to be put in your codebase like in your head or whatever and it starts working and I know this goes quite fast. I'll just go over it quickly but we if you want we have code to share later we can ask all you want and then we'll run through it. And so um essentially you make an entry change in the CMS then if it's SSR you can just based on the information that we send you you can just refetch the data every time somebody changes something and then you get that information or you can um if it's you're in client side you just have an entry change event and then you can just fire a function that does a fetch call and gets data back. Um I think we have a question let's have a look. Okay, so we haven't implemented visual builder because we haven't found a non-intrru intrusive solution with the front end application code generating a tag uh recognize which field is being added. It requires tightly coupling to our front end code. Yes, Aaron, you're fully right. Sorry, Lo, you wanted to say something? No, go ahead. I was just like, yes, we also have a question in the in the Q&A that might be worth addressing that I don't know got if got addressed. There's both the chat and the Q&A and yeah, we have a match. So, let let's talk about that one for one sec because that's actually a really good thing to ask. Um, if you wanted to do visual builder and you want to actually click on let's say a header and change that header right inside there, we somehow need to know as the CMS what you just clicked on. So, we need to bind to that click and say if somebody clicked, let's have a look at what this field actually is, where it lives, and how that would work. And so for that there are a few ways you can choose and we chose to do a data attribute right. So that data attribute is you can ask our um SDK to generate it for you and it just says the the type of the page the UID of the page and then the field. And so when it has that and our visual builder just you click on it the visual builder recognizes oh it's this thing you're editing. And so that's a very interesting observation that you made because it is more tightly coupled. And so features like this make a pure headless system slightly more tightly coupled to your front end. And so it's up to you to choose how deep you want to go with that. Because if you didn't want to have those things, what you can also do is implement the same thing but without those tags. And then you can just on the sidebar open the form and edit the whole form and see your website just update just like normally. but then you wouldn't be able to click on the items and that works completely fine. And you can also have live preview on the side if you're in the entry editor that also works. So we made sure that at least it works if you didn't implement because you have exactly that's that opinion. And so it can still work but it's it feels le slightly less awesome of course because you cannot click and edit edit right there. Yeah. Yeah. I hope that answers the question. And I I realized that it's it feels kind of tightly coupled. Um there are systems that do the same thing that's much more tightly coupled than others. And we chose this one basically. Um let's quickly go to the oh the Q&A seems I don't see the question anymore. Okay. In that case, let's move on because the time is flying. Um, so one important thing is if you implement this live preview thing, you can just have our normal delivery SDK or you can do it without SDK if you want. And if you turn on live preview, the delivery SDK just kind of knows, oh, now it's live preview. So I have to get the information from the draft API because while you're editing, you're not saving, right? So we're storing that information in a draft API that constantly updates. And so your live preview on your website would update from that API. Then when you hit save and publish, then it will grab it from, you know, the CDN endpoint, but while you're in live preview, it actually gets it from a different URL. And we'll talk a little bit more about that in a sec because that's sometimes where people trip up a little bit. Um, Low, before we show like the nicest, you know, setup of this, is there something we should discuss? No, I think we can discuss it as we move through the first part of the demo, of course. All right. So, let's just show what we feel like is a nice example of how to use this stuff. There's many ways to do it, but this is one of them that we like. And so we built this little demo website which is essentially a jewelry store that looks back at the 2000s and it's like really fun um technology related stuff from back then you like pixel stud earrings or circular like circuit color necklace things like that and so this is a pretty rich website right and so there's a bunch of different pages it personalizes there's a bunch of things with our CDP connected with data and insights it knows I like gold. I know it knows I like silver. There's all this stuff that we follow for the user that we can later use to personalize the pages for them. Like for example, just a quick one. If I get a UTM campaign link from let's say a Facebook post, then this is now that same homepage but with a different variant. And this is visually edited as well. So, um, now that we know about this one, now we go here and this is basically the CMS. I imagine most folks in here know about this one. So, let's just grab visual experience directly and it goes to our homepage. And let's see if it works. Yes, it does. Yay. Always a second of like, oh no, we're living on the edge here. And so um this is exactly also what Awan was just in our in his question talking about like when I click on this the editor knows you know what I'm changing and so potentially you can do it without that if you want you can just open the form here and then do it from here like I can also type here and then it should update right? Yep. So there are ways to work around that if you didn't have the opportunity to add these data tags or you don't want to that's Yeah. Yeah. Exactly. That makes total sense because we do realize that there all these there's just different ways of building and so um we have something called modular blocks. And so we can see here in the form that there are just like I called them components. There's all these different ones, right? So the next one is like a list. Then we have a two column component. And then inside the two column we have site A and site B. And that's another component that you can then add or you know change an image for. like we can just go and change it to this one. Um, and so this one could potentially get more more things. So we can have slots inside components that have sub slots and items and things like that. Right here I could add another CTA next to it, stuff like that. And if you're dealing with like personalization and stuff, um, you can also just say, well, let's have a look and let's look at it like I'm I like my earrings. Okay. So, let's just go into few mode now. So, I selected my earrings thing. And now you see that this page has changed. And so, this one is only for viewing. So, I can kind of turn that off. And if I wanted to change that earrings page, I just go here. And now I can completely edit that. Right? And this is sort of that context switching that I was talking about earlier. Like if you're working on personalization in terms of personalizing pages for an audience, right? You can use Visual Builder to preview at the same time while also looking at potential other segments, right? And you can switch back and forth and actually get a preview of what that looks like. Exactly. Um, how about we take two minutes and actually build a new page and then show how that looks, a few of the options that we have and then um Oh, Stu, that's an easy question. You can, but you don't have to. We integrate with a bunch of different dam systems. Actually, funnily enough, this image, all this comes from Cloudinary. Cloudinary. Yeah. So, we you can change that up if you want. Uh Michelle, on Astro, that's a really good question because it's kind of special. Astro if Astro does the stair static build, they tend well, you can choose, but they tend not to hydrate after. So, setting up Astro with visual builder in client side is sometimes really challenging. So, we do have an Astro um sample, but it's actually I think it might be SSR or a hybrid approach. So, that one is actually special. So, if you wanted to dive deep into that, maybe we should just set up a meeting because that is actually a pretty interesting one. Um let's make quickly a new one and then we can also show um our our timeline feature. So, let's call this group workshop. Wow. [Laughter] Wow. Okay. Yeah, this is like live. You can see me typing and fumbling now. And so, um, there's a few things in your code that you can set up like if there's no components yet that you just create like a button or something like that. And so, let's add a hero. And so, in our hero here, in my code, I set up like these default fields so it doesn't look bad because if you didn't have those, it wouldn't know what to click on here. So like here we can just say okay group workshop. Oh yeah. And those sort of placeholders, right, are really good for orienting um a content person, right? Like so they know very clearly what they can change and what they can't change. Exactly. Um how about we add a little video here? Let's see. I think we did this one before. Um, and so this is just in our code and in our data model. We kind of decided all these things. So I have like a little group field for design. So let's make this overlay like 60 and um let's have the light theme and put it on the right. And so this is not built into the CMS. This is this is just how I set up my hero component so it could do these things. Actually probably on the left is nicer. So you can set it up the any way you want. I feel like I like having a group for that specifically. So in my code it's also separated. Um we can add like a little CTA that says um I don't know what you would buy in a group workshop. Maybe visual builder but here you go. So you can you can add this stuff relatively easily. And also because it's there's multiple you can just add another one that comes next to it. Um and maybe let's leave it as did. Oh one thing we can do that's interesting let's make a list. And so this is just a list component I created. And so when we go to our list I made. So okay, let's make this a header too. I don't need a description, but we can actually choose some references. Let's just actually do a bunch of products. Let's put four products. Of course, you can search for them as well. And so this is where this thing gets pretty interesting like what I've built now. And this I made this choice and this comes back to hey that intrusive like data CSLP tag um attribute thing we just talked about. You see in these items I chose not to have those. So I cannot click on the title here and edit it. That's just a choice I made as a tech person building this. However, I put that data tag around it. And so that allows me to still click replace and then just grab another one. Right? Let's I don't know. Let's grab this one. Right. And it makes sense like that you would maybe not make the name of a product or its description uh editable necessarily from here because this is a consistent thing like this product will always be called this and it will always be described this way. Um however what you can do like you can move them around of course all this simple stuff this kind of basics but when I now click on it I do get the form on the side. And so let's imagine you did want to be able to edit this this way. Now you don't have to open up the entry for this product and then edit it. I can actually edit this product now right here. So if I now click save and deploy this at this product entry actually has this title now. So let's not do that. But you could. And so if you have let's say a list of heroes that you reference and you wanted to just edit the hero directly in here, you could, right? Okay. So, let's save this one right now and let's actually publish. Oh, wait. Let's let's save it first. Okay, we'll just publish it to everything and then we make a change and then we make a new release in the future. Um, let's see because I not sure. Yeah, I didn't I actually clicked exit anyway. So, I'm just going to do that quickly. That's my bad. Um, it looks like there's a question. Um, can you take it while I fix this? Yep. Can you shuffle the placement of the content from visual builder? Example, the hero component goes after another component. Yes, you can. Totally. Yeah, let me show you. I'll do it now. I I was re recreating this list anyways. So, let's actually now add a few items. Oh, we can also do product lines. No, let's do products. I was doing anyways. Okay. So, so let's just click save this time. So, I can actually just say let's move this up now. And now it's here, right? And that you can do that with anything because what we're essentially doing is I can show you like if we go to the entries now and we go to the page, we just created this. So this is literally just these components. So in the CMS, you can also do this, right? So it's exactly the same thing. There's nothing special here. All right. So let's go back and let's make a change now. Um let's put this below again. And let's say oh wait, let's first like properly deploy to our I don't know what happens. Oh, I might not have updated something. Oh, do you have a required field blank? Yeah, I think so. I think it's in the hero. This is just how I code it. Let's be let's be honest here. You see, I just didn't code this. Oh, you have to put I should I should have added in my code a default value of like zero and then this would have been fine. Yeah, a fall back. Yeah, we go again. All right. See, you see now it worked. So now when we go back here, let's make a proper change and then let's you know let's keep it like this. And now we deploy again. Um and now add this to a release. So we make a new release. And of course you're going to do like four or five pages with a bunch of stuff here, right? So we're going to create this release. We select this one and we add all the stuff to this release. So now when we go to our releases, you can see this is our new release and now we can deploy this but we deploy it later. So let's do next week. Oh, you got to select your environment. Yeah. Yeah, my bad. Okay. So now we created the new release for next week. So when we go back to our official experience, we can actually now go to the timeline and you can see there's two dates. So this is today, but then next week it's going to look like this. You see that's a change is here and here it's still whatever I typed in. And of course, normally you're going to see a lot of difference. And this is this makes that fun because you can actually highlight the differences with red and yellow and and green almost like a you know a pull request on GitHub. You can go and this can go super deep. You can see a lot of things and you can do like different responsive views of what you have changed. And so for content editors, this is like super super fun. Um, so let's take a little break here and see if there's any questions because we have about half an hour left to then actually talk about the tech behind all the connections, all the things. And I see here that I have a little backstage message. Okay, I think that was already We just answered that. Yeah, exactly. So, um, let's see. Is there any So, Lo, what do you think? Should we just go and look at a little bit more of the tech stuff here? I think so because I think we've covered all the questions so far. Okay. That have been asked. I'll quickly go to another setup and I'm not even sure if that's running. So, give me one sec. Yeah, you see local host needs to be turned on. All right, here we go. So, this is one of our Kickstarter projects, which is basically like a 60 to 70line project that has a connection to the CMS. It has an entry. It has a couple of modular blocks here, and you can inline edit it like this. So, there's not much to it. And we have a lot of different ones of those from Astro that we just talked about to Angular to React to Next to Next, but also in a bunch of different formats. U because where this gets interesting is how people have set up their system. Maybe you use GraphQL, maybe you build a middleware to cache some stuff. U maybe you don't use our SDK, maybe you want to use everything in only SSR because you have a PHP website. Like there's many approaches here and so um sack let's read what is your question almost too basic for this workshop but my preview token UI isn't loading so is the UI in the CMS not loading you mean this or is this maybe we take this one offline s because would love to help you get started what you can do if you have a content stack account. What you can do is actually the following that might help you um get started faster. You can actually go to the marketplace, then you go to starters, and then you grab Nex.js, for example, if you like that, or you have NXT. We have a bunch more that are coming later, but you can find them on GitHub also. You can literally just hit import here. It gets you all the stuff that you need, everything set up. And so if you wanted to see how it worked and then put your opinion as a developer on it, that's going to help you. All right, back. Um, so essentially, let's let's nerd it a little bit. So we have this SSR, CSR, SSG, GraphQL, middleware with or without SDK. And there's just many different approaches you can take. And so maybe we can just have a look at the most basic we have right now. So this is our nextjs out of the box basic one. And you see we have annotated this completely. So you can also like dive deep and look at that. Um so let's have a look at how we can kind of set this all up. And there's almost so much annotation. I don't have an overview of my code anymore. It I know I went a little overboard. So, but if you've never seen this before, it helps. It does actually. So, in content stack, um, you need to have your stack, right? So, this is a connection of our content stack SDK, right? This is our delivery SDK. So, you make your stack connection. For that, you have your API key, your delivery token, environment, and your region. And so, based on that, it just knows, okay, I'm in AWS EU or US or something like that. And then this stack knows how to query. So with this stack you can say give me all pages of type article or something like that and you just get the JSON back and you run. And so if you wanted to do live preview actually this stack setup does not include the whole live preview thing because we also wanted live preview to work if you didn't have that stack setup because you can also just use the API and build your own stuff because why not? And so, um, this is just a little convenience thing where you can actually say, well, if I have my stack, let's enable my live preview and give my preview token that you can set up in the CMS. And if you give it this, if it knows the token and you set enabled and you set the right region, it will now actually load um from a different API the moment everything is enabled. So, what it would do normally, it would be rest.contentstock.com, contentstock.com. I think when you query your pages, the moment you enable this to true, automatically this thing is going to query from preview-rest.contents.com, which is another endpoint that constantly updates everything a content editor is doing. So every time you request the data from there, every time you press a letter, you requery it and you get the information without saving. And so that's what this does for you. And so then you still need to set up your live preview itself. And here there's a little bit more information because this live preview SDK then needs to know about your stack again. And so because we've chosen to make everything work agnostically like you can completely custom build this as well. These are just helpers. They need to know about each other. So that's why there are slightly more setup here. But you can set this to builder or preview. And preview is basically when you I set it to preview now. So let's have a look. Um, if we actually go to my entry and I just hit like live preview here, you'll see that same thing happen. So when I edit something, you see that update here directly. This is exactly the same tech as the visual builder, but the only difference is preview or builder because when it's builder, it needs a little bit more information and so the, you know, the SDK does a bit more work. Um, you can add like a bunch of extra things like an edit button. So, when I go to the standalone page and I'm I've turned on live preview, there's a button to start editing. So, you can just click and it goes into the CMS. Um, a bunch of stuff like that. Um, there's other like the edit button. I was just going to say the edit button is optional, but I do recommend that you use it for orienting folks who are creating content, right? Like let be explicit. let people know what they can and can't do and where they can do it. But you can also choose like only show it outside the live preview portal. Like for example, right now in here there's no big edit button, right? But when I actually go to this URL in a new tab, you see there's the button now. Yeah. So you can choose and you see there's also like right now you don't see these edit tags pop up, right? But inside here you do see them pop up. So when I click it knows where to edit. You can set all that up in your code. So, you know, exactly to how you like it essentially. Um, let's see. And this is just a the way to get a page. This is a very simple function where I just say, hey, for the stack, get me the content type page. Get me the query where the URL equals whatever URL I give here. So, let's say slash or about us or whatever. And it finds it and returns it. And this is very basic stuff. This you can do without the SDK. We can do it with our net SDK that all works and this is actually a more magical part. So in the beginning when we just when we had a few comments about hey this feels tightly coupled this is what that is right. So in our utilities there's an add editable tags and what this does the moment you query your entry and you say hey for this entry edit it add these editable tags please. What it does it actually if I inspect here you can see that in the HTML you see it has data- CSLP we have a page type its ID its language and then the field and so in the visual builder when you click on this it now knows because of this information what it's editing and that's why this is it's very handy to work with but it does feel a little bit tightly coupled and so what we've built is like and you can choose the way you do that is like if I'm not in preview mode, I don't even render though. So, nobody needs to know this exists. So, this is only specifically inside visual builder. Um, I think we have a question from a question. Yeah. Do we need to update any of the request or response headers to get preview working in the iframe or possibly a CSP header? Yeah. So, there there is some stuff there for sure. Yeah. Um so Tyler if you have an out ofthe-box next or next for example these there like um the ability to do stuff in the iframe with the frame ancestors is by default it's cool but the moment you start touching whatever that looks like um you will have to do a few specific things to allow that this works. So you can just go to our documentation and then it it explains basically what kind of stuff you have to add. Um, what I should show you though that might be interesting if we we have some questions in the Q&A section too that have been I see those actually. That's interesting. I see them. Um, juggling between the Yeah. Okay. So, we got one from St. You want to take that one? Yeah. Sorry if I missed. Is there a way to standardize variables, font sizes, and padding? Yes. I think we actually don't. Do we have an example of this in the Kickstart? might be in the beta in the beta in the beta there's more but what it comes down to in the visual builder is that in the visual builder or the CMS knows nothing about your sizes paddings variables whatever you as the coder can add these in and you can then just choose whatever fields you want to show yes or no and so there will be stuff in the future that we cannot really talk about now where that might be playing a big much bigger role but we're going going to leave it at that and keep you guessing for a second. Yeah. But um for now, this is just how you set it up in your code and whatever props you add to your data model. Does that cover? And you can also customize right in the way that you set up like you had the theme of light and dark. So you could if there are standardized font sizes for instance, you could build that into the entry editor to give people the option like oh if they wanted to use small, medium or large, right? Yeah, I actually have that here like for this page. Right. So actually here I have it like is this left or right for example. So when you look at my global field for this block I have this little layout and that just says in this case is is a choice between image left or image right. So this is a super simple version. If you wanted to, you can add your fonts here. You can do whatever you want. It's just a data model. And so when we actually go to the visual builder and I select this block, let's see. This is the block. And I look at my little form here. You see I have image left or image right. And if I set it to image right, the only thing this does is I query back the data from the system. And that now sees that the image right prop is set to true or to false or whatever you want to call this. And then it just rerenders based on whatever you set your front end code to be. So in visual builder and live preview it's fully on the developer and the data modeler to do these things. Um a little tease in the future that will might potentially change into a different type of experience but that's not for now. Um there's also another question. Question. Yeah. Can you put Okay. Can you enable visual experience based on certain item types? Um, so if you want to leave articles alone but give folks flexibility in other areas, i.e. marketing pages from Chris. Um, so what I know now, and I'd have to go a little bit deeper to find out, but essentially you can visually visually edit something if it has a URL field attached. So if this content model like has a specific URL field that you fill out, now you'll be able to use um visual experience and it just works. So anything that has a URL, you should be able to add that. And so potentially if you wanted your articles not to be touched but other pages. Yes. You could do something with that or low correct me if I'm wrong. We should be able to have some access rights for people to edit certain things a certain way. Yes or no, right? Yeah. And you could I mean there's some level of control, right, of where those edit tags appear, right? I don't think I haven't tried that out yet, but it seems I haven't. Yeah. Um, that's something we can get back to, Chris, if you wanted to have more specific stuff. Yeah, for sure. Um, so Michelle, you're saying that you have some trouble in Safari. Um, I'm not sure I have personally seen that, but we can see it here and see if it re Oh, I have to log in and everything. I'm not sure this is the moment, but as far as I'm aware, it should work. And if not, we have to file a bug and make it work because Safari is a very modern browser. That should not be a problem. It should be working. Exactly. Um, let's see. Is there anything still in the chat also questionwise? I don't see. I think we're good. Um, so what I would maybe want to show you is let's say that's an important one. So right now we looked at like the client version of this, right? Um, and so when it's the client version, it basically is just instant because I just click on this thing, I edit it, and you see in the and when I blur, you see in the left, it's just syncing, and now it's saved. And now this is now what this thing is. So when I hit save, this is now what the content is. So it directly works. Um, it is not always possible for everyone to do it this way. So we also have a setting for SSR. And so let's let's actually have a look at that one now. And so let me just go here and then open another one. This is the SSR version. Um just open it in my code as well so we can have a look. So let's run this one. And then that would be this. And so this one is not as annotated as the other one. Um so the only difference in this build is kind of like SSR is set to true here. And we have a slightly different setup where essentially everything is this is in this is in nex.js. So everything is serverside rendered here also this there's not much going on codewise. And we have one component that is loaded here in our you know um in our layout which is a use client component. And so this one runs in JavaScript and actually sets up live preview. So I have this initialize live preview function that sets all this up. And so even if you if you have a more old school build like um something in PHP or a WordPress or whatever I'm saying things here um you can just have this as a script tag and it would work as well. You can just you know code this in and go. Um and so this one will look quite different. So now when it's loading um this is now initializing. Give it a sec. Um you can see now this is now the SSR way and so in this codebase I actually show you here um the stuff that comes out on the URL. So in the URL of the iframe we add these query parameters and so in my code now automatically because I use the SDK it will grab these query parameters and then requery with those. So those three together know that for this instance, for this user, stuff has to come back. So now when I change this and I blur, you can see it actually reloaded the page now. Yeah. So now this is it. If you have a slow website, this is not the best thing to do, right? Because it's kind of like now this actually reloaded the page when I did this update. Um, let's just put this back the way it was. Here we go. And so this actually reloaded the page. And so that's the way to make this work um this way as well. So if your page is fast and you want you are able to do this reload, it's actually pretty good to go. Um there is a way though where if you don't use our SDK and let's say you have a whole middleware layer um in your codebase and that's where it gets a little bit more complicated, right? You might have a middleware microser somewhere that gets information from content stack and then you do something with the data and then your front end talks to that middleware. So you don't you have your own caching layer for example or you have multiple data streams coming in there and there you likely won't be using the SDK and so I have a little example with that as well. Let's have a look at this one. So, as you can see, the this is that same file we just had open in our other editor. So, we still have the live preview in it thing. However, there's no stack now because that happens in my wheelware somewhere. And so, I kind of just coded my own middleware in this same app, but this can live anywhere you want. And so, what this is doing, this is calling our endpoint API without the SDK. And so we wanted it to be a for you to be able to do that, right? So you can call our API from any language with or without SDK because in the end it's just a REST API or a GraphQL endpoint. We'll get there in a sec. I'm looking at the time. We have 10 minutes I think. I know time is flying by. And so um basically what this does is um if we look at our page I get these query parameters right that's actually what we saw here these query parameters that's what I get and so I get the search params on my page and I see hey is the live preview hash one of those query parameters well yes you know that's that one And um I kind of figure out what the URL is and the content type. I know in this case it's page. So I kind of hardcoded it for this demo. And so what I do if there's live preview, I just query that endpoint and I just add whatever that information was that I had. I just added this as query parameters to my middleware. I can post it. I can get it whatever I want. And if it's not with live preview, I just don't send that query parameter. And if I if it is in live preview mode, I do send that query parameter. And so when you actually call that middleware wherever it may live you actually say okay well get let me get all that stuff and this can be any language this can be innet or whatever you like to use and so I'm getting my search params for the URL the live preview things like that so this is the information that content stack gives you hey if you're in live preview you will have this query parameter and this is your hash and now it's safe to use right and so based on that I can start building up the host name I'm going to query to. Right? So I might actually say if I make a base host name and if my host name actually if live preview is true, I'm going to change my host name to my preview host rather than the content delivery host. And what these host URLs look like, you can just go to our docs and find them. Just search for endpoints. Um, and so basically my host name is if there's a live preview, then give me my live preview endpoint. And this is just a little helper package that we created that you can use as well. So you don't have to remember the URL. So it just gives you this as uh an object. Um, so if it's live preview, give me the preview endpoint. And if it's not live preview, I just want content delivery. And so you're changing the host name you're querying to. And then you add a bunch of headers, right? So you had your API key, your access token. If live preview is true, I'm going to append that to my headers as well. And I also add my preview token. And environment is just wherever you publish your stuff to. And so you essentially just um create this URL. This is essentially just how you would concatenate a URL together to query, you know, your API. And then you query it like normal, return it. And even here you can add these editable tags if you want because in this case this is a NodeJS endpoint. So for us this is a super easy thing to do. And you just return it. And so now you have done the whole thing if you didn't have an SDK. But on the front end I can still initialize my live preview and just run and it works exactly the same. I can actually run it and show you. Just run this bad boy. Let's reload just to be safe. Ah, okay. So, Eric did answer that question about permissions related to Visual Builder. Ah, so you can That's cool. And you can Oh, that's very awesome. All right. So now this one is actually using that middleware. So when I now do this edit, it now went through my middleware and you can probably see that in my um local host here. You can see I got this API middleware thing come in. Then it query the I think this is now querying content stack. then it go best like so um it's very interesting um how this stuff works right where you can just make your own API endpoint and that kind of just works and so I'm not saying this is a super easy way to do it but you can and so maybe there's one last one we should look at because a lot of people love using GraphQL yes and the it's super awesome but there's one drawback that we've noticed now with our visual builder is that all these packages packages that we're just showing you are kind of built on the structure that is output by the rest API and this is how we basically we have an open API spec with swagger specifically for REST and all the packages and the SDKs kind of work based on that. However, if you do a GraphQL output things get slightly different and I can actually show you that if you want. Um, so let's see. Do we actually have our playground here? Yes, we do. And so, for example, in our REST API output, when you have an image attached to an entry, it's just entry. And then you have an object of your image. But actually, an image is another thing, right? So, it's a connection between two items and a reference. Exactly. So, when you do follow the spec of um GraphQL, it will show you that reference. So now when I want to actually say okay I want the title URL and description. I hope this is not too small. Um you can see here image connection right? So image connection has an edge and a node and then here is my image file name. So you can see the structure here is image connection edge is node and then the file name and then all the other things you might need. In our normal API output this is just dot image and then this object. So this object might be file size, metadata, title, URL, things like this. This is stuff you might want to get, right? So this object is normally just an image, but because of the nature of GraphQL, this is how that works. So let me quickly show you the GraphQL code. And yeah, because it's much stricter, right? Like it is. Yes. And it's not like if you're used to GraphQL, it kind of just works fine, but you need to know that extra little step. And by the way, I now taking the liberty to show all this in next, right? But it works in Nux, Angular, all the other ones as well, but most people use this. And for the folks that know me on this stream, you know that I'm a next person, right? So I'm Yeah, kind of struggling with this, but it works fine. And I'm the next person. Yeah, you're the next I'm the next person. Um, anyways, so we are now in the GraphQL version. This is again that same content stack library file. Um the cool thing is about um GraphQL is that you can do codegen, right? So we have a TypeScript output system in our CLI that you can just use, grab your types, put it in your code. But in GraphQL, you can actually um just query your stack with your environment and API key and get like all the code generation for you, which is super nice. So that's in here as well. So when we have a look, we still make the stack just as all the other ones. We still initialize live preview just like all the other ones. However, when we want to get the page, this is going to be a GraphQL query, right? And so this is not an example with Apollo or something complex. This is a super simple one where we essentially figure out, okay, so what is my GraphQL endpoint and what is my GraphQL preview endpoint. So now we have our endpoint is GraphQL. com for the CDN endpoint and preview-graphql.contentac.com for your preview. And so you see here just like we did in the middleware, I'm kind of just if preview is true, which I just set an environment variable here. Well, then let me grab the the GraphQL preview URL rather than the normal one. And then you add a bunch of headers with your access token. If the live preview hash is there, I'm going to add my live preview and my preview token. And you see this is very similar to that like um one constructing you just put in your query in GraphQL and this is the one thing that X me a little bit but it is what it is and we might solve that later I hope so but we'll see full transparency here right we're all developers um I'm grabbing my full result here from the query from the GraphQL client and So what I have to do to make live preview work especially those two are the most important ones on the root it needs a UID which is this is the item that we just requested and you can see it's um all page item zero system UID which is essentially when you look at the playground here oops you look at the playground you see you get data all page items and then you get your base and so I am getting the UID from system UID and so the thing is we actually need that UID on the root in visual builder. So what you start doing is the moment you get your page back and all your data you map it to whatever that output for the for the rest would be. So you add the UID like this. We have to add the content type UID like this and all this connection bits. We need to make them simpler so it becomes an image or block like that. And so once you learn how to do this, you write a helper function and it's done. It's super simple, but you have to kind of there's a little extra and I know we're taking time now. So I just wanted to have shown this and for the rest it works basically identical to all the others. Um, so now that I spoke for like a long time and I showed you a bunch of different things, um, I know we're over time, but if there are specific questions, I'm super happy to kind of show a bit more. Um, or maybe, you know, take notes, get feedback, anything. Looks like we're uh, and if not dinner time, the last call, but Oh, I think this is a great place to to call it. Um, yeah, this is a great very informative. I would say if anybody has any trouble with their current setup, their tech stack, whatever they're doing, and you are a customer, just reach out. Like go to your CSM or support or find either Low or high or on LinkedIn and just ask because we're more than happy to put the people that built this stuff and one of us on this on the call with you and actually share screen and fix it like we've done with a bunch of people and it turns out it's almost always doable. I think that's an important way to end this on. Yeah. And just that like you and I are also in the Discord community, so you can reach out to us there, too. If you're not, um, you can go to community.contentstack.com and sign up. And we're in there. You can hang out and chat with us, ask your questions, we will answer them. And if we can't answer them, we will find someone who can. For sure. That's often the case because that's so fun about working at content stack because everything is so um autonomous. All these endpoints do their own thing. So everybody has a different setup. So it's super exciting to see what people do with it and how do you abuse it and it kind of still works. That's the fun. That's so much fun. Yes. Um so it's important with this slide here like all everything you saw today. Everybody has this if it's in your plan at least, right Brendan? Uh that might be a stretch for but I would say the vast majority. Yes. Yeah. So we will be sending you um for all the attendees some follow-up stuff. So you'll be getting like documentation links, quick starts, like all the code that I just showed you, it's all on GitHub. They all have read memes. You can you can be up and running in like five minutes with all that stuff. And so we would love for you to actually just grab one of those kickstarts even though it might not be in your opinion of how you have to code at least it shows you in the minimum amount of code what you have to do and you just then put it in however you love to do it. Um, Shannon asked, um, yes. So, Shannon, you can reach out to us on LinkedIn. You can also reach out to your CSM if you have one. Um, you can go to our academy. There's a bunch of videos on this as well. Yeah, we have a lot of resources, but if you want to reach out to Tamarai specifically, we're both on LinkedIn. Um, so you can get in touch with us there. What's the last slide? I think so. I think so. I think we just had a maybe a Q&A one, but build that up throughout. So, I don't think Oh, no. I just have this. There we go. That's it. The most important part. All right. Well, thanks everyone for joining this month. Uh, this was just a great variation on what we normally do, but it was really exciting and very informative. Thanks Tim and Lo for joining and we will catch you at the next one. Cheers everyone. Thanks for your patience. Bye. Take care. Bye. [Music]