How To Trigger A MailerLite Popup On Button Or Image Click In Squarespace

As you might know, I love using MailerLite for my email marketing. It’s super easy to use, it integrates with Squarespace, and it also has a free plan which is perfect if you’re just getting started.

In today’s video tutorial, I’ll show you how to trigger a MailerLite form as a popup on image or button click in Squarespace.

Transcript: How to Trigger A MailerLite Form As A Popup On Image Click

Hey guys!

In one of my last tutorials, I showed you how you can integrate uh MailerLite with your Squarespace website. In today's tutorial, I want to show you how you can trigger any MailerLite folm... for... forum... form! I swear I know how to speak uh, any MailerLite form embedded form as a pop-up, on a click-away event, uh what I mean by this is basically when somebody clicks on this button or on this lovely image of a gradient below; your form will pop up.

So that's when they click on the button basically that this isn't a button, a Squarespace button, I have to mention that it's not a Squarespace button; it's a code from MailerLite.

So that's what we're working with here.

And when they click on image the same thing happens, so the form pops up and today I want to show you how you can do this in case you need to embed your MailerLite form as an image. Or if you want to get a little bit creative with how you showcase your signup forms.

You're going to go to your MailerLite account and you're going to select which form you want to use for this particular integration, and then when you're going to click on the 'Embed' option.

And you're going to make sure that you're here on the 'Show pop-up on click event'. So MailerLite basically here, you need to make sure that this 'Universal Code' is already pasted into your website. You've done this when you've connected your MailerLite account with Squarespace.

So you do not need to add this part of code again. This is not necessary if you've already added it to your website. If you haven't then you're going to first copy this code to clipboard and you're going to go to Settings in your Squarespace website -> Advanced -> Code Injection, and then you're going to paste it into the Header.

Now, as you can see, it's already here because we've connected this website with MailerLite. So I don't need to do this; so this is only if this is your first time connecting MailerLite, and you only need to add this code once; even if you want to add a few different forms to your website.

So this is just the one time thing.

Now if you want to embed your code or show your MailerLite form as a pop-up: when somebody clicks a button, or a link, or an image; this is what you need to do.

So MailerLite will give you two pieces of code.

So the first code will show show up as a button. And this is, that's the first thing that I showed you. So basically this is the button that MailerLite generates, and once you click it: pop-up will show up. You're going to basically copy that code to the clipboard, and then you're going to go to the page where you want to show your form.

So I'm just going to create a new blank page. I'm going to name it Test. And we're going to add a blank section to it so that we can embed the code. So click on 'Blank' and then 'Add Code' and delete this and basically paste the code that you copied from MailerLite.

Now as you can see the button does not look very pretty. In fact, it's kind of ugly looking. So there are two ways that you can fix this: you can tinker with some CSS and style it by giving the button a 'Class' such as, you're going to add 'Class' and then let's call, let's just say 'ML' and this allows us to target this element in the CSS while we're styling it.

So that's the first way you can do it and I'm going to show you how that works. So you're going to add this Class to the button code that you copied; and I'm going to paste that code in the description of the video below so you can copy and paste it, and then you're going to click on Save.

And then you're going to go to the Design tab -> Custom CSS and then you're going to style the button. So we're going to enter the class that we created, and we're going to say padding: 10 pixel 20 pixel, so that'll make it bigger.

Then we're going to add background color and #CA9153. Then we're going to change the color of the text to white, and then I'm going to get rid of that ugly border by saying border: none.

And that's the first way you can style the text.

And then I'm going to take all of this, copy it, I'm going to paste it below; and I'm going to add 'Hover' and then the only thing we're going to change here is the background color.

So I'm going to delete all of the other properties that we set, and we're going to change the background color to #C52078. So when somebody hovers, it'll change color.

And then once they click it a pop-up will show up. And now when you click it, the form shows up. So that's the first thing. That's the first way we can do this.

Excuse my squeaky chair.

Now the second way that you can do this is basically by adding an image. So we are going to edit this, it also works with text links.

So basically, if you want to add it as a link you need the second piece of code, and that's what we're going to use for a simple text link and for an image link.

So we're going to copy this, and let me add another code block, and when you save; when you click it, the form will show up.

But this code is also handy if you want to use an image to show, to trigger the MailerLite pop-up form. Now this method is a little more involved because it requires us to first upload an image to our Squarespace website.

So what we're going to do is first you're going to go to Custom CSS and then you're going to click on Manage Custom Files -> Add Images or Fonts, and you're going to locate an image on your computer.

So I'm just going to go with this lovely gradient again, and then click that image; I just clicked it as you can see, and then that gave me basically the link to the image.

So I'm going to, and inserted it into the CSS Editor, so I'm just going to copy that and delete it off of the CSS Editor.

I'm going to click on Save and then we're going to edit this. And I'm just going to reuse this, or actually no, um let's do this the proper way. So I'm going to add another code block and this time round I need a temporary storage space.

So we're going to paste that. So we are going to copy that code one more time; the one for the link, the very bottom one. Paste that, and then instead of this text you're going to insert the code for an image block. So we're going to go with image source, and now we're going to paste the image code that we copied from Squarespace here.

Don't forget to add the closing quotation marks, and then the closing tag for the image tag itself. And then you're going to click on Save.

Okay so we've added that and now we're going to go to an incognito tab because sometimes it gets a little wonky when you're testing things out, so I'm just going to go to the test page.

And now, when they; as you can see I'm hovering over the image and when I click it the pop-up shows up again. And then we can do this with the text link, and we can do it with a button as well. And again the image works as well.

And that's basically how you can trigger a MailerLite pop-up form on about... on a button, a text link, and an image.

And I'll have the code for all of this below so that you know how to do it on your Squarespace website.

And if you like this video I would love it if you subscribe to my channel and hit that bell notification icon so that you know as soon as I release another awesome Squarespace tutorial.

That's it for today and I'll see you next time.

Bye!

As promised, here’s the code for styling the button:

.ml{
  padding: 10px 20px;
  background-color: #ca9153;
  color: #fff;
  border: none;
}
.ml:hover{
  background-color: #c52078;
}

And here’s the code to add the image within MailerLite’s code for the link/image popup:

<img src="yourimageurlgoeshere"/>

Final Thoughts

With the steps laid out in this tutorial, you can use your MailerLite forms in a variety of ways.

And if you still need to get your website up and running, don’t forget to check out our Squarespace templates built with coaches, course creators, bloggers, and service providers in mind.