Components

Overview

Components are the building blocks you use to build your ad in Design Studio HTML5. A component is a configurable, reusable piece of functionality for use in a Flite ad. Everything in your ad is a component – every text snippet, every image, every feed, every button, every video is either a component in itself, or part of a larger component.

Design Studio HTML5 offers a set of standard, built-in components to all ad builders. This set of components is very powerful and versatile. You can also build your own components with Flite Component Studio.

Standard Components

Design Studio HTML5’s standard components are organized by category: Basics, Media, Navigation, Integrations, Utility, and Your Components. You can add components to your creatives via the Library panel.

Basics

These components are the basic building blocks you need to construct an ad – shapes, text snippets, buttons, images, etc.

Button: Add a button you can style or upload images for each button state.
Hotspot: Add a transparent interactive shape to your ad.
Image: Upload images (JPG, GIF, or PNG).
SVG: Upload SVG (scalable vector graphic) files.
Shape: Add a rectangle or ellipse, then customize its appearance.
Text: Add basic formatted text using Markdown syntax or plain text.
View: Allows you to group components and reset their position origin point.

Media

Media components can be used to bring animated GIFs and video into your Creative.

360° Panorama: Use 360° video and images for an engaging experience.
Animated GIF: Upload a GIF image (more accurate when resizing).
GIF Controller: Control an animated GIF using actions and events.
Video Player: Add a Flite-hosted or externally-hosted video element to your ad.
YouTube: Add a YouTube video, and customize playback options.

Navigation

These are Components designed to facilitate navigation within your ad. All navigation components accept children and offer various methods of navigation between layers.

Rotate Stitcher: Allows user to animate a sequence of images. Similar to the GIF Controller Component.
Button Group: Ad a connected set of buttons.
Carousel: Browse through options floating in a 3D floating rotator.
Comparison: Show and hide two overlapping layers.
Gallery: Navigate a set of components using a filmstrip of thumbnails.
Grid: Display content in a recognizable and navigable grid layout
Parallax: Add a sense of motion and three-dimensionality to your ad via the parallax transition.
Revealer: Reveal the contents of an ad as a user scrolls up or down on a page.
Scroll: Navigate among child layers using a continuous scrolling/swiping interaction.
Stack: Build a custom navigation system by assigning actions to buttons, images, etc.
Tab Set: Navigate a set of components using a tab-based interface.

Integrations

These components bring third-party functionality or third-party content into the ad.

Facebook: Add live Facebook content as a browsable list of items.
Feed: Add live content as a browsable list of items using a feed source (RSS or Atom).
Form: Add a custom form and form parts (name, email, dropdown list)
Locations: Add a map with pinpointed markers.
Poll: Add a custom poll and poll parts (question, response options)
Twitter: Add live Twitter content (updates, likes, list, or search) as a browsable list of items.
Weather: Show the right content at the right time based on weather conditions (This is a premium feature that can only be enabled by your Account Manager).

Utility

Utility components introduce more complex functionality into your ads. They allow for more advanced ad builds that require logic tools or programming functionality.

Conditional: Control which layers are shown based on the value of variables or data.
Device Detection: Trigger Events based on device-detection (i.e. Desktop, versus Mobile).
Frequency Cap: Cap the number of times a particular event takes place in your ad on a per-user basis.
Messenger: Configure messages to manage your actions and transitions.
State Manager: Keep track of your ad's state across ad impressions.
Web View: Include pre-built HTML in your ad.


Back to Index

Components