Optimize for non-Webflow sites

Hi there, in this video, we'll talk you through how to optimize on your non-Webflow website. First things first, let's talk about the navigation. There are a lot of options here that help you talk about, or look at reporting, uh, an option to set up a landing page that's separate from occupations, think of components as a library, and then you have another access point to see what activity's been happening in your site, and account settings, where you'll find things like integrations, It's going and general goals that you might set at the account level. Naturally, helping support take you to articles and help documentation to help you learn more. Today, we're going to focus on optimizations because that is where you'll see a list of activities that you've already created, in terms of, optimization that you're running, art and draft state, et cetera. Also, on that section is where we'll see the entry point to running a new optimization, and this is where we get the option to build an optimization- through the visual editor, which is our no code solution, the code editor where you can use JavaScript and CSS to build, or choosing a playbook, which is a state of ideation, or giving you some suggestions of what to consider running on your site. We even help you build out some of the variations as well, depending on what you select.

The next thing I want to cover quickly before we get into the actual tool, it's just a vocabulary check. Often, I'm going to use the words optima- I love this. I this. And optimisation and variation. And these two are actually nested within each other. When we talk about the changes that you're making on the page, so what are you actually testing? Uh, we're gonna reference that as an optimisation. An example might be that you're changing CTA language. So if I'm running an optimisation in my hero section of my website and I want to change CTA, uh, that's my optimisation. Now, the options that you set up to then run with- and that are called the variation. And so you have full control over both what you choose to manipulate on the site, and then what you actually input as the options.

So in this example, I might say, let's pretend that my, uh, call to action says something like, uh, learn more. I want to see if running the language get a demo, talk to sales, or sign up today, is actually better alternatives. So in that sense- I'm creating three new variations as part of the one optimization alongside with the learn more, or my baseline, variation.

and that's one of the things that's, I think, difficult at, at first, or folks to really grasp is you really want to isolate your optimizations, or one change per optimization. So let's talk about the hero just for a hot second. If we have your hero section, which simply has- The headline, an image, a CTA, maybe even some sub-copy. You're probably interested in changing a lot of those pieces. I encourage you to make those separate optimizations. So change your headline in one experience, change your CTA in another. This just gives you more flexibility to see what's working independently. it also allows more possible versions to be shown to visitors. The more options you have in separate options separate up and, optimizations, the more combinations that can be served together.

Okay, next is just a quick detail about how to look at your website. Right? Naturally, everyone's site is made up of a bunch of pages. In this case, I'm only displaying two. Think of each page as a new area of opportunity for where you can run optimizations. On a singular page, you might consider, as my example, a headline test and a CTA test. Yes. Run those at the same time, gives you more options of what to show the visitor, gives you higher learnings. Now, within each of those optimizations, which I shouldn't use the word test, because realistically, you could get to choose whether it's a test, an AI optimize or a personalized. So within these optimizations, you then define those variations, uh, of which our system will always pull forward, the current version of that part of the site for you. Do it. As labeled as the no change or the base variant. So in my CTA example, the learn more copy is the baseline. And so that will actually be present as part of the optimization to have as a control. So you'll have a, a stray comparison. What does the new copy look like in comparison to when the existing copy on the site runs? Um, in this example, we've created for optimization. It runs across two different pages. This is an awesome place to start.

and again, what you'll notice in the tool when we go build is once you start building one variation. So that's that new part that you're adding to the site. The system will automatically create for you something labeled as no change or base variant. This is simply whatever the, the website looks like today and current day, before you made any alterations. So if I'm manipulating the CTA, what is- this is CTA have today, that's going to be your no change. That is always, active to today's stance. So if you go and change that CTA separate from the optimization, then no change will- will also be updated.

Alright, now let's talk through the quick steps and then we'll do this, live. So first things first is how do we want to access the editor or the build process itself? So. This is where you, again, you have those options to use the visual editor, code editor. You can also set up a redirect in case you want to shift traffic from one page to another. It's simply inserting a URL. You can also run playbooks, which, again, are- are ideation opportunity for you to consider different types of optimizations. Uh, just know that if you do choose playbooks, they are automatically selected as AI optimized. So you're opting into using- our bread and butter style of optimization that allows for our system to help figure out what works best for the visitor.

Now, if you don't choose a playbook for the rest of the styles, the next step is actually choosing how do you want to optimize. And this is where you get the choice between running an AI optimized, a test, and a personalized. I'll explain these separately. but for right now, just know that the option exists there and you need to choose it up front. because these- these. Different style optimizations do affect some of the settings that you have at your disposal. You can't change it later. So it's- I'm really helpful to, ground your optimization at large. What do you want to change in the site and why? Connected to how do you want to optimize it? What do you really intentionally trying to get out of this optimization? in a really short example, if you're trying to figure out what works best for different kinds of visitors, it optimize- might be the way to go. Uh, if you're looking for a very clean split test where you can see a clear one winner, test may be the- the opportunity for you there. And then personalize is best used when you already have some learnings and you want to take action on certain audience, uh, activities and make sure that certain audiences see certain experiences.

Okay, cool. You choose how to- Like it says, choose your optimization style. Next is defining the page target. So this is where you actually input a URL string to say, here's where we want to run that optimization. Pretty simple, you'll see this in the tool. You'll be able to actually create new page targets or select from a drop-down. So if you've built on the home page already, you can just select the home page from the drop-down. You don't need to create those tokens over and over again. Next is- is our build process. So this is where we will actually build those options within the ver- the optimizations. also set goals and audience limitations if you'd like. So if you want to restrict the optimization to a certain group of individuals, primarily by attributes like geolocation, device type, something from the URL string, even actions, behaviors that they've already- taken on your site, you can do that within the specific optimization. And then lastly, it's just a state of launching.

Alright, so let's build these steps together, live in the tool. So when you're in your dashboard reminder, we're gonna stay on our optimizations tab. This is where you see a list of what's been created in the past, whether it's dr- drafted or live. This top right hand section is where we see our en- . . street point for building something from scratch. So, as we go through this, forgive me, I'm in a test account. Some of the screens may not look the exactly the same as yours, primarily when it comes to data. but otherwise, the steps are exactly the same.

first things first, this is our entry point. What do we want to build with? So we have a visual editor, code editor, a redirect, or a playbook. Uh, we'll go through this twice through- I like to start from scratch, the first time around. So we're going to use the visual editor, just so it's the most open-ended flow. Next, we choose our style of optimization. Um, and this is where I really appreciate that we have a summary on the right-hand side to help you remember what each optimization type is really best for. so you'll know that there's a call out here, um, in the flag. additionally, you can see the summarized list of- maybe why you might choose a personalization, a test, or an AI-optimize. Again, this selection does impact some of the settings as you progress on, so it's helpful to know how do you want to optimize it before you build. Let's select AI-optimize for today's purposes, and continue on.

Here, we select the page that we want to optimize on. Um, and in this drop-down, you'll see that you can actually add a page. each. So. So if I were to do that, it's gonna give me a prompt to insert a name, a URL string, and then you can actually manipulate whether you wanna run on more than one page or not. This is going to be helpful if you wanted to do, like, a group style of experimentation. So, as a quick example, let's say that you have three or four product pages that are formatted exactly the same, obtain the same structure. and in a structure, just different content for different products, and you wanted to test, um, maybe a placement of, an image, or maybe the styling of a particular text box. If you input more than one URL here, you will be able to run the optimization across all of those specific product pages at the same time, essentially giving you more, a larger audience to test across. So keep that in mind, but, But initially, I recommend running an optimization on just one page for the sake of simplicity. Um, so you can build it new here, you can also go back and actually select it from a page you've already created. So, since I'm in my test account, I'm gonna just search for a page that I know I've tested on before, and continue.

Now we're in our virtual auditor. and so this is where we can actually mouse around and see what manipulations- we want to make. You'll notice on the right-hand side that it's asking us for an action, so this is gonna guide you on how to actually build. Okay, now that we're in the visual editor, a couple things. On the right-hand side is where we're going to see essentially the style change panel, but for now it's gonna give us some action, so it's asking us to click in an element. up top is where you see- the page that we're already optimizing on, the desktop view, and interactive. These toggles do not change targeting at all. It's simply for your visualizations. So if I change to mobile, for instance, if I make changes here, it actually will still apply to any size of the website. it does not only change from mobile, you'd have to set that as a targeting option. Interactive is great as if you have pop-ups that happen on your- site, and you want to- I did those to make it easier for you to, create the optimization. You'll want to toggle on interactive mode, and this allows us to actually navigate the site. So if I were to click this, it would actually take me within this browser window to the URL link that's connected to that CTA. So just keep that in mind helpful primarily for getting rid of pop-ups. And then our left hand panel is where we will see the variation that we create over time. Bye. It's also where we can set goals and, configurations like audience details.

Okay, so let's take this action. Let's click on an element. and perhaps I want to, um, since I keep talking about CTA's, we'll- we'll do that as an experience. So notice that as I mouse around, these bounding boxes appear. That's helping you visually identify what is a section or element of your website that you're actually making. You'll see that we'll call out the actual, code that's connected to that as well as a label or an element, identifier. So let's select the CTA. And now that we have that selected, a couple of things. The silo panel naturally opens. This is where we have all the options to manipulate that. most important thing is understanding that this element selector is how our system is referencing that particular- . So if you are reusing element selectors across your site, by this exact name, we will change anything that has this name on this page. So just keep that in mind. Um, if you are using reusable names, you want to update that and perhaps customize them to where they're located on the site, so that you don't have any issues about. But the element selector is what's the most important. It's how our system is identifying what to change on the page.

If you find that when you're mousing around the visual editor, it selected something that's too specific. This is where the bread crumb option up here comes into play. So we are currently selected on the primary button. If I hover on the div class, it will actually give me options to manipulate the entire, text part of the hero. If I go- You can further it will encompass the image. Go ahead and click on that just for a moment so you can see what happens. Now it's giving me a much wider range to make alterations. It's also recognizing that this div class is technically an HTML area. And now if I wanted to make manipulations to even just a CTA, I can do so here as part of the HTML block. The caution with this is that you don't want to always go broader. You don't have better, because once I make an alteration here, I won't be able to make alterations at a smaller level. So if I also wanted to run an experience changing just the headline, it's going to give me some errors because I've made an alteration to this entire div class, even if it was only focused here. So it's really important to select what you want to actually manipulate. let's try it again here. Perfect. And keep it at that.

I just want to express the option that sometimes selecting individual editor gives you two specific of an element, and so the bread crumb is here, to help you kind of get as much as you'd like to manipulate in the view. From here, we can make changes really quickly. Um, so if I wanted to just change the copy, it's very simple, um, and quick to- . you in the visual editor immediately as, like, your first line of QA. you can change all kinds of other things, including where it links to, um, the styling, all kinds of things in this- in this list. I highly recommend you, at first, when you're first using the tool, familiarize yourself what's- what is in this list, primarily because a lot of these things are natural style changes, but we also have options, like, rearrange which- to. It allows you to reposition elements on the page. we also have AI copy suggestions, which, in this case, I'll demo because we have a text element selected. This will actually evaluate the text on the page and kind of give you all other options to try. So, if I wanted to, say, act now instead, I could hover. It will show it to me in the view. By clicking it, I've now decided to select that as my new- new text. So, AI copy suggestions is great for text elements. It can be used on a CTA, a paragraph, a headline, et cetera.

additionally, we have more features like dynamic content. So, if you wanted to insert tokenized values based on who the visitor is, perhaps if you are a B2B company, and you wanted to start inserting your customers' names in some of these callouts, it- through a tool like Sixth Sense or Demand Base, then if you don't have those, using something that we offer to you called Enhanced Match, offers you that way of doing our reverse IP lookup to insert tokenized values. Uh, I'll come back to that. I just want to call it out as something that's a bit more advanced individual editor. Essentially to say that not everything in this panel is just dialing, you can actually make real manipulation. I believe. The last call out in that same way is inserting a new element. Excuse me. So we have the way to, just like you can rearrange and move the CTA around, you can actually insert something brand new to the page to make it different.

Okay. So let's pretend that we're happy with this very simple change of the CTA copy. I'm going to go down here and click Save and then quickly look on the left hand panel. Once it does- it does say we get two variations created for us. The untitled is the one we just built. And so I'm going to rename that to say the same text. Highly recommend you make these names as obvious as possible. So that when you're looking at reporting later, it is in fact clear as to what you are manipulating. Um, in the visual editor, you obviously have the visual. When we look at reporting later, uhh, you really only have the names of the variations. So make this as obvious as possible. But as I said earlier, when you create your first variation, we will also create the base variant for you. That is what is the website look like before I made alterations. And so I can actually toggle back and forth here, right? This is what my base site looks like. This is what everyone would see if they weren't. there was no experience running. This is what some users will see as possible. Part of the optimization, and then this is one of the options that I just created. Pretty cool.

From here, we could add new variations, which brings us back into the same panel. We're already selected the same element, and then you can make further alterations. We could also clone the existing variation that I created. Now this might be more helpful in cases where you've changed more than just the text. Next. So. If I had altered the color, the style, the rounding of the button, too many things that require me to do that again, and really just create a lot of time gap. Uhm, if we create a clone, then all those pre-settings come along for the ride, and then I can just manipulate the things that I want to be actually different. So cloning helps you move a little faster. just know that you can do that at the variation level.

Now, uh. . with this view, there's a few more things to make sure you label. One is the actual optimization name. and so in this case, I would label this as a script above, as you can, of what we're actually changing. So I like to do, like a location on the page, and then what I'm changing, say copy instead. And then sometimes it might be helpful to, I don't know, like. like. Put the, the page that you're on. you'll always see the page name, excuse me, in your, reporting. Uh, but some companies come up with a name and creature that includes the page name in some ways as well. I would just say the key point is to come up with some, standard that you use across the teams that you're reporting is, is clear and, and easy to find. For today's purposes, because I demo in here a lot, I'm just going to add. Um, some numbers so I can remember that I'm looking at the right test. Okay, save.

So the symbols that we have an experience, we're technically good to go. We don't need to manipulate anything further, but I do want to show you how to manipulate the goals and audiences as well, so that if you want to set specific metrics, or reduce who can see this experience, we can do that. So let's do that together. There. We're going to the goals panel, and this is really important to note that what we're doing on this page is specific to simply this singular optimization. So you have the opportunity for different optimizations to set up different metrics that you care about.

Now what you might notice is my left hand panel already has some goals, and this is coming from two places. The first one up here, auto goal, represents any click activity on the page. So notice- Lotus. Lotus. That we're providing this for you. And what you're seeing is a very, very, very broad, element selector definition so that we can encapsulate anything that is clickable on the site. If you are looking for a general click engagement metric, you already have it. Auto goal is that for you. Notice that you can see this apply to adopt button on the right hand side is actually already selected in that green box. that's because it is, in fact, clickable. Let's see if I can find something else that's appropriate. You have the down below, but the images is working as well. So those two things are already going to be captured if I am looking to have a general click engagement. Now in most cases, that's not going to be specific enough. Folks are likely going to be more interested in a very specific selector.

So this is where we can add a new goal. Before we do that, explaining the other things that- that are here, umm, we allow you to set what we call account-wide goals for the cases where if you're making, umm, typically your optimizations are connected to some strategy about what you're trying to improve on the website. And so if you have a B2B site, you might be more interested in some form submissions on the site. If you're e-commerce, it might be the add to cart and the purchase elements. because- Because, Those are things that you likely want to optimize for, or at least measure across everything that you build. We allow you to set that at the account level so that you don't have to add it every single time. So these goals come from the account-wide settings, and I'll show that, today as well. but for now, know that you have the option to set specific goals, and that's what we're gonna do.

Alright, so adding a new goal- goal. Allows us to select what type of goal that we want to add. And this is where you can, go off of a click on an element, a page view, or something custom. Custom in this way actually implies using events that you've already created. as well as events from integrations, or API events. And so, let's do a click-based goal the first time. Um, and so I will do just that header CTA since that's actually- where we, made an alteration. And I'm gonna mouse around and select that element just like I did in the- when I was building my optimizations. And we're populating that. I'm gonna give the option to actually assign a name here. notice that if you're paying attention, you may have caught that I have named twice. The reality is what I first named was the element. Thank you very for your comments. And now I'm naming the goal. Um, that's important to grasp because technically, just like optimizations and variations are nested within each other, goals and events are nested within each other. So here, I'm associating one event, which is the click on this element as a goal. Technically, I could add more elements to that if I wanted to create a grouping. That might be beneficial if you have more than one action in the same part of a page. We'll see and you don't care about what action has occurred, but really just that something's happened there. You can build yourself out a grouping where I will ask you for a second selector and you can proceed from there. My only caution here is that when you build groups like this, you won't have the granularity to understand which of these actions was actually completed. we will report as a group.

Alright, so let's save that for now. Now you'll see that we have our auto goal, which is a general click engagement, the CTA header specifically, and then all those things that I have connected to, um, my account line goals, which in this case happened to be form submissions. Let's also build a goal that is, maybe custom just to show you what that looks like. So I'm gonna select, um, I'm just gonna like this test for me now. And hit custom. And what this allows me to do is actually pull forward events that have already solidified. Um, and so if you are regularly optimizing the same pages, for instance, just like the CTA header, I'm probably gonna want to measure that in more than one optimization. And so it's helpful to label it easily for yourself so that you can find it later in this drop down instead of recreating it. If you create that CTA header every single time. All right. I'm just like, I just showed you, you actually will create a little bit of blow. So it's better to come into this menu and select the drop down. And here is where you will see all click events that I've already created in my test account. The benefit here is that we will actually name these automatically for you using the, the page name. So in this case, the page name has my name. I can actually see that yes, there is in fact it. Here, a CTA, um, element already created. and so if I had selected that originally, it would have been a duplicate of what I did here, but safer because I'm not recreating something that's already been measured.

Additionally, you'll see that there are, let me get out of this for a moment. Um, there are other options. So if I scroll way below the, the, click based events, we have some, page view activities to say, did a user make it to a subsequent page specifically? I can also pull in events from a housebound integration and things that I've set up through an API. So custom in this world just means basically every event that you have at your disposal, things that are coming from API events from integrations, page view goals that you've set up in the past, click based events that you've set. That's it. Set up in the past. And just like we could have created a grouping when we were building that specific, uh, click based goal, we could do the same thing here. So I could say, okay, yes, I would like to add that goal. I'd also like to add this goal, uh, and so on and so forth. The more I add, the more opportunity there is naturally for the reporting. But again, remember, you will not get- Yeah. So you're going to see generally does something happen across these three events. And there are some other settings here if you want to manipulate how it's counted, most commonly you will leave those, as is.

Alright. The last thing I want to call out with goals is the primary goal tag. So you'll notice that in the menu for you. what this is is helping you, Welcome to a line what goal matters most to you for this particular optimization. Now within AI, after my, because that's what I selected for this experience. it is extremely important that you set a primary goal that matters to you because our system is going to pay attention to this particular goal as the deciding factor for what it shows each visitor. So AI optimize versus evaluating for- performance, it's saying, okay, wow, this particular variation is getting more traction. We should serve that most more often. And specifically, there's more details in that of like, what the type of user said it's working for. But generally speaking, it's going to shift traffic to whatever variation has the best performance. But that best performance is evaluated- evaluated simply by the primary goal. So in this case, I have five total- goal goals that will be measured, but the system's only going to make decisions based on this goal. Everything else is only for my reporting. So in this case, I would be optimizing for a form submission. Total conversions represents anything else I've selected as kind of a grouping there. But let's pretend that I want to have this ETA as my primary goal. Simply select that, check the box, and save, and- now the primary goal tag will update, and now our system is going to optimize for the CTA clicks specifically.

Alright, let's move on to audiences. So in the configuration tab, you will see the page name that you are optimizing on, in this option for editing and audience. And so by default, it will always be set to everyone. Generally speaking, I highly recommend- having the broadest audience possible for the sake of having more data. but if you need to restrict the optimization to certain group of individuals, you can do so here. that's where you will toggle to the specific group and then choose to include or exclude users. if we include, you can select anything that's been created in the past. Again, we don't want you to recreate these type of things over and over again. So you can see what you- you've built already. Exclude has that same exact list. So what's important to note here is that if we add a new audience, you're really just creating the criteria. You can then use that criteria as an include or an exclude as you proceed.

So, um, let's build new just so you can see the options. Um, all of these things are coming through from our ability to never want to parse the URL string. and- detecting the browser, things like device type, um, and, like where they're located. and so these type of attributes are populated for you. what you're seeing in my view that is customized to my test instance is the sixth sentence integration. I have connected a sixth sentence, integration and therefore I see that option here. Some of you may not have that option. Um, but again- again. Notice that we do offer you enhanced match, which is a similar reverse IP lookup functionality. So we give that to you, but if you have your own sixth sentence or demand base, it's highly recommended to connect that so that you can use any of the custom segments that you may have set up in those tools. So what's great here is that you have some basic stuff like device type location and then more advanced things like company details that is that reverse IP lookup. Or even click behavior. So if you're looking to sort of nest optimizations together, say you've been running a test for a really long time, and it has great activity and you want that to be the trigger for if someone sees another optimization, you can set that through the behavior rules.

Each of these criteria, uh, allows you to get really specific. So you have the option to set a specific value, let's say device type. and the and then is is not exist. And then here is where it will populate for you all the possible values. Now device type is pretty standard. There's no flexing of what that is. But if I go back and show you umm, traffic source or perhaps a UTM parameter, um, this is where it will only populate what is umm, a real option based on your site activity. Okay, everybody. So for me, because I'm going to test account, it's not populating anything. But for all of you, you would actually see real UTM's that are connected to the source category in your uhh, traffic. Now, no matter what you select, you can add rules or create an OR set to build a more complex rule. but the one part that I will always call out is this estimated visitor count up top. This will- help ensure that you can evaluate the size of the audience to insinuate whether you are over restricting or under restricting your audience. So keep that number in mind. The system is going to look back with 30 days of data of your site activity. So if you are a brand new customer and you've only been live for 10 days, just know that the numbers may be a little off. otherwise it's a rolling 30 days look back to help you evaluate the size of the audience. . Umm, sometimes customers jump right into building really complex rules, and then this estimated account says, oh, that's 100 customers. Just know that that's going to delay when you'll get real learnings in your optimizations. It's perfectly fine to proceed. It's just a cautionary tale of you're going to have to wait a little longer for results.

Alright, and then advanced is, um, if you just, you are more or less coding, you'll likely want to come in here to set what we call preconditions, but for those of you using the visual editor, you're free and clear to ignore this section. So let's click done, and this takes us back to our draft state. Now, this looks pretty boring right now because nothing's live, but what we're showing is the draft, variation that I created, so that's that ACK now, CTA. On the right hand panel, we get that, summary of what goals exist and the pages. I love that you can add some notes, so if you and a bunch of teammates are working in here together, uh, you can add some notes, perhaps, about what you're actually testing, if you wanted to expand on that, maybe what the hypothesis was. Great area to document stuff like that.

The last step is, of course, launching the variations. You can actually launch individually, or launch, all. I recommend doing the launch all if you've only drafted things that you want to run at the same time. if you are working through building, perhaps different phases of the optimization, where maybe I had five drafts, and I only want to launch three to start. That's where you would launch the individual ones to start. Uh, notice when I have it here, you get the option to preview or, edit the, very creation. so if I wanted to launch, I would just do that right here. I'm going to click the preview for the sake of showing you what that looks like. This actually takes us outside of the dashboard. So now we're going to actually look at my website and verify what that CTA looks like.

This is essentially the only part of our tool that does in fact use a cookie. So this pop-up module is based on a cookie. Um. We'll in the next one. which is why you have a time clock here. So if you wanted to exit the preview opportunity, you would actually select exit. Otherwise, we are in a testing format for about nine minutes and-and counting. what's great here is that you can see this check box is telling me that we are successfully running the optimization. And so, act now is in view. I can actually see that here. I could technically- Technically. Click on that. It will then take me along the website just like I would in a real setting. Scrolling back up, see that in view.

A couple of things that I want to call out with the preview module. First of all, we're gonna edit previews. And this gives us the option to toggle to the other variations in the optimization. So if I select base variant, save and reload, it's gonna show me what does the base site look like, right? This could be served to visitors. Is it her? Because that's part of the experience as that control. Um, and so I just want to make sure that still looks great. We're good to go there, still getting the green checkmark. Let's go back to our variation, save and reload. Now from here, you can also test the goals. So if we go to edit one more time, settings, we're gonna enable browser test events, for the sake of verifying the goal. So now it's gonna show me what's possible for this page, and again, forgive me, I'm gonna test the count, so I have a lot of activity going, but let's clear that. And what we'll do is, I'm gonna click on this one more time. And what you'll notice is we now have an opportunity that actually fired. and so remember I had added a bunch of numbers to recognize what we were testing. So this is the campaign or the- experience, rather, that is, um, currently active. And when I click that CTA header, I fired this particular goal. So this gives me a real-time way to evaluate the goals. In fact, are working. Um, what you're seeing here are essentially because I have other optimizations live on this page. that's showing me what possibly could have been triggered because that goal, meaning this click, is associated with the goal. With more than one optimization. But for this case, I'm just trying to, QA the singular optimization, so I just want to look for that name and the parentheses, see the event, and now, essentially, we're good to go to launch.

The last thing I'll call out here is that in the edit preview section under settings, um, there are two other toggles here. By default, we will ignore audience settings. Um, and I didn't- really add an audience here, so maybe we can do that a second time through. but what we do here is that if we wanted to toggle these off, the system would only run the optimization if I passed as a user, the audience criteria. So because I have no audience limitation set, it's still gonna pass. but if you had set, for instance, mobile only, I'm on a desktop computer, this will actually fail. So you have a really great way to bear- very quickly validate the goals, the visuals, the functionality, as well as audience criteria before you launch. Very last thing about the preview is that you can share this with folks who don't have access to Webflow. So if you copy this link and paste it in a browser, it is gonna be quite long, but it will load the exact same preview experience without having to have that individual, be- We'll see you in the next part of your dashboard. This is great for if you have additional numbers of your team that are, uhm, you know, not connected to your day to day, but you want them to see what you're running, or be able to manipulate the previews and feel good about how the optimization is run.

Alright, so let's go back to our slide deck for one quick second. Just to summarize again the visual editor panel, and then we'll build a second- I'll see and time through. So, the panel is visual, right? We're looking at our website. The left-hand side is going to have what you build as you keep going. Again, the base variation is automatically created for you. That's just your control. It gives you the baseline of what happens if the existing version is shown to visitors. Um, next we have the element selector. That's the most important concept to grasp here. When you- So if you things in your view, it will populate a selector. That selector is essentially the identifier of how our system knows what to change. You can manipulate that always through the breadcrumb. You can also type over that. I didn't mention that before, but if you know the names of elements, I will be very impressed. you can actually paste these in here yourself. And then lastly, the, section up here for goals. and hold. And audiences, is in the menu up top. you don't always have to manipulate those, but you can, if you are interested to.

Alright, let's go back into our tool, and I will show you quickly the account settings. This is where the, account-wide goals do live. so if you are in that camp where you have, events that you are going to track or want to measure across all of your- optimizations, this is where you do that. essentially you will go through the flow of what we did where we created our events, and just let our support team know that you are interested to make those events your account-wide, and then they will be able to associate it here for you. So until you see anything listed in this section of your settings, you do not have account-wide goals yet. You'll still have to, reselect those goals every single time you go to an optimization. conversation. but once you have them created once, let our team know, and we'll help you associate them here. Another quick point that, um, I mentioned it super quick earlier, but the total conversions is simply giving you an aggregate of you of everything else that you've selected. So in this case, I have populated two different form events through an integration. the total conversions would represent if either of those had occurred. Awesome. in this list, since we're on the account settings, you will see, my account ID, as far as the dashboards concerned, the page views, which might be helpful to compare against your contract values. And then as we scroll down, you have integrations, the full snippet that you have placed on your site, et cetera. Notice that I have six cents a day. People, that's why it showed up in that audience panel. I also have HubSpot enabled, which is how I'm getting those form submissions.

Okay. let's go back to the optimizations, and we will build another one from scratch. So let's do new optimization. and actually, let's not build from scratch, which actually use a playbook this time, so you can see that alternative flow. So, let's do- I'll just do a headline, because that's simple. And I'm gonna select that same page that we did before. Again, this is a test account. I made this page up. I do actually foster what's saving the previous, so if you're interested in adopting dogs, uh, go check them out there on the east coast. Um, but for now, let's focus on what we're doing. We are building playbooks. So notice at the right hand panel. Thank very much. And all the visual editor is now coaching me a little bit more descriptively. Right. It's not just saying, click anything. It's saying, please click a headline. So if I select our headline up top, it will now populate some options for me. And these are going to be populated based on just, options across the web and then specifically a generated from my website. And so if I hover, it will give me, a quick visual again. To understand if it's working. Some of these may or may not fit for your business. Some of them you might like. Um, so if you want to try the template, it will open the editor to further manipulate. Likely the AI generated are going to be a bit closer to, what you're going for, given that it's able to read the content on your site. So I'm going to say, uh, change, try this template. And now we're back to the regular edit, edit flow. We're kind of the, the. I'm I'm sorry. Playbook helps you get started. Now we can keep manipulating as we desire. so in this case, I will, uh, keep this as is. I'm going to save left hand side, watch our base aeration come into play. And then our other variation is created for us. I'm going to leave the label this, uh, changing lives. Okay.

So from this point forward, all the steps that I already showed you are exact. The same. The one thing I didn't call out is, one of my favorite ways to quickly manipulate things is paying attention to the existing, inline CSS that you have in your site. So forgive me for a moment. I'm going to navigate away from what we're doing. I'm going to select our CTA. This is where you see a pop up. this is intentional because I have already saved a change on the headline. And if you remember our best practice, it's to try to isolate changes, one per experience. so the system's actually warning me here here. You sure you want them and they both the CTA? most cases, you're going to say no. in this case, I'm trying to show you something, about how I can grab a class. So I'm going to say yes, but in most cases, take this warning seriously, go back and separate and then build a separate optimization for what you're changing. But for now. Oh, I'm going to say expand just so I can get this class that is associated with the button. and copy that to my clipboard. And now I'm going to go back to the variation, and reselect the headline. And what I'm going to do here is actually paste that in and notice that it just inherited the class that I have in the site. So if you are familiar with the classes that you have, please use those so you're- or advantage to quickly make sure that content is following a very similar pattern that you have across the site. you'll notice that because I manipulated the CSS, there is that blue dot there. The blue dot will always show up to whatever you've changed in the style panel as a quick way to verify. but very, very easy, uh, quick way to make sure it's settled. I'm actually not going to save that until we're back. Bye bye.

The other thing I didn't show you yet is the change log. So when I click changes here, it actually shows me what I've manipulated. And so in this case, you can hover. It will give you some bounding box dots to show I've changed the header. And then the down here is where I actually selected to expand. I'm going to delete that because I don't really want to expand, right? I just want to have changes to the header. and so now we're kind of back. Bye. To that beginning state of what I did prior.

All right. This time, let's actually set an audience to mobile only. So I'm going to, exclude desktop. Let's just verify those rules. It's device type is desktop safe. So I'm excluding desktop. So when I have, this experience. Previewed, it will, it should fail for me, right? Because I'm on a desktop computer. All right. Let's click done. We go back to our reporting view. This is where we would launch. Um, and what I actually want to do here is let's go back and preview this optimization. But I'm going to show you how to look at both what we created the first time and this one. So let's preview and continue. We get our checkbox that the headline test is running and I can actually minimize this to show you that's still running. if I click edit, the other thing that you can do here is add an experience. And so I'm going to go find my other experience that we already built together. Um, again, you can search for names. So another reason why it's super important. Then I'm going to select the act now variation. And I'm going to try to run both of these together. And so now you can actually see what does it look like for a visitor. Uh, when they, when you have more than one optimization running on the page, and they actually get served one of those two options. It's really great as well. If you wanted to see, okay, what does the base variant look like in one with the other variation of the other? So it's, it's really a quick, quick way to see what are the possible options that are shown to visitors. Um. We'll see you in the next slide. let's verify the audience actually works. So I'm going to toggle these off, which allows me to just double check. Is it actually excluding desktop? Save and reload. And notice that I only added the exclusion for one of the experiences. And so it is giving me that warning. Hey, you have an audience mismatch. you don't fit the criteria. So we're not going to run the headline experience. And notice that we are back to the basic. or I should say the control version of the headline. The, CTA copy forever did not have any audience criteria so that actually can run. So super cool. Same thing with that preview, for our friends that are not in Webflow every day. you can create the grouping. It will load it for them. and they can always verify the same way you did what the settings are in play. and proceed from there.

Amazing. Okay, so that's kind of the wrap of optimizations. notice that again, all of these are in view. It gives you a very good summary of some of the high level details, specifically what type that you've done. I know I built two AI optimized experiences, but the flow is the same. The only difference is, I'll show you quickly in a personalization. whole need an need an if we edit, you will see in the configurations tab the option to actually reorder the, p- way of priority. So essentially our personalization works in a waterfall fashion. so if I actually wanted mobile only to be the priority rule, I would brag that to the top. otherwise you still have a baseline, the default will be your control. It's a catch-all for all visitors who do not fit. Do you know this is? Is or right? The audience criteria that you have in play. otherwise, uh, the build process is exactly the same. You actually select an audience first, but then you manipulate the page the same way you did before. and then similarly with our test optimization, it is going to allow you to set a, breakdown between the variation. So in this case, I have, Again, another headline experience. We would not run these at the same time. but you have our base variation and our, our, our created variation. If I go to configuration, you will see a traffic allocation area where I could say, hey, you know what? I don't want to run these 50-50. I would prefer to give more traffic to my test variant. So I am going to alter this. As long as it equals 100, you will be able to proceed. So now I'm shifting more traffic to the variation I created, essentially running a quicker test. Let me get more data on if this variation is working. If you wanted to reverse that and say, well, it's run 70% here and 30 here, you're essentially reducing the risk of the variation and serving more traffic to the base variant.

Otherwise, all the steps that I shared are, The same through building with the variation. You still have to select the, the type where, how you want to enter the page that you want to optimize on, the type of optimization that you want to proceed with. The element selector is forever important. and you have the flexibility to set up goals, reuse, components that you've already built, and proceed from there. Hopefully, this was really helpful to get you started. Um. you I highly recommend just building something for fun. You never have to launch these if you don't want to. Just get yourself familiar with how to use the visual editor, um, and become familiar with the different settings that you have at your disposal. Thanks so much! Thank you very