Welcome to the interactive User Experience podcast series!

In this episode we're going to build a One-Time Offer on the "Signup Confirmation" page, so you can offer another one of your fantastic MV products to your customers, immediately after they make a purchase or signup for a freebie.

This is an interactive episode where you can follow along and Pause to create a one-time offer in your own MV account.

See below for the code snippets, Audio-only format and text transcription.

Visit THIS LINK to access the "Design Drop" Canva templates we refer to in this episode.

AUDIO

Press play and get ready to pause, click, type, and build your own one-time offer!

CODE

Here's the code I used in my example.  For this to work, you will need to add some custom CSS code to your main account settings.  

Before attempting to do it, please read this article that gives you more detailed instructions:

READ ME FIRST

CODE FOR SIGNUP CONFIRMATION FIELD

This will generate the page details you saw in the video.

To customize it for your own one-time offer, you'll need to change the first link to be your own image upload (the .png file from Canva).

You will also need to change the second link to refer to your own upsell product (the coupon code link).

And of course, customize the text to create your own message.

Code below:

SUCCESS! THANK YOU

Welcome to Basic Mixing with Ableton Live. Thanks for your purchase.

<https://s3.membervaultcdn.com/mixitecture/steve-Copy-of-MV-One-time-offer-graphics.png?v=1647889435" title="otogrfx" alt="otogrfx" />

https://courses.mixitecture.com/products/courses/view/12/?action=signup&coupon=onetimeoffer" target="blank" class="mv_custom_button mv_primary_button mt-4">BUY NOW

BEFORE YOU START

Grab this special one-time offer and save 50% on How To EQ Your Tracks. Snap your mixes into focus!

ENTER THE COURSE

Click the button below to start your first Mixing Lesson. I can't wait to hear your new tracks in the feedback group!

CUSTOM CSS CODE

This goes in the General Settings of your MV account.  

Go to the sidebar and navigate to Settings > Advanced Settings > CSS.

Code below:

a.mv_custom_button.mv_primary_button.mb-2 {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

PREVIEW

Remember to take a look at the mobile view before you finish. To see this, use the link from your thank-you page preview.

Mine looked like this:

https://courses.mixitecture.com/products/courses/view/65/confirm/?preview=admin

Open your MV admin on your phone, click into the course you're editing, and add /confirm/?preview=admin after the number.

(The number is your unique course ID and will probably not be "65".)

Just make sure that your image, text and button all appear as you expect when in mobile view, to lead your visitors to take the one-time offer.

TRANSCRIPT

Steve Knots  0:00  
Hey, I'm Steve knots. Welcome to the User Experience podcast where I show you how to build fun stuff inside your member vault account. 

Steve Knots  0:07  
Today we're playing with a monthly design drop, which is a new project where our friend Ira is making some designs that you can use in your member vault. Erin is using her podcast to tell you what they are and what to do with them. And then I'm going to take you through the experience of actually applying them inside your account, previewing, making sure it all works, doing all the bells and whistles and going through the end result of actually doing it. So you can have more fun with your clients more success with your sales, more gamification in your number, Vault, Project system, whatever. 

Steve Knots  0:37  
Overall, it'll just take you to a higher level and give you something else to do in your member vault that's going to be useful to your people, solving problems, helping them out helping everybody get to the next step, you know what it's all about, we have fun doing this stuff. And the monthly design drops are going to give you a little kind of tidbits to play with. 

Steve Knots  0:52  
So first of all, there's this member vault page that you'll this will be in the podcast notes, where you can access the template in Canva. Now, I'm not going to go through the process of designing it in Canva, because I'll go down a rabbit hole and spend too long. But the point is, you can click the button open Canva and get access to any of these five square panels that say things like exclusive offer, or project title here or take your practice to the next level. 

Steve Knots  1:15  
The idea is you plug in the details for your product and give people something else to get after they sign up for one of your offers. You know how it works with the upsell the one time offer. If you go and buy a pair of hiking boots, you're probably going to get some new socks, who wants to put old socks in new boots right? The moment when you're at the store, you buy those awesome hiking boots, and mentally you're on the trail hiking up the mountain. And the person says hey, you know what, here's these new padded socks are super comfortable, breathable, lightweight, they don't collect sweat, they make you lose 10 pounds, you know, whatever, you're gonna say, Yeah, I only have some socks, like whatever, it doesn't matter. The upsell is a super easy thing, especially when it's relevant. And it's going to help people now Erin's talked about the strategy, I'm just kind of integrating that into what I'm talking about. So that's where you can find the designs in Canva. 

Steve Knots  1:57  
Now, let me just show you my course, ecosystem, I teach electronic music production. And the product we're going to be selling is called Basic mixing. This is a four module course, it's kind of a main course, it's not like a signature product product. It's not everything I teach. But it's a good chunk of what you do when making music. And that's what people are going to buy it, let's say $300 price point, the upsell. The one time offer is going to be the smaller course called How to EQ your tracks, which is one step in the process of mixing. 

Steve Knots  2:25  
For example, if this course was called How to make lasagna in four modules for $300. This upsell would be something like how to make your own tomato sauce, because you're going to use the tomato sauce in the lasagna and every other traditional Italian recipe I'm teaching, but some people want to actually make their own. So the upsell is like a little cool thing that takes the main product farther. So what we're going to do is go to the checkout page of the basic mixing course and add the upsell to give them a discount one time only on this extra EQ course, that they can take their whole world further. 

Steve Knots  2:56  
So let's get started. And what I'm saying that because you need to have to remember about products to do this old system, you need the main one that people are going to buy, and then a link to the second one. Pause here and build two products. Not really you need to if you don't have to yet, set them up, set them to invisible grade them and you can play with them. So first of all, let's make the coupon code so we have something to use. So I'm in my MemberVault admin, click on Products in the left side. Pick out my upsell product called How to each of your tracks. I'm going to click the gear now I'm going to click Edit under Actions to create a coupon code. I already did this, but I'm going to show you where it goes. So we're editing let's collapse the Modules section just click the word modules to collapse that because we don't need to see it. We're going to collapse product settings. Now in the signup Options. Under payment options, we're going to create a coupon code you can see coupon name it says one time offer amount 50% and expires never because I want this to be available. So pause here and create a new coupon give it a simple name like one time offer or 50 off or something like that. And when you have that saved, remember scroll down and click the Save button that's important for coupon codes to make sure it gets entered into the system. After you have your coupon code created. Press play on the podcast.

Steve Knots  4:13  
And now we're back. So let's exit out to the products list. Now we have a special 50% discount for this bonus product or the upsell product. Now let's enter the main product and add the upsell. Okay, so let's click the Action edit on my course doo doo doo doo There we go. let's collapse the modules window because we don't need to see that and we're gonna collapse Hello, thank you collapse the product settings and signup options let's scroll down sign up tight payment options you can see all my coupon codes. Those are for a one time purchase or payment plans. 

Steve Knots  4:49  
Now you can see the buy signup button text Learn More button text promo text remember the promo text is like your sales page inside the product like when they click learn more they go to The promo text, keep scrolling Terms of Service, email consent. And finally we get to the signup confirmation. This is what people see immediately after buying the product. 

Steve Knots  5:10  
Remember, these little green question marks are super helpful. While they're green in my account, I don't know what color they are in your account. We're gonna click this little question mark, and see what it says signup confirmation help. This message is shown directly after someone successfully opts into or purchases your product, and can be customized if desired, which is what we're going to do. We're gonna customize this field to make it into a one time offer. These little question marks are great, they really tell you what's going on. 

Steve Knots  5:34  
So first of all, let's see what I have in there. You can see some words it says success. Thank you. Welcome to basic mixing with Ableton Live thanks for your purchase. And then the login details. Welcome, welcome. Welcome, Blablabla. You know, we should do, let's click the Preview signup confirmation link on the lower right corner of the signup confirmation field. And right away, I want to see what this looks like. So I understand what my users are going to experience now, when they purchase. So I click the button, new tab opened up window slid in from the right side, it says success. Thank you Welcome, save your login details, you can see there's some styling with the big fonts bold face. And it says Now let's get started at the bottom, the text is come on in and download the first lesson. And there's a green button that says View Product now. So that's basically a call to action with a button just like on a landing page or something, I want them to take action start the course right now click in get into the member of all stuff. And this is one of the strengths of a member vault is that when they purchase, they don't have to go to their email and find a link and get the confirmation message and then click in to start. They can purchase and enter immediately. It's a great design that Mike thought up to just remove that barrier. Don't let people leave the platform they buy they go in, they start right away, get the engagement going on, you know, give them what they want. That's that's the instant gratification. So all we're going to do is change a little bit of this text in the thank you area to say, oh, one time offer, why don't you grab some socks to go with your new boots. Okay. So to do this, we need to prepare the graphic, which I already did using the Canva. Editor. So I'm I'm going to upload that. So let me see what am I going to delete out here, I do want to keep the success in the Thank you. We're going to remove the login details part because you know, I'm going to send them that on email anyway, they don't really need that. So now there's a success menu to tell them okay, the payment went through, they got a little welcome. That's important for the emotional confirmation. So they know that yes, all the payment stuff is done. Now let's add an image. So I'm going to click the insert, edit image button, upload, browse for image, I just downloaded it to my downloads folder, there's my graphic, open and drop it in. Let's give it a description just to now I have decided that for the width and height, if I leave these blank, it's going to auto adjust to the right size and the frame. So don't worry about the sizing of it, we'll just leave that blank, like save. Whoa, it looks huge, right? It's on the whole width of my edit screen. Well, don't worry about that save. And we can just go to the Preview tab and refresh. And see, aha, the square graphic looks perfect. So pause right now and upload your square graphic into your signup confirmation area. It doesn't have to be perfect, it doesn't have to be the final one. But upload something so you can preview and see what it looks like. And when you're done, come back and we'll go to the next step. All right, back to the snaps. So now in my preview window, I can see success. Thank you. Welcome, thanks for your purchase. And there's a picture that says 50% off how to EQ your tracks, I can see a little mock up laptop screen, something related to the course the colors match, it's branded, it looks cool. And it says unlock the course, or $25 only offer valid on this page only. Oh, that sounds sounds legit. But you know what the button underneath is is just going to take me inside the course. So we got to add a little bit more to give them clear button to click that's going to take them into the offer instead of the course. So this is where you might want to use a little bit of custom code, we have some simple free code you can use to embed a button. And I have this saved as a text file. The button code looks

Steve Knots  9:07  
like this blue highlighted on my screen. 

Steve Knots  9:09  
Basically, it's CSS where you put that in your CSS settings and it says class MB Custom Button primary button bla bla. And then I have the button title and stuff. So what I'm going to do is copy this whole block of text that I prepped for this podcast. So you don't have to watch me type it. I'm going to paste it in to my HTML code editor. And then we can talk about what's there and why it's there and what it's going to do. So now I'm still in the admin land, I can see the top says success. Thank you in h1 style. We got the image, it's a square. And then underneath, there is a little thing that says buy now with a link okay. Then it says before you start and then enter the course. So let's click Save. And go back to our preview tab. Refresh. 

Steve Knots  9:55  
And what do we get? It says success. Thank you and there is the image, oh, right below the image above the fold. Notice it says buy now. Okay, that's good. So I can see the picture it says buy now. Now, I can read before you start, grab this special one time offer and save 50% on how to EQ your tracks, snap your mixes into focus. That's all strategic language, before you start, it grabs our attention and tells them hey, it's done, you bought it. But before you start your lesson, let's get one more little tool that's going to make your life easier. It says grab this special one time offer, okay, it's that tells me it's important. Save 50% are the words that tell me why I want to do this. How to EQ your tracks is the name of the course, which is recognizable to my niche audience. And then there's a little kind of a booster, this is snap your mixes into focus, which means Hey, they're going to learn mixing, but they want to snap them into focus. That's like an additional extra thing, like, stick your feet into these new socks before you put your boots on, you know, like really get them charged up and to be excited about it. 

Steve Knots  10:55  
And there's a Buy Now button that when I click that button, it opens up a new tab for the viewer, it goes straight to the course, the by the by now window opens up the action equal sign up part of the link at the top right here. When you see that action equal sign up, it means a little window is going to open on the right side by now how to each of your tracks in the payment options. Coupon Code is applied prices dropped ready to go. They can instantly by checkout with PayPal or whatever. And it's as easy as possibly can be for them to get this special thing, and then enter into the lesson and courses through that window. So that's basically what it's gonna look like for the user experience. 

Steve Knots  11:32  
And honestly, we're just about done. If you wanted to make this more simple, let me go to where I copied the link. So remember, when I set up the coupon code for the upsell product EQ product, I went to the little gear icon to the product details and copied the link. So that's highlighted in blue right now, I'm just going to do Command Ctrl C, copy that link. And let's say I'm I'm going to do like a simpler version without the button. So I just deleted that extra fancy stuff. Now we've got just the image. And I want to enter just the link and make it like a very, very simple link to click on. If you're not into embedding CSS buttons and custom whatever. I'll just say get it here in capital letters, select that, click the insert, edit link, paste in my URL. Title is get it here. And now this drop down window open link in new window. 

Steve Knots  12:34  
I want that to open in a new window, you could do it in the current window to take them directly there. But the way I my mind works for browsing, I like to have one page stay put and open up the second one so I can kind of consider it. That's up to you, let's say open window and then save. And now I'm going to delete the actual link underneath. And because we're in MB was set up styling, where it says Get it here. Let's make that h2 save and preview. And that should be pretty simple. If you're working with the MB code editor, you should be able to do that. Now again, it says Get it here and we can still see the view product now button. 

Steve Knots  13:10  
So let's add one more thing underneath. Great job. Now let's enter the mix course with the button below. And save and preview, I just want to make sure people understand that the view product button is for the one they purchased first, not the upsell. And then if I clicked my link to test it, it doesn't go to the right place it does alright it goes to the end product with the 50% discount applied coupon code in place, they're ready to buy it checkout and live happily ever after. So I hope that explains how to embed the link with the coupon code in your thank you page if you're not familiar with doing button codes and stuff, but since I want to have it with a button code, I go to my text sheet, copy that code.

Steve Knots  14:06  
Go to code editor, select all paste, copy it in, save. And notice one thing I'm doing is I'm using a text editor to keep track of my code. on one screen it says the thank you page backup. That's my original stuff from before I did this workshop. Then on the other text document which has the title and I did save it and it's not called Untitled it's called the title. Now I put the code for what I wanted to paste in for my demonstration example. 

Steve Knots  14:30  
Anytime you're working with something important to you, you should make a backup especially in member vault with code editing because it's pretty easy to put in some dumb little thing that makes your display all weird. We see this a lot with video embeds and things where the video might extend past the frame. It's it's not gonna happen by itself. But when you do it and you can't quite fix it. It can really help a lot to have a backup in your text. 

Steve Knots  14:51  
So pause right now copy your code and paste it to a text editor. So you have a backup of what you're doing to make sure you are completely free to experiment with without being afraid that you're gonna break your site. And now that you're back from your pause, let me click save on here, we're going to preview one more time to make sure this looks like what I want it to look like. Because I'm going to leave this here, this is a real offer, this is my real site. It's my business. And I am going to do an experiment and see if the next people who buy this course, take the offer for the 50% off because that's a pretty good deal. 

Steve Knots  15:24  
And that looks like it's all legit we have the Buy Now button we have a little before you start message, we have the enter the course with separation for the button below. And I am really happy with this graphic, I can tell you graphic design is something I had to learn a long, slow, difficult way I went to school for audio and music and engineering and all that. So graphics and marketing was like what I learned kind of on the fly. And I literally went into Canva and spent about 10 minutes to edit your template, make it look good for my style. And I downloaded a PNG file and done. So that's what it's all about. I will put the links and the code I used into the show notes and the blog post, this whole podcast is going to appear on the MemberVault blog with a video you can watch with audio you can listen to and pause and do the actions. And then some snippets of code where you can get the button code that I used. 

Steve Knots  16:16  
And if you want I guess I could put in the whole code for my thank you area. It's pretty basic stuff. There is um, the h1 field to make the word success look big. There's a little strong, you know, for boldface, h2, that kind of stuff, it's, it should be should be easy for you to look at it and decipher what those strange markings are and what they're doing. But remember, if you're not comfortable with working with code, you can just paste in the link activated as a link and get done with your one time offer. That way. So there we are at the final version. 

Steve Knots  16:49  
And I'm going to keep it short and sweet. So that's all thank you so much to everybody in the MemberVault universe for being part of our awesome collab hanging out on Facebook commenting on each other's posts and, and questions and giving each other ideas. And in general, being one of the best business communities I've ever seen on Facebook. It's absolutely so supportive and fun. And I think that all comes from Erin and Mike making this relationship focused business where we're all growing together. Totally cooperative competition is for people who didn't have any good ideas yet, I guess. I don't know. That's another topic. Thanks for listening, and I'll see you next week.