Creating the Overlay Images

Before you begin creating an overlay, you will want to involve a design resource. You can download the overlay template here. If you want to create your own, just make sure the image is 500px by 331px and it's in either a PNG or GIF format. 

Create an Email Collection Overlay Image

You'll need two images for the email collector. The first image should consist of a clear reason why you're asking visitors for their email address, enough space for our email entry field, and any restrictions or fine print you need to add. Below is an example of what the first screen could look like for the email collector. 

The second image you'll want to create is for your "Success" message with enough space for the call to action button. Here's an example of what this second screen could look like.

Once you have your images, you're ready to get started! 

Create a Call to Action Overlay Image

For the Call to Action overlay, you only need one image. The image should consist of a clear reason why they should click the call to action, enough space for our CTA button, and any restrictions or fine print you need to add. Below is an example of what the image could look like.

Once you have your images, you're ready to get started! 

Recommendations for your images

We don't provide any limits on file size for the Nudge Overlay backgrounds, but we do have a few recommendations for creating these images that will result in them loading correctly:

• We recommend using 72 DPI resolution, since this is a standard resolution that looks best on computer and tablet devices.

• The images should be 500px by 331px - if they are larger than this, our system will automatically resize them, which may result in unwanted image compression.

• We also recommend saving your image in PNG or GIF format, as opposed to JPG, PSD or TIFF. PNG and GIF images automatically flatten out any layering data that may be associated with the image (resulting in smaller file size vs PSD or TIFF). They also have less noise in the image than JPG images, which means the image will render more clearly across browsers.

• Please make sure there are no apostrophes in your file name. This will cause our system to not display the overlay image, although it will show up as "uploaded."