Unleashing the power of GraphQL: navigating the transition to a headless CMS

As the digital landscape continues to reach new heights, so does the demand for a modern, agile, and consistent method of distributing content across a myriad of devices.

A headless CMS has powerful and seamless omnichannel capabilities that can reach key audiences, wherever they are, offer personalization to improve user experiences, and a scalable infrastructure that deploys instantly. Understand how, by using GraphQL, you can transform how you deliver exceptional experiences and future proof your tech stack.

Transcript

Okay. Nice to meet you all. My name's Simon Chapman, and I'm joined by my venerable colleague, Kunal, just in the front road just here, and we're today going to talk to you all about unleashing the wonderful power of Graph you well and navigating your path and transition towards using a headless CMS. Now the agenda will look as follows.

We'll start with an introduction in terms of who it is and what we're trying to say with this particular session, then we'll move on to really why you should do it and why we think headless is so wonderful. Then we'll go into a fantastic demonstration with lots of examples of different ways in which you can go headlessly with Opti. And then how do you get started? I've had some guides, some useful links, some places where you can get started using all of that lovely stuff you've heard over the last day or so about how you can use headless.

And For those of you observant, you have seen that we've got Kahoot and the prize. So for those of you paying attention to this session, There is an opti branded goodie bag full of opti goodies that will be for the person that can answer not just the quickest, but also the most correct to win the Kahoot prize and quiz. There's a Q and A at the end, so thank you for attending. Now Let's give you a brief introduction.

For those of you who are not familiar with this particular thing that we are doing, here are some good examples of how To be honest, we've already been doing headless.

We've already been doing it hybridly, for example, so it's not something really that actually in a way is new. Because you've already been doing it. And these are just some examples of clients that are using us in a hybrid headless way, for example. Now why I mentioned these is you can go off to their websites interact with these brands and look at how they have managed to implement going headless, but using optimizely as their content source.

Now for those of you that are, let's just say not familiar with this particular thing, what is this particular topic? What is headless? Well, effectively, headless CMS content management system that allows you to separate the back end from the front end or the presentation layer. And so simply put, as you can see there, it's very simple in terms of differentiating between the back and the front. And ultimately, as I've used a very medieval term there, it is chopped off from the body or the back end system. I couldn't get away with that course. I'm British, so I would quote, medieval history.

Now the benefits, of course, is the integration with other technologies rather than that costly replacements of legacy systems, etcetera, etcetera. You can reach customers on new and exciting touch points, but using optimizely as the content source. So that one to many thing where you can take that content repository, as we all know. You're familiar with our CMS. We treat it as content and not as pages, so that lends itself very well to being a headless CMS.

Thirdly, responding to when customer expectations do indeed change. As we know, of course, we're all in this room. We all know your boss or someone says change the website again and again and again and again and you want to be able to do that very quickly.

Now there are three reasons. There are many, many others, but the point of it is actually to allow you to have something which is truly flexible and meets all of those new changes.

Now to break it down a step further, it can also be that there are advantages, but also for the interests of balance I've introduced disadvantages as well. You might be thinking why have I done that? It's because headless isn't for every scenario.

So some people come to me and say, well, actually, maybe it's gonna be the the the panacea for everything. No, it isn't. And so it may not be that it resolves complexity, but it does give you some out standing advantages in terms of the editing experiences, the single content source of truth, the flexibility for developers, And ultimately, the one, my personal favorite, which is the enhanced security because of reducing the area of attack.

Now they are pretty good reasons, I think, to choose headlessness.

Now a question for you all, raise your hand if you will. How many of you are considering with your new experiences, websites, etcetera, to go headless with your next project?

It's good because you're in this room. So it makes good sense. Now, great to hear. It's what we hear as well.

That's why we did the new launch of our new CMS offer because the market was telling us, look, we need more. We need more. We need more in headless. And that comes from the RFPs, the RFPs, me talking to lots of partners and customers who are interested in exactly how they can move and transition to headless.

Now next question. It's a trick question. Can optimizely be used as a head of CMS?

Yes. Of course it can, but not just a course it can. When it was the transition?

Absolutely.

Not just a yes and absolutely. And so we support headless head on and hybrid. And so as you can see, by the very excited people on this slide, they are very excited about going headless too. And so I'm trying to get to you is it's not just one deployment model. It's many choices. And each one may have benefits, whether it's truly headless, whether it's head on, whether it's more of a hybrid approach, there are pros and cons and benefits to going indeed and choosing to you choose headless. Now let's dig into the benefits a bit more.

In terms of what you've seen already, in terms of using, let's just say graph the topic of this session today, It works by taking information from CMS, obviously, via a content sync to push that into graph. But the bit I wanna touch on is the fact that it's not just limited to what you wanna in terms of particular frameworks. It can work with Vue, with Angular, with Vasell as you see or indeed with React. Now why I've chosen to pick those four is because there are lots of exciting, interesting articles on our docs and user guides, developer guides that give you head starts in building out and using your presentation layer with one of those frameworks.

And because we chose to use GraphQL, it means that there's SDKs already baked. So therefore, you can save time in the development and building by using these particular frameworks. But you'll see as well, I've included a partner or customer. Now at this present time, we don't host the presentation layer So therefore, it's on the fact that you will choose someone like Vacel to host or indeed have and manage that presentation layer or you can obviously choose to do it yourselves.

It's benefits for both, but it's your choice. So we will still have the CMS part hosted by us you will use graph as the means by getting the information out. And then depending on the presentation layer or framework of your choosing, you will then choose to use that framework as you see fit.

Now what is graph? For those of you that don't know what graph is, you've heard it mentioned lots on lots of slides and everything else. It is our SaaS service, which is multi tenant and allows you to search and query and deliver content anywhere. That is clear.

And there are some benefits ultimately if you want to in terms of reusing content creating content blocks, etcetera, etcetera. There's great flexibility there. And also, if you wanted to, to use it for customized search experiences, It's fantastic for using a search. And if you join the session that's coming up after this and my colleague, Shannon, and Rob, who are talking about how to use graph as a search results and search service.

They will talk to you with much more detail about how you can not only do this for your content, but use graph for your search. Service as well.

Now in terms of how it works, it exposes the content as a graph based structure. And so you can query it from a single endpoint. And so by talking to c g dot optimizely dot com, the graph location, it means that you will get and work with particular queries that you raise, and it will return you a piece of JSON for you to do as you please.

Now as you can see, the key points around this service is the fact that it will synchronize those items and then subsequently based on the schema that you design will be available through the Graph service. So the published content is available in near real time. So as you can see near real time, it's pretty quick to be frank. It's just as quick as the sink and get it across from one place to another. So if you do this, this, of course, it might not be there that quickly, but it'll be there pretty much quickly afterwards.

Now in terms of that, this is the way forward for us. So if you're thinking about how you are looking to build your experiences in the future, how you are looking to integrate with CMS, this is the way forward for doing that. And so you will use graph as your consistent data source for any content reading you want to do from the CMS.

Now the schema itself looks something like this. The ability to raise a query. So there it is as an example, one there. I specify the locale.

I do a full text search only on fields that are available to be full text search. That is. And so where it contains this, but doesn't contain this ordering and then restricting the amount of items that you can specify. And we've helpfully given you some lovely color coding on this slide, so you can see exactly which pieces to use.

Now in terms of that, if you want to see more details in terms of the kinds of things that you can insert directly into the queries, like this one that you make, please visit the link. We will share the links with you in terms of getting all of that different information about how to build your queries. But simply put We follow the standard. So if you are familiar with using this already, you can use that existing knowledge that you already have to then make your queries.

We are not deviating from the standards on GraphQL.

Now here's some examples of some queries that I've made earlier.

And so simply put, you can do some selecting, maybe matching values like you've seen there where it contains alloy and starts with explore and certain items and ranking, etcetera, etcetera, or maybe choosing to limit and skip or maybe do pagination about your particular results. These are just some examples of the many that we've been using already to build different kinds of experiences. But the point I'm getting to is there's lots of ways in which you could do exciting things with graphs to build out your queries as you wish. And so these are just four examples. There are hundreds of others on our website.

And a question I'm often asked, do we support introspection on this service? And so, yes, we do is the answer. So you can query for the schema. If you are unsure of exactly what it is that's available to me to actually then build my queries, etcetera, etcetera, on the left, we've got the fact that the schema says, give me all the the names, etcetera, we see there.

And then on the right hand side, give me everything that's within standard page. For example. So if you are unfamiliar or don't know what those items are called, make the query introspectively, and then it will return back all of the field names that you can use. Again, nothing that you would not expect.

It's just to show you that we do it too.

But one extra thing that you may be if you keen followers of our websites, you will know that we also support the ability to do semantic search. Now My favorite thing that I like to call it is the vocabulary mismatch problem. What that means, if you want to choose a non alcoholic cold beverage, and you go looking for Coke. And naturally, you meant to say Pepsi, although I don't favor any particular brands for the recording.

It's the fact that we can actually get both The idea being is that I mean this, but I'm gonna search for this, but I will return both. It won't be as higher ranking, but it knows the context of the request as it knows that those two things are both cola drinks. Now that's important. For building a search service, especially because what it means is we've got a trained algorithm, which is looking for those kinds of things.

And you'll see there it's standard keyword search of the BM twenty five relevance. So those of you familiar with that, It means that all you have to do really is have those text fields that are queryable, where you specified semantic, and it will in turn look an audible results based on semantically matching the query that you've raised. Now behind the scenes, what's happened, is as AI. AI is automatically being tuned to then understand exactly what are the kinds of things that could be matched for.

So we have that particular underpinning of AI. As you've heard, AI is everywhere in our platform at the moment, and this is just another example of where we are tuning the results to give you the right semantically matching results.

Now here's an example.

Now I thought that the examples I could pick from, and I thought, well, I'll pick on one of my favorite guilty pleasure films, which is Will Smith's Wild Wild West. And I thought, well, what's a phrase that isn't in there that you would expect to be in there. And the answer is the phrase unbelievably action movie.

Shocking, right? You would think, well, I'll do a search for action movies, and that will appear. It does not in there, but you'll notice it returned the result. Because effectively, it knows that this kind of thing is actually an action movie.

What does it mean? It means that you can be very sophisticated in the kinds of indexes you build and the kinds of results you get back. That's the point. And so in this example, it's returning the result, but the phrase itself is not present in the text.

Okay. Now That's me over in terms of showing you this particular piece. I'll come back to you later to talk about how you can get started by the handover to Qunal to talk through some lovely demonstrations.

Alright. So, I mean, usually on meetings I ask, do you see my screen? But, yeah, in this case, you do.

So what we have in front of us right now is a application that's deployed to our cell. It's called the city guide. It's a simple application not too complicated of a schema, has a home page listing all the cities, and a detailed page when you go to an individual city. This is built on top of NextOS thirteen, user app router.

That's the the latest and the greatest, and they recommend you use the app router. Also has the logic to actually invited the cache. The site is statically generated. What that means is when you deploy the application the first time, it was a graphql query to decide how many pages should be computed at the build time.

And every time you add a new page or if you modify and update any of the existing data, we invalidate the cache for that specific thing and then rebuild the the entry.

The code itself is actually available on the, repository. Oh, I shouldn't have chosen to talk more.

It is available in the repository itself. When Simon goes through the list of resources, you'll see that there's a link to the repository here. It has the data needed. So if you have a CMS, instance, you can import that data and then use the deploy to button towards all the variables that would include the graph fuel, the optimizing graph's configuration. And once you do, then you'll have a side spinner for your own where you can test around and and, experiment with the application itself.

Now one thing to note is Versa gives you the option of preview branches. It's a very common scenario. So what happens is there's developers who release different features, and they wanna test them separately from the actual production website.

The thing is you want to preview your content before you publish.

And in this specific scenario, what I've done is anytime you make changes to the content. You can preview it on different URL. You'll notice that I'm logged in, so you'll see a tiny icon below, that's my face right there. But it tells me that I'm logged in, which means I'm authorized to actually look at the preview content, and I'm also in edit mode.

And the example deposit that I showed you before you have, what we're still calls visual editing. So what this does is actually starts to highlight the content on this specific page when it's the app deployed on Versel has visual editing in place and gives you a link. So if you click on one of these, it just opens up the CMS. So I'm, running my own instance of CMS, of course, here, and I have the City Amsterdam open.

There's things like Intotechs, for example, main body. I've only highlighted the intertext in the example website, but you can start and highlight different fields, on the content. That way you could take it to a specific field and make changes to it directly.

So what I'll do is for the sake of demo. Let's just do hello.

And I am just making the change to this right now. And you'll notice that, in the CMS, it tells me, hey, you've made some change, and, these are still draft. So nothing has been published yet. But you have a draft version of the content available.

If I go back to the side from the previous screen where we had this on page editing enabled, And if I refresh this now, I should see fingers crossed.

I should see I'm a bad designer. Sorry about that. But yeah, I see the text that I have. This is draft content that I just created. If I go on the actual production website and if I refresh, I hope that the content remains the same. So you see you have two different websites now. You have, a preview mode where you look at the draft content, and then you actually have the production mode where the content is, as it is, it has not been touched anyway.

But the moment I go ahead and actually publish it, Let me do that. I'm publishing my changes now. So the draft is now authorized. You follow the workflow process.

Every everyone has approved it. It's now actually published. I go back on my production website and if I refresh it. Takes a while.

The content there will also be updated.

Again, I've broken production. Sorry about that. But the idea is you take the content, preview it on the preview side, To preview the content, you need to be authorized. So you log in to our cell, using authentication mechanisms, and then it lets you look at the preview content. Once you're satisfied with that, you take that content you publish and it appears on your actual production website.

Now, the queries that Simon showed from before, so when you typed in your graphql queries and got results back, this is how it would look like. So you would have, different entities that are exposed to you. These are all listed here nicely in the documentation itself. So you know what you can query for.

If you wanted to pick a specific field, you could just ex use the explorer, select specific fields. So here it tells me I'm choosing the name, for example, and the intro text and the image. When I execute the query, I see the results on the right hand side. So I see that I only got name, into text, and image URL back.

So the idea here is, and this is a quote from my colleague, David Knight. It's graphql is the goldilocks of API, which means you get just the perfect content you want, not too much or not to listen. And this is very useful when you actually go in a scenario of a mobile application. So what I have is to apps.

These are based on React Native by the way.

And they are actually serving the same content. So the content that we saw on the website which was authored in the CMS is being served on these two mobile apps. They are built using React Native, and they use the same graphql queries. So you are able to take the content that you created in the CMS and deliver its omni channel.

So I have the same content being served here in an iPhone, simulator. So if I click on this, it loads the content, and similarly on Android simulator as well. I'm using react native, but if you're using just local SDKs, like, if you build something in Swift, for example, or in, Scotland or something like Flutter to abstract that a bit, both those scenarios would just work because they use graph wheel. There's libraries out there for all of these, channels, and then you can use a graph will likely to actually make the query, get the data, and then run it in your own application.

So we'll go into another topic. So we, everyone was there at the keynote yesterday. I assume.

Did anyone miss the keynote by any chance?

Good.

So, as part of the keynote, my, colleague Jacob He showed this concept of external sources and optimizing graph. So what we have in fundamentals right now is an example website.

This is just getting in posts from different CMSs. So I have tried to tag all of the content that comes in So you will see there's a mixed content coming in from an headless CMS like, story block or content full, WordPress. That's a very common scenario we come across as well. And some unknown CSS like Keystone JS. That's a node JS based open source, CMS.

And this is being served with the help of optimize the, graph itself. So optimize the graph is actually ingesting the content from these external sources and is then delivering the content in a headless experience for the end user to, to be able to look at it. So from an external perspective, if I not put the tags in there, he would not have been able to tell if this is coming in from optimizes CMS or from some external data source that you have.

So just to test our theory about external content, what I'm gonna do is I'm gonna publish these articles. So I'm in WordPress right now.

This is not a WordPress session, by the way, but prove my point. So I've created a small article. It talks about Comic Con in San Diego. I have this, small featured image as well here. If I go ahead and if I publish my changes, so I'm actually publishing this article was in draft mode before.

Once I do, I can go back. And if I hit refresh, then I have the new article being shown up here. Now this process. What happens is when you create the content in that external system, it is using webhooks to actually tell my middleware, which is running on resale, that, hey, someone created a new content in this external repository, you want to ingest that into optimizing graph. And that then allows you to index that entry into optimizing graph. And the application itself is just consuming straightforward from a single API. So we have one single API for all those external sources.

A single location. So from a developer perspective, it's much easier because you just have to deal with one API. Plus, the benefit of off the graph is just runs on cloudflare as a service worker. So very good performance has high level of caching as well.

So you'll get instant, results when you publish it. So we saw that, you know, publish something on WordPress. I think we didn't like a second or two. It just, appear on the on the website itself.

What you can also do is, again, visual editing. Now the benefit here would be if I go here in visual editing, you'll notice that all these sources are coming in from, like, different databases. So if I should just access the website first, so I have the latest content.

There we go. If I highlight over different elements now, so I'm gonna go in, edit mode, I start to highlight. It tells me open in WordPress. This one's, yeah, open in story block.

And if I click on one of these links, it actually takes me to that same page from before. In WordPress, or if I decide to go with a different CMS, let me click on edit again and click on this. This then takes me to a different CMS altogether. So all those sources, although they are stored externally, I'm also able to link and give the editor experience where they can go in hit the visual editing button and be able to click on and then actually go to the place where that content is stored.

It makes their life a bit easy.

Maybe do this?

Okay.

So the middle way that I spoke about, the way it works is, when you have any external data source, you will have a action, like the content has been modified or published. And so any kind of publish or unpublished action that happens on the content.

And, once that is done, you need to then invoke the Whursale middleware The code for this, by the way, is not yet public. I plan to make it public next week after the optic call is over, but the voice mail will actually receive this webhook notification from an external system. So I think almost all external systems have some kind of a webhook functionality. So unless you have like a very flat file storage, like a CSV file or a JSON file, besides that, every everything else should have some kind of a mechanism to trigger an external system a middleware that lets you then take in that data from the external system and push it through into optimize the graph. So here, step one is that someone changes the content. The middleware was notified, then it actually does a synchronization of the changes to optimize the graph. And the funded application that we saw which had a list of all those posts is then gonna fetch in the data from a list of, yeah, whatever data was ingested in there.

From a schema perspective, this looks something like this. So what I've done is I've created the abstraction as well. So when you define external schemas, for me, it was simple because I had a post which had a title, intro text and a image, and that was enough for me. So I defined this generic thing called as external post If I run a query here, then I get all the data.

So I have data coming in from the source being WordPress, for example, or story block or control for whatever that is, But if I wanted to, I could also change the square now and make it just a specific CMS post. If I wanted to get just the post from WordPress, because they give me all the wordpress posts. So forget the source piece. Just dump all the content.

That works as well. So you're able to actually take in the query and when you define the schema, you will control this. So you'll have the capability of whether defining, a base schema for all those external sources or just have external sources schemas on their own, being able to send the query, get the data back, and the results just show up. So you could, in the graphql side of things, make the query such that it only gets the wordpress post or you could add more filters in there.

You have complete control over the schema and the definition of the schema.

One thing that, also Simon spoke about, and we have a session dedicated to that at three fifteen, I think, or three PM, by my colleague, Simon and Shannon and Rob.

And, the thing is, we have semantic storage in optimizing graph. When you import that external data in, so I have this, external CMS that I'm using keystone JS, if I run a query right now where I say, hey, find me any post that talks about John Snow. I'm a big fan of Game of Thrones. That was a team for my session yesterday as well.

But if I run this query, I get no results back because there's no real post that has this specific content. When I switch from the standard search to semantics, so now you'll see that I've changed the ranking as semantic. I start getting results back and also score. So it tells me how much of relevance is there with the query that I've given it.

So John Snow, and, the content that I have. So here it talks about, this thing in Invest Force, which is the city in a game of thrones. But the idea here is you don't get empty results. You actually get context aware and and relative results, based on the query that you that is submit.

From the code perspective itself, the application, like I said, the website that we saw the city guide is built on top of, NextES and is deployed to, Versel. These are the standard graphical queries they're all in the example repository. The code for this already live, when Simon shares resources, you'll be able to go through and look at the repository code.

And the other application is, the middleware itself. So I'll just take a look at simple example of the middleware.

So here, for example, let's take a look at the WordPress route. This is where it gets invoked. So I'm handling a post action, which is the WordPress system sending a web notification to my virtual middleware. It takes in all the data.

It tries to see what kind of action is being performed, like a published action or a trash action, which is the delete action. And then generate the entries needed to index into optimize your graph. For the indexing piece, we use this format called as ND JSON. So it's basically, Jason separated by new lines.

And then that gives you the entry which is then pushed through into the optimizing graph. And is made available in the interface that we saw from before. So the funded application can then consume that data.

Think that was it from my side.

So that demonstration, as we just said, all of that code is available now to be used and ultimately to, get started. Now the question you're thinking is, how do we get started? Well, it just so happens we have some resources.

Now first up, though, getting started with graph, what you need to do is effectively install a particular package. In this case, the optimized graph CMS package.

Now if you're familiar with this, you will all know this. Those of you that have been working with Visual Studio for a long time, you'll know that you'll go to tools, and you get package manager, package manager console and then enter the install dash package optimize the content graph dot c m s. Now those of you observant Of course, content graph was the former name of graph, and now it's been rebranded, renamed to graph.

So, therefore, that's the package name. Now inside the settings that we've already configured there, you're looking at specifying the gateway address or the URL for the gateway. So, therefore, that is, of course, as you saw, c g dot optimizely dot com for all production environments, the app key, the secret, the single key, and of course if you wish the sending log to send all of those errors that you will surely not make when you're making your code.

Now The process itself is straightforward. Kenal obviously did an excellent demonstration where he's already done all this stuff many times. And so you will synchronize the content, the content types and sent from the site, the Graph AQL API to work with that particular access key.

Then you'll access the endpoint using the key. So all fecals, single key, access the interactive graphical page as you saw. If you're using the CMS, that's inside the CMS. So, therefore, you go to it.

It says graphic URL, and then you can effectively preview and try your queries, for example, validate them test and make sure they are syntactically correct before you then move on. And then, of course, work with the schema. So as I said, we have some examples that you can go to on our developer site, and it enables you the ability to have a try, have a play with it, see how you get on in terms of using that. And as I said, these links, these resources will be shared with you so you can actually use all of these to build out all of those exciting experiences.

Now the tutorials, I haven't put the links on here because they were very, very long. So we will share the links with you, but it's to say that we have some good examples to get started.

Website in terms of creating a React site using data from graph. You've got a single page app in terms of how you can then implement on page editing integration or an SPA client much the same as what Kenar was just doing. Then you can do the search, and you'll see as we've said already, there's a session coming up with my good colleagues Shannon and Rob talking about building a search page and search results using graph. Fine. But if you want the tutorial, it's also our developer's site. And then finally, a hybrid where effectively you can create a standard alloy MVC, but then also use graph for the search page.

Now for technical resources, the sample site, we've got one there as well. I've got a different sample site to talk through as well, which is the CG blog dot vercell dot app, There are some examples to go to the repo as well in terms of whether available. Obviously, Kenal said about some of those links being published after Octicon, but there's already some good stuff that's already there. That you can get access to and further reading, of course, on the Project GraphQL.

Okay. Now I said there was a prize. Now in terms of what we've got today, if you have your phones at the ready, what we will do is effectively have a Kahoot.

Now for those of you that love Kahoots, It's five questions. There is an optimizely branded goodie bag.

Where effectively it's got lots of opti good stuff. Now scan the QR code. Hopefully, it's big enough. Choose an exciting name that you would like to be called by. So I know exactly who you are. There is only one prize. As I said, it's whoever is the fastest and the most correct will be the winner.

Let's get that music. I love the poo music.

There we go for the suspense.

Okay. Look at that.

That's a lot of people.

We're all good. No. No. Still more. Join him.

Still going. You've got some fantastic names here, by the way. Are we all good? Everyone who wants to join has joined?

Okay. Oh, one more. No. There we are. No.

We're gonna be starting five four three, two, one. Let's go.

Okay. So it's based on everything that you saw in this session today, just to be very clear. There's nothing you need to know if you are paying attention. You'll get the questions right. So true or false. Optimizely graph is a SaaS service. Yes or no?

No one should get this one wrong. Surely, I hope.

Oh, oh, dear. Okay.

I'll take that back. Fifty seven. Yes. Absolutely. So, yes, indeed. It's true. It is a SaaS service.

Here we go.

Oh, Will Smith's in the leader. We've got a star in the room.

Wonderful. Okay. So Tommy m, B Van, Cheah, and C Sharp. Of course, someone's old school.

There was c sharp. Loving that. Okay. Question number two, why did we launch semantic search for optimized graph?

We wanted to use AI models to provide intelligent responses to queries who wants to solve the vocabulary mismatch problem. We wanted to match the content of the search of the content of a reply. Or all of these.

A lot of text on a page to read very quickly, but all good.

It is all of those.

Absolutely. Now all we all have to put a new leader Another mega star in the room, share is in the lead. Shares come down from Vegas to see us for this session. Fantastic.

So in the lead, eighteen hundred and sixty six. Okay. Very good. Next question. The three.

Multi Select. So more than one answer, What are the major benefit of optimize the graph?

Connects to CRM systems. Easily reusing content from your website to build native applications, creating dynamic content blocks for none of these.

It is a trick question.

Don't forget. It's what based on what we said in the session.

Absolutely. It's not number one answer is not in the session. That's why I said it. So You okay.

Coo is in the lead with two six four five. It's a very close game at the top. RUI close behind. And we've got some Kenny G, also another megastar in them.

It's literally full of musical stars. Okay. Question four, true or false. Ultimizes supports React View, Next chess, and Angular as frameworks for headless CMS.

Sure, false.

Course true.

Oh, we got a clear leader.

And question five, the last one, multi select Early in this session, we asked you what types of headless CMS design models would optimize the support which ones? Headless. Head on.

Hybrid or headless and hybrid only. Now it's a multi select. So there's more than one answer.

People are thinking.

Audit. Okay.

It was all of that. If you remember, it was on my fantastic slide. If you remember, it said all three. So drum roll on the winner.

Bless you.

Third Place, four eight three five is RUI.

Number two. Kenny g.

A number one.

It's Matt d. Not a Matt d.

There we go. You got a goodie bag, my friends.

Very good.

It's a super branded goodie bag there for you. I guess they use her. No problem. Enjoy.

Okay.

So in terms of this particular session. Thank you very much in terms of paying attention for all of that good stuff into the Kahoot and everything else. Kenola and I have now got a few minutes now for a five minute q and a based on anything that you've heard in this session. So please don't be shy, q and a, and we'll start with your good self.

Sure. Okay. The question for the recording is what are the personalization options available for graph? Do you want to take that?

You can go ahead.

Sure. So at the moment, we actually the personalization options that we have, there are some things that are coming online at the moment based on the fact you're looking recommendations. For example, other things, they're not available at this time in the graph service. That's coming. Something we're working on at the moment. Terms of other ways in which you can personalize, there are other things you can do with other parts of the optimizely platform, of course, but not in the graph service itself at this moment.

Any anyone else? Go ahead, please.

So the question is, is it additional or separate license from the DXP on its own, etcetera? So the answer is it's a separate SaaS service it's effectively provided to any DXP customer who has access to the past portal. So effectively you can just provision it based on having an existing license. So therefore, it's just click create, etcetera. So there's no additional things required. You just need to go and create it or activate it.

Any other questions, please? Oh, so oh, sorry. Oh, you mentioned, do you have a semantic search? There's probably a question for later, but, does graph also allow predictive search that's basically something that the future session. I don't wanna spoil their thunder in terms of the next session. Go to the next session, and they will show you all about it.

Thank you. Okay. Who's in the other microphone? Sorry. I'm running. It's fine. They're having you walk all everywhere.

With the oldest person in the room, Just on that, personalization question, does that include visitor groups, or is that a part of the GraphQL response.

So that's and visitors isn't available again at this moment. Okay. That's a that that's the same Yep. So somebody else back then?

Oh, I need some running up music. What are you doing?

Derek?

In terms of environmental testing or, you know, pointing to different environments, like, what would be an approach for that? And then kind of a follow-up. If you have it in there, can you then pull it out so it doesn't, you know, affect production.

Yeah. So, that is correct. You can actually do that as well. Activation and deactivation. And from, the environment perspective, when you have the DXP system, you get three ins like, in DXP, we have three environments by default.

You have the integration pre production and production. You'll get three different, API keys sort of or graphs. So you'll have three different instances. So that way, you can test it on a different environment and not worry about messing up the production.

Is the preview functionality meant to replace the preview functionality within, DXP. So should content authors use that preview functionality?

No. So I only demonstrated with an example on how you can use the functionality with the Versel Premium branches. But the session from yesterday, they'll be recording available as well at some point, was about on page editing within the CMS itself. So the the session essay showed how you can use existing CMS and use on page editing in the CMS but the app being deployed to ourselves.

So that also works. So we have both the ways. You don't need to replace it with this, but this is one of the ways you can approach the problem. And just to say on that that note, If you want to watch back this session or any of the other sessions, there'll be a link you can go to for Opticon online, and you can then effectively sign up to watch the playback of anything that you couldn't attend, for example.

Over this two days. Any other questions?

So it's kind of two questions.

One, security trimming on the graph. How does that work?

So you want a sufficient security?

You know, permissions or access control? Yeah. So, like, as a user, I have access to This pay this this piece of content, but I don't have access to this piece of contact content. Yeah. What prevents me of getting this piece piece of content versus and, you know, because based on the roles I have in CMS. So when you index the data right now, it automatically adds in access control list. So whatever groups and permissions you have defined in the CMS, will apply.

It's not on the documentation yet. That's why I couldn't show it. But the permissions are actually being indexed and added in the background itself. When we release the documentation in a couple of weeks now, then you'll be able to add additional, authentication on top, which is open ID connect, allows you to then give in specific users access to specific, data based on how it's configured in the CMS.

Okay. And then that gets passed in the graph call then? Yes. Okay.

Second call, second question is about the the webhook situation, but how that how that works as far as, I mean, is exposed, is there just is there more events, separate, more events besides new content, or yeah. So it has multiple events that it it actually registers. Publish unpublish is one of them, of course, when you move the content as well, or when you create the draft version. So what we actually looked at with the graph queries, we saw only published content.

You can use a different mode of authentication call as HMac, and that allows you to then fetch draft content to be able to leverage that and do a preview. Because if we make the preview publicly available, then everyone will see the draft content. We don't want that. Right.

Right. So you have two different modes of authentication.

That way you can control, what data you see. Even old versions of the content as well, like you see in the CMS, you can see the entire version history of that piece of content. That's also available in graph. And you can query that as well with DHmark authentication. Alright. So we have time for one more question. If anyone's got one more question.

I don't wanna spoil their session coming up soon.

So you mentioned you could use on page editing and the Versa, like, preview mode concurrently. Right?

Let's say, like, writer one, like, edits in Versel, and then writer two, once to, like, let's just, like, happens to be on the same page. Would they see the same, saved edit from writer one that writer two is seeing? Yeah. They would.

But the thing is when you edit the content, because CMS is gonna be your back end where you actually create and match the content, the item will be locked itself. So only one person will be able to edit the default behavior of the CMS. So in that case, it'll be safe, from that sense. So you'll see a locked icon and you go in the CMS and try to modify But if they have that page open as read only, they'll still be able to see the same synchronize content that the editor saw on the Versel, preview branch versus what you get in the CMS.

So that will be in sync because regardless of where you edit the content, everything goes back into optimizing graph. That's a single source of truth. You'll be able to see, regardless of where you Okay. So both of them will, like, let's say they saved it on edit mode, and then the other one is using the other on page editing, it would see the save Okay.

Cool. Thank you.

Great. Thank you very much for your for attending today. As I said, the recording will be available. Thank you.