HTML End Card Generator
LINK: Simple HTML End Card Generator
The end card generator can be used to turn turn your 9x16 static or animated images into HTML end cards in a few moments.
Please note that end cards generated by this tool will have a clickable area that is the bottom 75% of the screen (away from the "close" button to avoid misclicks), regardless of where the CTA button is actually placed visually.
Instructional Video
Step by Step Directions
1. Add the Background Image
Click this icon to begin:
Select Background Image and drag it to the Workspace. Double click on the Workspace to upload an image from your files. Image files such as .GIF, .PNG and .JPG will be supported
If you'd like to, you can layer in a CTA button into your image and output a single .jpg/.png/.gif file. Then you can convert it directly to an .html and skip step 2.
2. Add the CTA
Select CTA Image and drag it to the Workspace on top of the Background Image. Double click on the Workspace to upload an image from your files. Image files such as .GIF, .PNG and .JPG will be supported. Please choose an image with a transparent background if using a Button CTA.
CTA File Guidelines:
- The CTA file should follow the example in the folder above - it should be a 4500px x 4500px square image with transparent area around the button itself
- Body Text: Recommend to use “Shop Now” or another CTA message
When using Margin to move your CTA button along the Y axis, ensure there is sufficient space from any text in the background image - depending on the screen resolution of the device, the placement and size of the images may slightly shift
Optional: in order to apply an animation to the CTA Image, choose the Style Manager
and select the “plus” button then type in “pulsing” and press enter. The button in preview should begin to pulse. This is currently the only supported animation style.
3. Select the Background Color
Since all devices have different aspect ratios of the screen, the Background Image will never cover the whole screen with the proportions needed. In the portrait orientation, the bottom and top edges may have empty spaces and we need to fill it with background color.
Select “Decorations” and use the color choosing tool to find the color that best works for your Background Image
4. Download and Validate the resulting HTML file
Once you’re satisfied with your end card, download the output HTML file by clicking this icon:
Upload the resulting End Card file to your Campaign
File Size: Must be lower than 5MB in order to upload in the system. Try compressing your images if the tool disallows export to HTML due to file size.