How to Build a Fly-In Template

The information discussed in this article is related to Terminus's web experiences offering.

Introduction to Fly-In Templates 

The Fly-In "Template Type" allows you to build content to be delivered via a content box that flies onto the screen (typically in one of the bottom corners). 

This template type has five distinct layouts:

• Image Upload
• Background image
• Blank
• Text with Button
• Top image with text

Below, we will show you what each layout looks like and the customizations that are available in each. In general:

• Container customizations allow you to change the size, format, colors, and borders associated with particular containers or elements
• Text customizations allow you to change size, font, style, colors, text alignment and insert dynamic content tokens
• Button customizations allow you to change links, size, font, styles, colors, and alignment
• Image customizations allow you to change clickthrough links, size, placement, and opacity
• CSS/JS customizations allow you to add any custom CSS or js that you’d like to apply to your content

Fly-In Template Best Practices

• If you are going to recycle ad creative to use onsite, you will want to use the Image Upload template.
• If you want to create dynamic content AND use an image, you will want to use the Background Image template, the Image on Left with Text template, or the Top Image with Text template. All of these will allow you to insert content tokens in the text field
• If you want to insert an HTML element like a form or a video, the Blank template will provide a field for that code to be added. 
• Text and CTAs:
  • Fly-ins are effective when they don't take up too much of the screen 
  • Try to maintain text and sizing that keeps the fly-in to less than 1/3 of the length or width of the page 
  • Headlines of 1-2 lines and subheaders of 3-4 lines are typically sufficient 
• Where to use:
  •  Typically served in the bottom corner. Delivery on the right or the left side will be dependent on the structure of your page 
  • We recommend serving them on as many pages as your targeted traffic visits 
  • It can be helpful to remove conversion pages (forms) from the fly-in location so visitors do not get distracted from conversion 
• When to use:
  • IIf you have a visual message you want to share across multiple pages of the site 
  • If you want to mirror a paid off-site campaign with similar creative onsite 
• Size Recommendation:
  • We recommend 300 x 300 px as an initial starting point for fly-in banners. 

Fly-In Template Layouts

Image Upload Layout

This layout is the best option for using existing creative assets - particularly existing ad creative. As seen above, this layout has the following elements available for customization:

• Base
• Image
• Close Button

The image customizations will allow you to upload an existing image file, provide a click through link, and add any alt or title attributes that you’d like. 

When to use:

• Use this layout when repurposing existing creative from other campaigns.
• Use this layout when the content you want to share is just a static image.

Full Background Image Layout

This layout allows you to create a fly-in where the text and the call to action sit on top of an image. The image comprises the full background. As seen above, you have the following elements available for customization:

• Base
• Background Image
• Heading
• Body
• CTA
• Close Button

When to use:

• This layout is a good choice if you have a primary image that you’d like to appear behind the text and call to action.
• This layout works best if your background image is muted, allowing the text to stand out.

Blank Layout

This layout provides a blank field for text and/or html content. Additionally, the Custom CSS/JS is available in this template (as it is in all templates) to further customize your content. These are the primary fields available for customization:

• Base
• Content (text/HTML)
• Close Button

When to use:

• This layout is what you should use if you want to insert a form or video into your fly-in. The blank field will provide you the flexibility you need to use your embed code to directly insert forms, videos, and other custom content for use in your fly-in.

Text with Button

This layout allows you to create a fly-in with a simple headline, sub-head, and call to action. The primary fields available for customization are:

• Base
• Heading
• Body
• CTA
• Close Button

When to use:

• This layout is a good choice when you have a simple and direct message that doesn’t require additional imagery.
• This is also a good layout if you’d like to use content tokens to serve dynamic text since it relies exclusively on text fields.

Top Image/Bottom Text

This layout allows you to create a fly-in with the image on top (either horizontally or vertically aligned) and the text below. As seen above, you have the following elements available for customization:

• Base
• Image - top
• Heading
• Body
• CTA
• Close Button

 When to use:

• This layout is a good choice when you have an image you’d like to feature alongside text. It works particularly well for horizontally oriented images.
• This is also a good layout if you’d like to use content tokens to serve dynamic text since you have multiple text fields available for customization.