Capture emails with an automatic Exit Popup in Fresh Store

The exit popup is a method of gathering users email addresses for marketing purposes. The Exit popup will appear when a user moves their mouse near the top of the browse window (as if going to close the page) and asks if they want to sign up to your newsletter.

The exit popup can use the built-in form or you can use a form from a 3rd party company like Mail Chimp, GetReponse or AWeber.

To set up the exit popup, go to Settings--Your Store Settings---Email Marketing. Here you will change the parameters for Enable Exit Popup? from Off to On.

Once you “Enable exit popup”, edit the other options.

The next drop-down will determine if you are using the built-in Newsletter form or if you are using a 3rd party company form.

The following drop down determines if you popup should be shown once per visitor or on every page.

The “Exit popup form title” is the text that is shown in the title bar of the form. If you leave this blank, no title will be shown.

The “Exit popup form top text” is the text that appears at the top of the form and the “Exit popup form bottom text” appears underneath the email address capture box.

If you are using the built in form you can leave the “3rd party custom subscribe form” box blank.

We can now save our changes and test the popup.

The new editor also allows you to change font size and color so you can make your exit popup appear just how you want it to. These new functions are available across the whole of the Freshadmin area, using the new TinyMCE text editor.

So we can change our Above and Below text to stand out more using the new editor.

Now when we preview the popup.

All of the text on the form (email address, sign up) is also included within the French, German, Italian and Spanish translations.

You can also change the look and feel of your exit popup form by clicking Template – Visual editor, then selecting Customize Elements – Other elements and change the Exit Popup properties.

As mentioned previously, you can also use a 3rd party form to capture the users email address.

Mailchimp

To use a mailchimp form, first of all you need to sign up for a Mailchimp account at http://Mailchimp.com

Once you have created an account, sign in and click on Lists then click Create List

Fill in the form with details about your list then click Save.

Now you have saved it, on the next page, click Signup Forms.

On the next screen, select Embedded forms

You can now choose the form type, Classic, Super Slim, Naked or Advanced.

You can then configure the form to get it to look how you would like it to look.

Once done, you can copy the HTML code from the bottom of the page.

Then, go back to your store and edit your exit popup (tools – change parameters, email marketing).

Change the “Choose the form to display in the popup” to “Use email Marketing Form” then paste the HTML code from Mailchimp into the “3rd Party Custom Subscribe Form” at the bottom of the page. Then click “Save All”.

You can now go to your site and test the exit popup to see how it looks.

As you can see, the top and bottom text are still visible however the form now contains your Mailchimp form.

If you look at the HTML code you can see (when using the basic form) this it is loading the css from http://cdn-images.mailchimp.com/embedcode/classic-081711.css

You can then see the button code is

#mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}

If you go back to the HTML you pasted in, you can also see that it says you can override these values by adding your own css, so let’s change the color of the button.

Change the <Style> code in your HTML to the following

As you can see, we have added #mc_embed_signup .button {background-color: #F25758}

I got the #F25758 value by taking a screen shot of the form and pasting it into Paint.Net and using the color dropper to select the red color to get the hex value.

This will override the .button background colour. Our exit popup now looks like this.

GetResponse

If you want to use GetResponse for your 3rd party form, log in to http://GetResponse.com, navigate to your dashboard and click “Create Web Form”.

On the next screen, select the form with the transparent background.

Add any controls/data fields you want, or edit the existing ones.

To change the background color of the “Sign Up” button, select it and then select “Show Advanced”, then you can change the background color.

To change the color of text, select it, highlight the text then click the Edit tool. You can then select the A to change the color.

Clicking the down arrow next to the A will allow you to choose a color.

Once you are happy with this, click “Next Step”.

Select the settings you would like on the second page and click “Next Step”.

On the final page, select “I will install my web form” then click “Show HTML Code”.

Copy the code and paste it into your stores dashboard.

You can now test the popup.