- Hey there and welcome to module 4.5, "Add a Checkbox to Your Forms." You actually have multiple use cases for these Checkboxes. However, we are going to showcase one. We are actually going to add that Checkbox to an existing form you have an existing form we have and add that Checkbox right under the submit button. So once a person leaves their email address with us or with you, they check that box they ultimately become not only an email lead but also a Messenger subscriber as well. Now, as you can see from this example you can add it to an Add to Cart button as well. So once a person checks that box, goes to the checkout page but forgets, for some reason life gets in the way, to fulfill their order. You now have next to their email also their Messenger details, so that you can actually follow up with them above email and Messenger in order to recuperate a lost sale. Some people actually inside Clepher have been using this with great success as well. However, we are going to keep it in line with the training. We want to generate 2 leads for the price of 1. So what I mean would that basically generating a Messenger subscriber and an email leads in one blow. That said without further ado, let's hop in right away. And just like that we're inside Clepher again. And then this video, you're about to discover for how to set up a Checkbox Plugin on your website attaching those Checkboxes to your buttons, giving you an additional way to generate Messenger subscribers. It's very, very easy to set up and you can use this in multiple ways. However, in this short little video we are going to demonstrate how to set up a Checkbox on this button on a squeeze page. However, the Checkbox can actually be added to any other button as well. For example, if you have an E-commerce store you might wanna consider adding those Checkboxes to your Add to Cart and Checkout buttons basically only Checkbox under the Add to Cart button, you can promise them a 10% discount coupon if they check the box and subscribe to Messenger but you can also use this Checkbox in order to add it to the checkout button making sure that you can track Abandonment Carts follow up with Abandonment card messages or just send the purchase details right to the person inside Messenger. However, for this short little demonstration video we are going to keep things very simple. And the objective right here is to generate leads 2 for the price of 1. So we want to generate an email leads by having the visitors, filling out this form with their email address and clicking that Checkbox so that they can actually proceed as a Messenger subscriber as well. Again, 2 leads for the price of 1. with that sad, let me just move back to Clepher right here, there we go. And in order to start to process all you need to do is click on the cog wheel right there and navigate to Dashboard. Then hover over the Magnet icon again and click on it. Then click on Checkbox Plugin. This redirects us to the Checkbox library and this can fit as many Checkboxes as you see fit. Now in order to start and Create a New one all you need to do is click on, Create New right here. And let's just name this one, Checkbox Plugin #1, then from there, we are going to click on Confirm and this redirects us to the Checkbox builder right here on the right you can already see a small little demo of how the Checkbox is going to look like. Now as you can see right here the Builder part actually looks quite similar to the Builder part you've seen in the previous video where we demonstrated the Send to Messenger overlay widget builder. Now with that said, let's just head in right away. Now first though, if we can change the language of the Checkbox Plugin, and as we move on right here we need to set up a identifier which is required so that the Clepher knows to which button the Checkbox belongs. I know for a fact that my name or ID attributes is called UpViralgo. There we go. You can actually identify the name or ID attribute all of the button you want to tie to Checkbox to by simply right clicking on the button and inspect the element. This opens up the console right there and right here from the code, we can actually see the ID is navbtn or the name is UpViralgo. We can go with either, but I've chosen to go with the name one, which is UpViralgo. Now each and every page builder, WordPress Blog or any Blog builder for that matter has a way to specify IDs or name attributes to your buttons. So if those name or ID attributes don't come as a default, which are buttons then you usually can specify one inside the builder you use. And if that's an issue for you, then simply contact the support desk of the page builder you're using or the Blog builder you're using. And they're usually quite helpful and able to help you out and get that ID or name attribute to you. Now, as you can see, it's fairly fairly simple to actually find it out, right now I'm just going to navigate back to Clepher right here and go through the next couple of steps. I do want to add a Tag right here so that I know for a fact from which Checkbox they actually come in. So I'm going to call this, "Clicked: Checkbox." For this setup, I can actually forward URL parameters to Custom Fields as well. Again, it's a little bit of an advanced feature. So we are going to leave this blank for now. What we can also do is basically send over any form inputs to Clepher as well. Now we want to do that in this case I'm going to simply call the email part and I want to save that email to a Custom Field inside Clepher as well. Again, if you go back to your form you basically right click again and do an inspect element to check out the name. And in this case we were right. It's just called emails. So in this case, the email they put in right here and provided, they clicked the Checkbox. The email address right here will also be forwarded to Clepher. I'm moving back to Clepher. And that's all there is to it right now. I'm going to go to Luke's. The only step is setting up the Checkbox size right now we have a large size pick it out. However we want to make it very, very clear for users. So we are going to go with Extra Large and this actually magnifies or increases in size a little bit as you can see from the field right here, right here we are going to the Submitted tab. And this is where we are going to select the Flow which is the Ask for Email Address Flow by doing this. We're almost there already. Now we can do some specific things right here, but again we are going to keep things simple and we're not going to use these specific settings. However, you can choose to opt for this as well. Right here, under submission behavior you can click this Checkbox and you can see that the preview is now updated with this little text right here, where it says "Please check for Messenger Updates in order to continue." Now what this particular option does. It basically blocks any visitor to continue if they did not take the Checkbox right here. So this is basically a method for you to assure that each and every user that goes through, ticks the Checkbox. However, in some cases, this comes at a price. Some people really don't want to continue with Messenger making you lose that lead entirely. So that's basically a trade-off in some cases, and in some cases, 100% of the users actually tick those boxes. So it really comes down to testing. However, again, for this little demonstration we are going to keep things simple and we're going to tick that off. Right now, we are going to go to the Install tab and click on Save. This shows the code snippets, 2 in this case, which is actually the scripts that calls to Checkbox. And this Div right here, which you place under the button. This is basically the actual script or piece of code that you need to place under the button. So your website knows where to place that Checkbox. Ideally, you want to place a Checkbox right under the button, you tied it to. So it makes it very very simple for people to tick that box. Now, again, as you can see right here from the text you need to place this code snippet anywhere on the page but preferably right before closing the Body Tag again as mentioned in the previous video, preferably in the footer of a specific page, you do not want to call it on each and every page because that's the new HTTP requests that you want to limit those, because it doesn't make sense. If you load a script, you are not using it on your website, basic website 1on1 building. So what you want to do is place this script inside the footer of your page. Now, in this part of the video, I'm actually going to demonstrate how easy it is to set up, right now. I'm just going to navigate to this page, refresh it and edit the page right here. So I'm going to open this up in a new tab. I'm going to navigate back to this page right here on Clepher. I'm going to copy this code right there. Copy it, I'm going to the edit page. I'm simply using a WordPress blog and I'm going to go all the way down right here. And I'm going to place it right under the Send to Messenger button scripts, awesome stuff. Right now, I'm going to go up, update the page and I'm going to open up the builder and edit the page. Again for you, this might look different because you're using a different page builder a different blog builder, but more or less everything works in a similar fashion. Right now I want to add the Div to the button and all I need to do in order to do that is simply copy this. Here we go. Go to the editor right here, open up this thing right there. You just close this up and search the button and place it right under the button. Conveniently, it's the last thing in this form. Add it right there and click on Save. And that's all there is to it in order to set up a Checkbox. And we're back on this page. Now, all I need to do is basically let me just close this up right here close up the Send to Messenger widget, refresh There we go. And click on the download button. And if we did so correctly we should now see the Checkbox Plugin, the Checkbox right under the blue button on the next pop-up. There we go. Now, as you can see, it's right there. Now, in order for people to subscribe all they need to do is simply set up their email address tick that box and tick that box as well. And once I click on this button right here I ultimately become a subscriber to this Messenger bot. There we go. It redirects us to this page right here. And as you can see right here inside the Messenger bot is now sent over the Ask for Email Address Flow. Now there is one thing I do need to mention which is very, very important. Any subscriber that actually comes in via Checkbox we cannot apply any personalization tags to, that's the exact reason why you see undefined right here. So in your Flows, you might want to set up a condition, basically to showcase a different message. Once they come from a Checkbox or simply scrap the entire personalization in this first thing. Now the moment they interact with your bot though that's when those personalization tags become active. Now, the reason why Facebook actually does this is that it has to do with privacy laws, which basically prohibit you to send any personalization data right out of the gate, by simply checking a Checkbox. Now inside Clepher, we actually need to do something different here as well. Once we go to audience you can actually see that there's now an undefined user. However, I am in this case the undefined user. And once I actually interact with the page my undefined user profile will merge with my normal user profile. You can see that the undefined profile is now gone and that we have merged the end of file profile with the actual profile. Very, very neat stuff. Now, this is basically how the Checkbox works in a nutshell, in the next video we are going to show to you how the Customer Chat works. Again, it works in a similar fashion. It allows people to chat with you and your chatbot from your website and your pages. And basically, once they actually chat with you they already become a Messenger subscriber. So you can reach them in alternative ways as well. More on that in the next video I hope you liked this video about the Checkbox Plugin.