Welcome to Quoox University. In this video, I’m gonna show you how easy it is to link a Quoox campaign to your website and the number of different ways that this can be done without any need for any special technical knowledge.
Now you can link any of the Quoox campaigns, whether this be a lead capture campaign, an appointment booking campaign, or a membership sale campaign, they can all be linked to your website in a number of different ways, quickly and easily. So I’m gonna take you through how this can be done.
We start off with a campaign. So if we go into Connect & Promote, and down to Campaigns, we’re gonna quickly add a new campaign. Now there are, on the Quoox support site, there are far more in-depth videos on this. So please do check that out and that’ll take you through step by step. But I’m just gonna go through this step very, very quickly. So I’m gonna click the “add” button. I’m going to select this particular template, the “6 Week Challenge”, which I know is similar to the one that I want, and that’s created me a template campaign.
What I’m gonna do is edit this campaign. And I’m going to rename it because I’m wanting to promote a 30 day program. I am going to change it to a membership promotion, and I’m going to use it to promote my 30 Day Challenge membership. What I’m then gonna do is I’m gonna set my default venue to Chelmsford and turn off the venue selection, so that’s nice and clean and I’ll save that.
Now, because I’ve based this on a template, I’ve already got a landing page set up. So in reality, what you do at this stage is, you would go through here and you would edit the landing pages to suit what you need and what you want. So you’d put your logos in, your trends, your structure, you’d change some of the wording, you’d change the pricing and such like, so that it fits with your particular requirements and it’s obviously tailored to you. But this gives you a decent starting point. So we’re gonna start working with that straight off.
Now, what you’ll see on the landing page tab is, we can see our different landing pages here. And the one that I want to link to our website is the “Men’s Landing Page”. We can see the URL for that there. So what I’m gonna do is I’m gonna grab that URL by pressing the clipboard button. And that puts that URL into my clipboard. If I open up an editor and I paste that in, we can see that that is what’s gone across into my clipboard.
Now, most of us in the industry tend to use things like WordPress or Wix for creating our websites. And what I’m gonna show you is how you can very easily add this campaign to a WordPress site. But the principles are exactly the same, whether you’re using Wix or one of the other builders, they all work on a very similar basis. So when I use this URL, that’s my landing page URL. When I whack it into the browser and I just open up that page, we can see my landing page as it’s being created. And then when I click the button, it takes me through to the registration form and such like.
So the very first thing you can do is can simply give people that URL. So if you’re sending out a Facebook post, you can of course do that by posting it through Quoox using the hooks functionality, or you can just create your own Facebook post or Twitter post or Insta post, for example, or manually, put in that URL, and it will take your leads and people that are interested through to that landing page, through which they can then see further details and they can then book or buy the membership or whatever it is that you’re actually promoting.
But let’s look at adding this to our website. So I’m gonna work in a WordPress website and I’ve set up a couple of demonstration pages here. So let’s take a look at this page here that I’ve created, which I’ve called Launch Page. It’s very basic, there’s nothing exciting in it. All I’m trying to convey here, that this is basically any page on your website. It could be your home page. It could be a landing page. It could be absolutely anything. It could be a blog post, it doesn’t matter. It’s just a page with some content and with a button that I want to then go through to my campaign.
So what I’m gonna do first is I’m gonna edit that particular page in the WordPress editor. And I’m gonna edit that button. And what I’m gonna do is I’m gonna set the URL to be our Quoox landing page URL, like so. I’m gonna save that, I’m gonna save the draft, and then I’ll go into preview it to see what the result looks like. So there is my page as before, but now my button’s linked up, and when I click that button, it opens up to my landing page, as I hoped and as I expected. So that’s really the most simple implementation. It takes them through to the landing page, and then Quoox takes care of all of the rest.
But let’s now assume that I’ve got my landing page already built on my WordPress site. So I’m going to go back to my pages. So I’m gonna select a landing page that I’ve already created, and I’m going to edit that. And if I show you how that looks at this particular stage, we’ll hit preview, and you will see that this is a fairly standard, fairly common structured landing page, where I’m promoting my next 30 day programme. This particular focus is on men, but I’ve got a parallel one for women as well. Then we’ve got various calls to action; I’m outlining the program I’ve got, I’ve got, you know, how you can currently get it at an amazing price. And it’s a fairly standard landing page for getting people to sign up for a trial programme. So what I’m gonna do is I want to link this button here, and I want to link that through to the booking page for my campaign.
So what I’m gonna do is I’m gonna go back to the URL I grabbed earlier from my campaign. And all I’m gonna do is I’m gonna change this L here, that stands for landing page. I’m gonna change it to the letter R, which stands for registration form. And now I’m gonna grab that same URL. I’m going to go into my page. I’m going to edit my button and I’m going to put the URL in. And then I’m gonna set that and save that. And now if I preview that and the page reloads, this button will now take me through straight to the registration form for my campaign. So that’s the next way of doing it. That takes you straight through to the form itself.
But what I actually want to do and what quite a lot of people like to do is they like to create these as pop-ups in the actual website. So that the URL is hidden and it’s just a popup of the form that comes in place on top of the landing page. So let’s explore how we do that next.
So I’m gonna go back to my URL again, I’ve got the R in place, so I want to keep that. And on the end of that, I’m going to put a question mark, then modal=1. Now this tells Quoox that I’m going to display this in a pop-up and it changes the way that Quoox styles the form.
Now, what I need to do in my WordPress site is I now need to set up a popup in which I want to put the form. So in this particular site, we’re using a plugin called “Popup builder”, there are lots of them out there on the market. This is one by Sygnoos which we use in the Quoox website and it works quite well. So I’m gonna use this as an example. We will probably find that your WordPress site probably already has similar, or if not, you can use the Sygnoos plugin, or you can use one of the many other, I mean, literally dozens of plugins that there are out there.
So I’m gonna create a new popup and by clicking, add new, I need to create an Iframe popup. So I’m gonna click Iframe. Now, I’m gonna give it a title. So this is our 30 day program popup. I’m going to put in the URL. So that’s this one with the ?modal=1 on the end. I’m gonna place that into the Iframe URL. So that takes, that tells the popup builder, what URL I want to open up in my popup. And then I’m gonna set up an event.
I want this popup to basically work on a click event. Now, the way that this works is, when I save this popup, it’s gonna create something called a “class” for me, and what we’ll see in a moment is I can then put that class against the button, and then that links that button to this popup.
The other thing I’m going to do is, I’m gonna change the dimensions. So I’m gonna make it quite wide. So I’m gonna make it 95% width so that it displays at a decent width on a mobile device, but then I’m gonna counteract it by then setting a maximum width of 600 pixels. So what will happen there is I’m saying 95%, but if it’s greater than 600 pixels, bring it down to 600 pixels wide. This means that you get a nice wide pop up on your browser for mobile devices. But if you’re on a computer, you get a decent sized pop up, but it doesn’t go “silly wide” because you’ve limited it to 600 pixels.
So I’m now going to publish that and that’s gonna create a class for me. So that’s now saved. So if I go back into events, I can now see that the popup builder has created this default class for me, I’m gonna copy that. I’m then gonna go back to my pages.
And I want to find the page that I was working on, so that’s this one. I’m gonna edit that page. Now I’m gonna go to my button and I’m gonna edit that button. Now for the URL, I don’t need the Quoox URL, I just want a hash, just literally the hash sign on its own. That’s all you need. So I’m gonna set that. And then I’m going to add an extra class onto my button, which is the one that I’ve just cut and copied from the popup builder. So it’s created this ID for me, Sygnoos popup ID 8474. Yours will be different and it’ll depend on what pop-up builder you’re using. So I’m gonna save that and I’m going to look at my page now.
So there’s my page. When I click the button, I get my popup. So this is the Sygnoos popup. Into it, it’s then put the Quoox campaign form. Now you’ll see that by putting ?modal=1 on the end [of the URL], it’s removed all of the background styling and it’s made it nice and clean. So that’s how that appears. Now that’s on a desktop, of course. So if I use my current browser to simulate a mobile device, if I have a look at what it would look like on a Galaxy S5, reload the page, and click the button. I can see that my form also fits on my Galaxy S5, Quoox has styled it so that it fits. I can see the modal size and I can see that’s gonna work, right?
So that’s all good. However, I can see here that the wording, you know, whilst it’s fine, I might want to change that onto, to one particular line. So this is where, you know, you can get a little bit more involved. This does get a bit more technical. It’s certainly something that web designers might like to play with because you’ve got control over the stylesheet that’s used in these forms as well. So what I’m now gonna do is I’m going to set up a stylesheet, which gets applied to this particular form.
Now, I’m not gonna take you through the detail of how it works, because that’s a little bit more technical, but I’ve got one set up here, and this is doing three different things. So the first thing I’m doing is I’m setting a style here on the container of the form, it forces it to always be central in my popup, otherwise it’s going to align to the left. So if I’d had that up really wide, you would have seen the form aligned to the left-hand side, but I’m gonna make it so that it’s always central.
The next thing I’m going to do is I’m going to inject the logo of our demo gym into the top of the form. So, I’ve got my logo in the popup as well. And then the last thing I’m gonna do down here, is I’m gonna set up a particular style that works for narrow devices, which reduces the size of the heading. So that should then ensure that my heading then fits on one line.
To apply our stylesheet, I then go back into Quoox and there’s our dashboard, and I go down to settings. In the default settings page, I scroll down towards the bottom and I find this section called Campaign Settings. And it’s here that you can inject a stylesheet into a campaign form. So I’ve created this stylesheet as we just saw. And now I’m going to upload that.
It’s important that your stylesheet is valid, as Quoox will check that it validates against the W3 stylesheet validator, and it won’t upload your stylesheet, if it doesn’t validate. That’s to ensure that your page runs correctly, and that there’s no code in the site that shouldn’t be there. So I’m gonna select that, I’m gonna add that, and then I will save those settings. So, that’s now taken effect. Now, back in my page again, in WordPress, I’m gonna preview the page once more, and I’m now going to click on the button and there’s my popup. So what I can now see is that my stylesheet’s now in place, this has thrown a header image into the top. So it’s over in the style there and put a logo into that space.
If I now look at how this looks on a mobile device, I put the browser into simulation mode and I put it to [mobile] mode, and I then refresh my page, so it downloads and populates. And then I click my link. I can now see that my form has now got the stylesheet applied, and it’s got the additional style for mobile devices that reduces the width of the header, so that now also fits on one line. Now, if you’ve got knowledge of stylesheets, or you’ve got a web developer who has a knowledge of how to use stylesheets, there’s a wealth load more stylings that they can then apply to their particular Quoox form. And there’s a whole load of control on how you can present things.
Within the popup builder, you can change the way that the popup boundary displays, for example. So on this one, we’ve got a fairly thick, rounded border. We can make that orange, we can make it a squared border. We could change the style of the background. There’s all sorts of things that we can do. And we’ve got a lot of control over that. So what we’ve demonstrated here is how actually very simply, and literally in a matter of minutes, you can link your Quoox campaigns into your website or any page that you need. You can either go through to the landing page directly. You can go through to the full screen form directly. You can create the form in a popup window, nice and easily, and then you’ve got additional control over how that form particularly styles.
So you’ve got a wealth of options there. It’s not particularly “rocket science”. You probably find that you can do this yourself, using the plugins as I’ve just demonstrated, and certainly any web developer will be able to do this within moments for you with no hassle whatsoever.
I hope that helps, and please check out the other videos on support.quoox.com and we’ll see you soon.
