Right let's jump into it for the purpose of this live demonstration i'm going to assume the identity of chatwale i'm going to go through the process of personalizing the site creating some personalized images and sending those out in an outreach so when the recipient receives the personalized image in an email when they click that they're going to get through to a personalized Site and this um this site here chat letter so the first step is to sign up for hyper eyes and get that set up so i've already created an account here i haven't done anything you see when you first log into or when you first sign up to hyper eyes you'll be given this checklist of seven different um steps to complete now typically i would Start off by creating a personalized image the purpose of this demonstration i'm actually going to use an existing image we have on the site so then the first step we want to do is set up the personalization for the website so first i'm going to skip the image personalization now we'll come back to that and jump straight in to install the chrome extension So the chrome extension is what allows us to define the personalization on the site so we simply install this this will add to our browser once that's been installed you can see it's been placed here and then we can pin it so it's always available and simply when we click this we're now able to log in to our typewriter account and that's all done all ready to go So now let's jump back to our hyperis account the next thing is to add the snippet to your website so this is the thing that actually enables the personalization when somebody visits your site so we visit the hyper campaign let's just close the prompts for now and go straight down here to section two which is the website i'm just going to simply copy the code here which is our website personalization Code that looks javascript snippet and we can add that directly to our website um the easiest way is using the google tag manager that's a codeless way to do it so if you're already using google tag manager this is the best way in the way that i'm going to use it with chatwell otherwise you can just add it manually directly to your page within tag manager we can just go over to the tags And then just choose to select a new one we're going to choose uh click tag configuration and we just scroll down to custom html and we simply just paste in the code that we've copied from hyper eyes choose to save that oh we have to add a trigger to that and we just choose to define that to be triggered on all pages in this case so therefore We can apply personalization to all pages on the site now we can click save give this a name click save on that and now we can simply submit that and that will publish that uh live we can set uh give a description and then continue that so we know what it is that we did when we come back to that later on and that's it so now the site's live it's got the hyper eyes Um plug it in there uh snippet and so now we can go to the site and we can start to add the personalization so again we can see we've got the chrome extension here for the personalization toolbar when we load that on the site we can see straight away we've got zero personalizations so that's great so now we can start adding them so for example the first one here we're going to do is add some thermographic personalization so here we've got this Header gamify your customer engagement rather than your we can just simply double click onto the your here we see we've gone to edit mode and all the various tags um reveal so in this case i'm gonna change your business name simply clicking business name i will replace that and you can see there that's changed and now what we can do is also inline just Tidy up the copy so it's uh nice and tidy there and then again we're gonna apply that same philosophy to this second line here so you can see we've already got one change the gamify line and now we're gonna go to set one use your facebook again i'm gonna double click into there change your for business name and again go in there and just tidy up the text So now we've got two changes on the page both are referencing the business name now what i'm going to do is this image here this product image for chat where i'm going to change that so you see now when i click on the image rather than before when we clicked on text we had a list of tags now we we should have a list of images but as this is a brand new hybridized account i haven't created any images yet so what I'm going to do rather than select one because we don't have any i'm going to right click the image i've selected and choose personalize image and what that will do is load up the image here in the editor and now i can simply just choose to add the personalizations i want so in this case what i'm going to do is i'm going to replace the mock-up of this facebook messenger page with the logo of the business so i'm going to find the Logo element drag it into the canvas more or less resize that where i want it and just resize that there and obviously you can see here a facebook style is to use round so i'm going to choose logo settings and i'm going to choose round rather than square you can see that's not quite right just move that a little bit and now we've got the logo there Perfect and the second step what i'm going to do is drag in some text so what i want to do is i want to have the business name above here so i'm going to put that there change the text settings change that to black maybe not italic and that looks kind of okay so i'm going to change the text that will click into the text element to edit it and choose the personalization merge Tag again business name so now we've got you know just bring that in a bit more in line so i've got the business name and logo personalized and we can probably give this a name call it the image save that set it to public save it again so we've got it all ready so now it's public actually what we want to also do is change the background to Make it nice and transparent so we'll just drag that to a transparent background more than a white background so we've got that all set up now so we can jump back uh to our website and again select this image now and now we can see we've got the image created created there and now you see the logo is in place and we've got all of the personalizations and we've got the three Different elements defined so we can save that and that's our personalization on the website completed we can test this just to see make sure that's all applied so for example we can see it's personalizing to tim cook from apple now so simply just by using the utm parameter here you can see in this case apple we're now pulling through the Personalization so gamify apple customers use apple facebook page and you can see we've got the mock-up using the apple um facebook messenger page just uh illustrations i'll just change this to a different email just so we can see the changes apply here and here we can see in this case i'm using more facebook you see gamify facebook customers engagement You use facebook likes bit meters in it facebook facebook page but you get the idea and you can see there we've been putting through thermography so that's the kind of the first step so let's go back to our hyperis account and we can see we've now got this uh personalized image in there you see it's got two impressions for the test of it and it's public so now what we can do is We can go into here and we can add an integration so again for the purpose of this demonstration i'm going to use campaign as a as a test to illustrate this so i'm going to go to integrations i'm going to choose add the reason why it's reductive campaigns because it's the first the list we've got hundreds of integrations on our platform so whatever sort of uh Use case you're thinking of you know whether it's your crm or email or even linkedin outreach or various other elements you just choose your category and filter it once you've found the integration you want simply select that click yes to add and now we can see in this case we've got the active campaign uh integration added and it's also selected we see it's perhaps at the bottom so now we can simply Copy that link and then just head over to activecampaign so what we're going to do now is create a new campaign uh let's give it a name we'll just check standard campaign in this in this example and choose a list click next all right so what i'm going to do is just choose a very simple template here just to illustrate the point So now we're within the template editor we simply just drag across a block of code here click to add that and just simply paste in the code we have here what that will provide is is a simple personalized preview of the image we've just added so in this case we can see we've got the image in there and again obviously Just with the logo placeholders and that's great if you want to make that image clickable and we want to do in our experiment then what we're going to do is go back to hyper campaign and get the the link details so at the moment we've got the image and we've got the code and we've just copied that and what that does is that will give us the personalized image in the email but What we really want to do is make it clickable so what i'm going to do is just grab the url here chat well which is where we want to send people and we're going to launch into the hyper campaign so we'll save our image with the work we've done so far we've got the hyper campaign we've got our image selected we've got our integration selected so now we can just simply put in Our destination url and here rather than just having the image code which is what we've copied added already we have the additional options of either a link code simply just add that to the email to have a link that's clickable so let's just jump over and have a look at that so again we can either edit the existing code we have and just put a link underneath it so we can save that And then what we'll see is we have the link text obviously we can change the link text to be something more appealing than the default and in addition to that if we want to make the image clickable rather than just image code we have what we call the combined code and again copying that we can add that to our templates again let me just edit the code and so what i can do now is i can Replace the standard just image code with the full image and click code so what we can do is rename the link text to click me just to give it something slightly different you can see here now we've got an image which will be clickable as well as text save that so now we've got a confirmation of our campaign so we can do Let me just send a quick test um as well and now let's just send the campaign for our to see our results and see how that looks from a personalization perspective so that's our campaign created so we just uh let's just jump over to gmail see if we can find that this was the test um to the hyperis email you can see hyper eyes pulled through And again we'll see hyper eyes go by hyper eyes with high price pull through and then the final one was uh to my app institute email again you can see the personalized image in the email with app institute let me click that and again we'll see the site personalized gamified app into customers engagement and use app institute facebook and again you can see the personalized image there And again just for completeness let's try the link click me and again we'll end up back at the same place with all the personalization pulled through so that was literally just uh 10 minutes and we've gone through and we've created our image we've added personalized the website and we've sent out an email campaign with that personalized image and as we can see now we can now see the Details in our dashboard in this case in the map institute as seen this specific image and all the details of that and we can see our impressions for completeness let's also go through the process of creating an image from scratch rather than starting from the website so we can go over to the images section where we'll see all of our images we've Created but let's create a new image so select the first option here create new image when we create a new image we'll be presented with a blank canvas in this case we can see we're prompted to change the background image so this is the canvas in the middle obviously we've got our personalization option on the left and our settings on the right so simply clicking the canvas will Prompt us to choose an image to set now we can either choose an existing image from our library or we can click this option to upload an image that we have on our computer in this case i'm just going to choose this image here and click select then we'll be prompted do we want to change the canvas to match the image or adjust the ratio of the image to match the canvas in this Case let's adjust the canvas to the image size make sure we've got the image we can reduce the zoom a little bit so we can see it all in one place and now we can just start as we did before just to add our personalization options again adding such as text clicking in to it and adding Personalization tags choosing the settings to set the style and elements of that within our layer controls here on the right hand side and being able to control all of those elements such as adding a website to preview and again changing the settings there once we've added uh and set up our image again we can go to integrations and choose the platform we want to use once we've created our image again Setting it to live is the final key to being able to use it for personalization and finally obviously make sure to save our work as we go along hope that's been a really useful overview of how within 10-15 minutes you can get your account set up get your site personalized and your campaigns out and start to enjoy the benefits of hype personalization throughout your