{"__v":118,"_id":"55567be0150ba30d00f4e248","category":{"__v":34,"_id":"555627c5ea5e120d001884ff","pages":["555627c6ea5e120d00188501","55562fbdea5e120d00188526","5556368b150ba30d00f4e0b7","5556590e26e9bc0d0044eb61","55567be0150ba30d00f4e248","55567bf026e9bc0d0044ec55","55567c08150ba30d00f4e24a","55567c14150ba30d00f4e24c","55567c4426e9bc0d0044ec59","55567c501026001900d72abc","55567c5926e9bc0d0044ec5d","55567c9a1026001900d72abf","55567cd9150ba30d00f4e24f","55567ce4150ba30d00f4e251","55567ced26e9bc0d0044ec61","555698d62f6b480d0034d9a4","55e0c386dc6b2e170074f2e3","55e0c5e15087cb1900986c16","55e0f99926f51b0d009b1744","567b35067c40060d0056041d","567b3531ee052b1700dbd9da","56846a5a65976e0d00001c57","5684783bc11c7e0d00aaff71","56847cb55a66610d006eabbd","56848a0cf72e9e0d00e098e5","568ccdf38602880d001ce230","569431fcd8c04d1700e5ae05","569ebe1ad233620d007055fb","569edd718f6d4b0d00f13b91","56aa5c3d13a69a0d00a77a09","56aa6eda4d38401900199f7a","56c7a7d5f9aa3b0d00c8457b","56d0ab1440d36e1d00bc143b","56ec9c5a493ce620008ea4c8"],"project":"555627c4ea5e120d001884fb","version":"555627c4ea5e120d001884fe","reference":false,"createdAt":"2015-05-15T17:07:17.512Z","from_sync":false,"order":0,"slug":"design","title":"Design Studio"},"project":"555627c4ea5e120d001884fb","user":"55562799ea5e120d001884f8","version":{"__v":10,"_id":"555627c4ea5e120d001884fe","project":"555627c4ea5e120d001884fb","hasDoc":true,"hasReference":true,"createdAt":"2015-05-15T17:07:16.918Z","releaseDate":"2015-05-15T17:07:16.918Z","categories":["555627c5ea5e120d001884ff","55562a5526e9bc0d0044ea47","555653821026001900d72a3c","5556685c1026001900d72a85","5556687626e9bc0d0044ec04","555668821026001900d72a87","55566892150ba30d00f4e206","555668b826e9bc0d0044ec05","55e0fb6026f51b0d009b1746","567b3b3017368a0d009a6e54"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"createdAt":"2015-05-15T23:06:08.575Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"* [Overview](#overview)\n* [Standard Components](#standard-components)\n* [Configuring a Video Component](#configuring-a-video-component)\n* [Twitter Authorization Instructions :fa-external-link:](page:twitter-authorization-instructions) \n* [Twitter Component Usage Guidelines :fa-external-link:](page:twitter-component-usage-guidelines) \n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Overview\"\n}\n[/block]\nComponents 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.\n\nDesign 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](doc:component-studio-introduction).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Standard Components\"\n}\n[/block]\nDesign Studio HTML5’s standard components are organized by category: [Basics](#section-basics), [Media](#section-media), [Navigation](#section-navigation), [Integrations](#section-integrations), [Utility](#section-utility), and Your Components. You can add components to your creatives via the Library panel.\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Basics\",\n    \"0-0\": \"<img src=\\\"https://flite.site/thumbs/808/9d33c1e1-58ff-4dfa-a323-c19c41c9cb76.png\\\" width=\\\"16\\\"> Button\\n<img src=\\\"https://flite.site/thumbs/59a/670c1769-1ab1-428c-a356-e7776bc08fd8.png\\\" width=\\\"16\\\"> Hotspot\\n<img src=\\\"https://flite.site/thumbs/8a4/6fe1bac1-925a-429d-8255-20342b11f21d.png\\\" width=\\\"16\\\"> Image\\n<img src=\\\"https://flite.site/thumbs/434/7062a205-b40c-477e-a6a2-a2a33089c39e.png\\\" width=\\\"16\\\"> SVG\\n<img src=\\\"https://flite.site/thumbs/5e6/043d6b9c-258d-4601-9da8-dc709ee927cd.png\\\" width=\\\"16\\\"> Shape\\n<img src=\\\"https://flite.site/thumbs/0a0/f488f2a7-6fe5-4e04-80b1-e9496adb4574.png\\\" width=\\\"16\\\"> Text\\n<img src=\\\"https://flite.site/simulator/370.1775/images/icn-16-cmp-view.png\\\" width=\\\"16\\\"> View\",\n    \"h-1\": \"Media\",\n    \"0-1\": \"<img src=\\\"https://flite.site/thumbs/eca/5cf19e00-a3ce-42b0-99e9-477c9d322c29.png\\\" width=\\\"16\\\"> Animated GIF\\n<img src=\\\"https://flite.site/thumbs/ac7/0f9cf5a4-acd7-4bf7-80e6-8f0850ffe848.png\\\" width=\\\"16\\\"> External Video\\n<img src=\\\"https://flite.site/thumbs/2d0/0079b696-3a5a-4eb6-9c88-db205a0f3edb.null?74\\\" width=\\\"16\\\"> GIF Controller\\n<img src=\\\"https://flite.site/thumbs/50f/ebf24d0b-cf8d-402a-933a-ac1d246ce35b.png\\\" width=\\\"16\\\"> YouTube\",\n    \"h-2\": \"Navigation\",\n    \"0-2\": \"<img src=\\\"https://flite.site/thumbs/5d0/b58012fa-a410-402e-a571-0220fbfc3323.png\\\" width=\\\"16\\\"> 360° Viewer\\n<img src=\\\"https://flite.site/thumbs/2b2/7f780396-6a6c-4c18-a28e-b2f29988d484.png\\\" width=\\\"16\\\"> Button Group\\n<img src=\\\"https://flite.site/thumbs/730/ba080a96-b506-4521-99aa-1c9ddfef6390.png\\\" width=\\\"16\\\"> Carousel\\n<img src=\\\"https://flite.site/thumbs/f37/02796407-5bee-44bc-a25f-a9ff805fc1f0.png\\\" width=\\\"16\\\"> Gallery\\n<img src=\\\"https://flite.site/thumbs/6ac/4e5a8c14-fca1-41ea-a8c8-9a0d33493721.png\\\" width=\\\"16\\\"> Grid\\n<img src=\\\"https://flite.site/thumbs/57c/838c5993-1083-4ed5-82d5-1531a33c8d07.png\\\" width=\\\"16\\\"> Parallax\\n<img src=\\\"https://flite.site/thumbs/c3b/474a810b-22d3-4d49-8124-7b43f63d94b6.null?66\\\" width=\\\"16\\\"> Revealer \\n<img src=\\\"https://flite.site/thumbs/915/b04945e6-4313-40c6-8d5a-d5e1b1e8ae8e.png\\\" width=\\\"16\\\"> Scroll\\n<img src=\\\"https://flite.site/thumbs/88c/7c89e80a-0c0b-4ab6-a093-d913b3107056.png\\\" width=\\\"16\\\"> Stack\\n<img src=\\\"https://flite.site/thumbs/92e/6f993e17-3644-422d-8934-dc332fa084cf.png\\\" width=\\\"16\\\"> Tab Set\",\n    \"h-3\": \"Integrations\",\n    \"0-3\": \"<img src=\\\"https://flite.site/thumbs/883/57b32b11-6e7e-4ac7-984a-70df814ad7ab.png\\\" width=\\\"16\\\"> Facebook\\n<img src=\\\"https://flite.site/thumbs/af3/d9e739dd-eefe-4dbe-aee4-1f1a67dd4e69.png\\\" width=\\\"16\\\"> Feed\\n<img src=\\\"https://flite.site/thumbs/01c/60e9049f-df8c-4c3b-8cf4-e441d0c0bf89.png\\\" width=\\\"16\\\"> Form\\n<img src=\\\"https://flite.site/thumbs/db8/d8b908b6-a937-4b2b-be4a-97660580ac72.png\\\" width=\\\"16\\\"> Locations\\n<img src=\\\"https://flite.site/thumbs/9ba/2c8764fe-6a82-4888-808e-7c167051eab3.null?36\\\" width=\\\"16\\\"> Locations: Static\\n<img src=\\\"https://flite.site/thumbs/d55/f8942609-ac07-4844-af0b-a3fb7c35e2a7.png\\\" width=\\\"16\\\"> Poll\\n<img src=\\\"https://flite.site/thumbs/060/d2ff4127-64cb-499d-8237-3606195dd021.png\\\" width=\\\"16\\\"> Twitter\\n<img src=\\\"https://flite.site/thumbs/dd0/45d88938-cea1-4612-9a91-450903f8698d.null?97\\\" width=\\\"16\\\"> Weather\",\n    \"h-4\": \"Utility\",\n    \"0-4\": \"<img src=\\\"https://flite.site/thumbs/0c6/ac2e7163-8847-47c3-80d2-5d186a720c3c.null\\\" width=\\\"16\\\"> Conditional\\n<img src=\\\"https://flite.site/thumbs/8fd/624130f1-44c2-4b11-b704-e296995e2032.png\\\" width=\\\"16\\\"> Frequency Cap\\n<img src=\\\"https://flite.site/thumbs/a29/b29a9e1a-2313-4d3b-9411-5d0a9cc753ea.png\\\" width=\\\"16\\\"> Messenger\\n<img src=\\\"https://flite.site/thumbs/bbd/5f382a21-2c48-456e-946a-3fc205f05e02.png\\\" width=\\\"16\\\"> State Manager\\n<img src=\\\"https://flite.site/thumbs/2b2/85db56f7-c719-4240-a3a3-c427b70b4606.null?109\\\" width=\\\"16\\\"> Swiffy\\n<img src=\\\"https://flite.site/thumbs/733/cec7bcbe-4ae4-4cba-84fb-f59ee9b5c3b5.png\\\" width=\\\"16\\\"> Web View\"\n  },\n  \"cols\": 5,\n  \"rows\": 1\n}\n[/block]\n\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FxigTv2F1SG8%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DxigTv2F1SG8&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FxigTv2F1SG8%2Fhqdefault.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=youtube\\\" width=\\\"854\\\" height=\\\"480\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://www.youtube.com/watch?v=xigTv2F1SG8\",\n  \"title\": \"Flite Ad Design part 3: Components\",\n  \"favicon\": \"https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico\",\n  \"image\": \"https://i.ytimg.com/vi/xigTv2F1SG8/hqdefault.jpg\"\n}\n[/block]\n## Basics\nThese components are the basic building blocks you need to construct an ad – shapes, text snippets, buttons, images, etc.\n\n[<img src=\"https://flite.site/thumbs/808/9d33c1e1-58ff-4dfa-a323-c19c41c9cb76.png\" width=\"16\"> **Button:**](page:component-button) Add a button you can style or upload images for each button state.\n[<img src=\"https://flite.site/thumbs/59a/670c1769-1ab1-428c-a356-e7776bc08fd8.png\" width=\"16\"> **Hotspot:**](page:component-hotspot) Add a transparent interactive shape to your ad.\n[<img src=\"https://flite.site/thumbs/8a4/6fe1bac1-925a-429d-8255-20342b11f21d.png\" width=\"16\"> **Image:**](page:component-image) Upload images (JPG, GIF, or PNG).\n[<img src=\"https://flite.site/thumbs/434/7062a205-b40c-477e-a6a2-a2a33089c39e.png\" width=\"16\"> **SVG:**](page:component-svg) Upload SVG (scalable vector graphic) files.\n[<img src=\"https://flite.site/thumbs/5e6/043d6b9c-258d-4601-9da8-dc709ee927cd.png\" width=\"16\"> **Shape:**](page:component-shape) Add a rectangle or ellipse, then customize its appearance.\n[<img src=\"https://flite.site/thumbs/0a0/f488f2a7-6fe5-4e04-80b1-e9496adb4574.png\" width=\"16\"> **Text:**](page:component-text) Add basic formatted text using Markdown syntax or plain text.\n[<img src=\"https://flite.site/simulator/370.1775/images/icn-16-cmp-view.png\" width=\"16\"> **View:**](page:component-view) Allows you to group components and reset their position origin point. \n\n## Media\nMedia components can be used to bring animated GIFs and video into your ad creatives.\n\n[<img src=\"https://flite.site/thumbs/eca/5cf19e00-a3ce-42b0-99e9-477c9d322c29.png\" width=\"16\"> **Animated GIF:**](page:component-animated-gif) Upload a GIF image (more accurate when resizing).\n[<img src=\"https://flite.site/thumbs/ac7/0f9cf5a4-acd7-4bf7-80e6-8f0850ffe848.png\" width=\"16\"> **External Video:**](page:component-external-video) Add an external video file (.mp4), then customize playback options.\n[<img src=\"https://flite.site/thumbs/2d0/0079b696-3a5a-4eb6-9c88-db205a0f3edb.null?74\" width=\"16\"> **GIF Controller:**](page:component-gif-controller) Control an animated GIF using actions and events.\n[<img src=\"https://flite.site/thumbs/50f/ebf24d0b-cf8d-402a-933a-ac1d246ce35b.png\" width=\"16\"> **YouTube:**](page:component-youtube) Add a YouTube video, then customize playback options. \n\n## Navigation\nThese are some pre-made components designed to facilitate navigation within your ad. All navigation components accept children and offer different ways of navigating between layers.\n\n[<img src=\"https://flite.site/thumbs/5d0/b58012fa-a410-402e-a571-0220fbfc3323.png\" width=\"16\"> **360° Viewer:**](page:component-360-viewer) Allows user to drag object to view all around.\n[<img src=\"https://flite.site/thumbs/2b2/7f780396-6a6c-4c18-a28e-b2f29988d484.png\" width=\"16\"> **Button Group:**](page:component-button-group) Ad a connected set of buttons.\n[<img src=\"https://flite.site/thumbs/730/ba080a96-b506-4521-99aa-1c9ddfef6390.png\" width=\"16\"> **Carousel:**](page:component-carousel) Browse through options floating in a 3D floating rotator.\n[<img src=\"https://flite.site/thumbs/f37/02796407-5bee-44bc-a25f-a9ff805fc1f0.png\" width=\"16\"> **Gallery:**](page:component-gallery) Navigate a set of components using a filmstrip of thumbnails.\n[<img src=\"https://flite.site/thumbs/6ac/4e5a8c14-fca1-41ea-a8c8-9a0d33493721.png\" width=\"16\"> **Grid:**](page:component-grid) Display content in a recognizable and navigable grid layout\n[<img src=\"https://flite.site/thumbs/57c/838c5993-1083-4ed5-82d5-1531a33c8d07.png\" width=\"16\"> **Parallax:**](page:component-parallax) Add a sense of motion and three-dimensionality to your ad via the parallax transition. \n[<img src=\"https://flite.site/thumbs/c3b/474a810b-22d3-4d49-8124-7b43f63d94b6.null?66\" width=\"16\"> **Revealer:**](page:component-revealer) Reveal the contents of an ad as a user scrolls up or down on a page. \n[<img src=\"https://flite.site/thumbs/915/b04945e6-4313-40c6-8d5a-d5e1b1e8ae8e.png\" width=\"16\"> **Scroll:**](page:component-scroll) Navigate among child layers using a continuous scrolling/swiping interaction.\n[<img src=\"https://flite.site/thumbs/88c/7c89e80a-0c0b-4ab6-a093-d913b3107056.png\" width=\"16\"> **Stack:**](page:component-stack) Build a custom navigation system by assigning actions to buttons, images, etc.\n[<img src=\"https://flite.site/thumbs/92e/6f993e17-3644-422d-8934-dc332fa084cf.png\" width=\"16\"> **Tab Set:**](page:component-tab-set) Navigate a set of components using a tab-based interface. \n\n## Integrations\nThese components bring third-party functionality or third-party content into the ad.\n\n<img src=\"https://flite.site/thumbs/883/57b32b11-6e7e-4ac7-984a-70df814ad7ab.png\" width=\"16\"> **Facebook:** Add live Facebook content as a browsable list of items.\n<img src=\"https://flite.site/thumbs/af3/d9e739dd-eefe-4dbe-aee4-1f1a67dd4e69.png\" width=\"16\"> **Feed:** Add live content as a browsable list of items using a feed source (RSS or Atom).\n[<img src=\"https://flite.site/thumbs/01c/60e9049f-df8c-4c3b-8cf4-e441d0c0bf89.png\" width=\"16\"> **Form:**](page:component-form) Add a custom form and form parts (name, email, dropdown list)\n<img src=\"https://flite.site/thumbs/db8/d8b908b6-a937-4b2b-be4a-97660580ac72.png\" width=\"16\"> **Locations:** Add a map with pinpointed markers.\n[<img src=\"https://flite.site/thumbs/d55/f8942609-ac07-4844-af0b-a3fb7c35e2a7.png\" width=\"16\"> **Poll:**](page:component-poll) Add a custom poll and poll parts (question, response options)\n[<img src=\"https://flite.site/thumbs/060/d2ff4127-64cb-499d-8237-3606195dd021.png\" width=\"16\"> **Twitter:**](page:component-twitter) Add live Twitter content (updates, likes, list, or search) as a browsable list of items. \n[<img src=\"https://flite.site/thumbs/dd0/45d88938-cea1-4612-9a91-450903f8698d.null?97\" width=\"16\"> **Weather:**](page:component-weather) Show the right content at the right time based on weather conditions. \n\n## Utility\nUtility components introduce more complex functionality into your ads. They allow for more advanced ad builds that require logic tools or programming functionality.\n\n<img src=\"https://flite.site/thumbs/0c6/ac2e7163-8847-47c3-80d2-5d186a720c3c.null\" width=\"16\"> [**Conditional:**](page:component-conditional) Control which layers are shown based on the value of variables or data.\n[<img src=\"https://flite.site/thumbs/8fd/624130f1-44c2-4b11-b704-e296995e2032.png\" width=\"16\"> **Frequency Cap:**](page:component-frequency-cap) Cap the number of times a particular event takes place in your ad on a per-user basis.\n[<img src=\"https://flite.site/thumbs/a29/b29a9e1a-2313-4d3b-9411-5d0a9cc753ea.png\" width=\"16\"> **Messenger:**](page:component-messenger) Configure messages to manage your actions and transitions.\n[<img src=\"https://flite.site/thumbs/bbd/5f382a21-2c48-456e-946a-3fc205f05e02.png\" width=\"16\"> **State Manager:**](page:component-state-manager Keep track of your ad's state across ad impressions.\n[<img src=\"https://flite.site/thumbs/733/cec7bcbe-4ae4-4cba-84fb-f59ee9b5c3b5.png\" width=\"16\"> **Web View:**](page:component-web-view) Include pre-built HTML in your ad.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Configuring a Video Component\"\n}\n[/block]\n## Adding a Video\nThere are two ways to add a video to your ad. Once you choose a video source, the steps for customizing your video are the same.\n\n  * From an External Video: go to the Components panel and click on Media > External Video\n  * From YouTube: go to the Components panel and click on Media > YouTube\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/PGTSGhTnSDOjCaIiWRpK\",\n        \"Screen Shot 2016-01-05 at 10.50.01 PM.png\",\n        \"470\",\n        \"304\",\n        \"#7698c2\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nNext, select your video under SETTINGS > SOURCE tab in the Inspector. Enter the video URL next to the Video field. Then, upload a poster image. This is the image that viewers will see before the viewer clicks the play button. Finally, use Resize Mode to change the way that the video will be sized within the ad.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/ts3GgR3WTNeUZgVRty7Z\",\n        \"video-settings-source.png\",\n        \"311\",\n        \"165\",\n        \"#668ebc\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nCheck to see how the video will be displayed by clicking on the Preview Mode near the top left corner of the Design Studio. To return to Edit Mode, click on the pencil, the first of the three buttons.\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/qQO8ril4QwabmGskjV0l\",\n        \"video-preview-button.png\",\n        \"174\",\n        \"50\",\n        \"#fc2404\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n## Video Display Options\n  * Name this video layer under the GENERAL > INFO tab in the Inspector to help you keep track of the layers you create.\n  * Change the size of the video by either clicking on the blue border around the feed and dragging each edge to the position you desire, or by altering the number of pixels (px) under the Size section. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/prFRfZMQOaCWwXOBarnU\",\n        \"video-size-settings.png\",\n        \"207\",\n        \"78\",\n        \"#f72a06\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n  * Similarly, you can change the position of the video. Leaving the Position settings at X 0px and Y 0px will place the upper-left corner of the ad exactly at the upper-left corner. Customize the placement of the feed within the ad by either clicking and dragging the video within the ad space or by adding the desired number of pixels to the X section to determine how far to the right the feed will begin. Add the desired number of pixels to the Y section to determine how far to the down the feed will begin. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/somIWlCsQhOGyyDTnyGO\",\n        \"video-position-settings.png\",\n        \"210\",\n        \"77\",\n        \"#fc2404\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n## Video Appearance\n  * Choose the fill color and border color under the GENERAL > APPEARANCE tab in the Inspector. Begin by clicking on the white square with the red line to the right of Border Color and Fill Color and selecting your desired colors from the spectrum. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/H6OlLzARTICfy3oGyPS8\",\n        \"youtube+inspector+settings.png\",\n        \"301\",\n        \"246\",\n        \"#132e3d\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n  * Select your desired fill opacity for your ad. Use this slider to choose how transparent this layer will be when shown above other layers.\n  * Enter a title for your video. If you check the Show Title box, your title will appear above the video thumbnail. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/nu86JLHAT2WdnCi5o6Wu\",\n        \"video-title-preview.png\",\n        \"615\",\n        \"189\",\n        \"#2f5679\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nCustomize font size and text color of the video title under the SETTINGS > TITLE tab.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/hJzssUvXQnyzfwXF6wUW\",\n        \"Video+title.png\",\n        \"303\",\n        \"237\",\n        \"#82afd0\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n## Video Playback Options\n  * Select *Automatically start playing video* under the SETTINGS > PLAYBACK tab in the Inspector to play your video once the webpage loads. This section also allows you choose how many times your video will replay through the options: Loop Forever or Loop Count. \n    * Choose Loop Count if you want your video to play a specific number of times.\n    * Choose Loop Forever if you want your video to play on repeat until the user leaves the page. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/5iZAjKfmTXqMsKia30bw\",\n        \"video-playback-settings.png\",\n        \"238\",\n        \"176\",\n        \"#88adc8\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n  * Choose whether to display video controls under the SETTINGS > PLAYBACK tab. \n    * Select Show Controls always to display Play, Pause, and Volume options under your video at all times. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/iT4dQrhkRGq2SbwmoVxE\",\n        \"video-show-controls.png\",\n        \"310\",\n        \"35\",\n        \"#d0d0cf\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n* Select *Show Controls on hover* to display Play, Pause, and Volume options under your video only when the user mouses over the ad\n* Select *Show Controls never* to take away all Pause and Volume controls. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/mRcBpWDYQnhVzo0Ydnnk\",\n        \"video-playback-controls.png\",\n        \"309\",\n        \"156\",\n        \"#4173f5\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n* You can preview these changes by clicking on the Preview Mode button (looks like an eye), towards the top-left corner. To return to Edit Mode, click on the pencil, the first of the three buttons. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/4AmIuQzSAyJsejhBzbFg\",\n        \"video-preview-button.png\",\n        \"174\",\n        \"50\",\n        \"#fc2404\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"design-studio-components","type":"basic","title":"Components"}

Design Studio

Campaign Studio

Report Studio

Metrics

Flite Console

Ad Ops

Component Studio

Components

* [Overview](#overview) * [Standard Components](#standard-components) * [Configuring a Video Component](#configuring-a-video-component) * [Twitter Authorization Instructions :fa-external-link:](page:twitter-authorization-instructions) * [Twitter Component Usage Guidelines :fa-external-link:](page:twitter-component-usage-guidelines) [block:api-header] { "type": "basic", "title": "Overview" } [/block] 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](doc:component-studio-introduction). [block:api-header] { "type": "basic", "title": "Standard Components" } [/block] Design Studio HTML5’s standard components are organized by category: [Basics](#section-basics), [Media](#section-media), [Navigation](#section-navigation), [Integrations](#section-integrations), [Utility](#section-utility), and Your Components. You can add components to your creatives via the Library panel. [block:parameters] { "data": { "h-0": "Basics", "0-0": "<img src=\"https://flite.site/thumbs/808/9d33c1e1-58ff-4dfa-a323-c19c41c9cb76.png\" width=\"16\"> Button\n<img src=\"https://flite.site/thumbs/59a/670c1769-1ab1-428c-a356-e7776bc08fd8.png\" width=\"16\"> Hotspot\n<img src=\"https://flite.site/thumbs/8a4/6fe1bac1-925a-429d-8255-20342b11f21d.png\" width=\"16\"> Image\n<img src=\"https://flite.site/thumbs/434/7062a205-b40c-477e-a6a2-a2a33089c39e.png\" width=\"16\"> SVG\n<img src=\"https://flite.site/thumbs/5e6/043d6b9c-258d-4601-9da8-dc709ee927cd.png\" width=\"16\"> Shape\n<img src=\"https://flite.site/thumbs/0a0/f488f2a7-6fe5-4e04-80b1-e9496adb4574.png\" width=\"16\"> Text\n<img src=\"https://flite.site/simulator/370.1775/images/icn-16-cmp-view.png\" width=\"16\"> View", "h-1": "Media", "0-1": "<img src=\"https://flite.site/thumbs/eca/5cf19e00-a3ce-42b0-99e9-477c9d322c29.png\" width=\"16\"> Animated GIF\n<img src=\"https://flite.site/thumbs/ac7/0f9cf5a4-acd7-4bf7-80e6-8f0850ffe848.png\" width=\"16\"> External Video\n<img src=\"https://flite.site/thumbs/2d0/0079b696-3a5a-4eb6-9c88-db205a0f3edb.null?74\" width=\"16\"> GIF Controller\n<img src=\"https://flite.site/thumbs/50f/ebf24d0b-cf8d-402a-933a-ac1d246ce35b.png\" width=\"16\"> YouTube", "h-2": "Navigation", "0-2": "<img src=\"https://flite.site/thumbs/5d0/b58012fa-a410-402e-a571-0220fbfc3323.png\" width=\"16\"> 360° Viewer\n<img src=\"https://flite.site/thumbs/2b2/7f780396-6a6c-4c18-a28e-b2f29988d484.png\" width=\"16\"> Button Group\n<img src=\"https://flite.site/thumbs/730/ba080a96-b506-4521-99aa-1c9ddfef6390.png\" width=\"16\"> Carousel\n<img src=\"https://flite.site/thumbs/f37/02796407-5bee-44bc-a25f-a9ff805fc1f0.png\" width=\"16\"> Gallery\n<img src=\"https://flite.site/thumbs/6ac/4e5a8c14-fca1-41ea-a8c8-9a0d33493721.png\" width=\"16\"> Grid\n<img src=\"https://flite.site/thumbs/57c/838c5993-1083-4ed5-82d5-1531a33c8d07.png\" width=\"16\"> Parallax\n<img src=\"https://flite.site/thumbs/c3b/474a810b-22d3-4d49-8124-7b43f63d94b6.null?66\" width=\"16\"> Revealer \n<img src=\"https://flite.site/thumbs/915/b04945e6-4313-40c6-8d5a-d5e1b1e8ae8e.png\" width=\"16\"> Scroll\n<img src=\"https://flite.site/thumbs/88c/7c89e80a-0c0b-4ab6-a093-d913b3107056.png\" width=\"16\"> Stack\n<img src=\"https://flite.site/thumbs/92e/6f993e17-3644-422d-8934-dc332fa084cf.png\" width=\"16\"> Tab Set", "h-3": "Integrations", "0-3": "<img src=\"https://flite.site/thumbs/883/57b32b11-6e7e-4ac7-984a-70df814ad7ab.png\" width=\"16\"> Facebook\n<img src=\"https://flite.site/thumbs/af3/d9e739dd-eefe-4dbe-aee4-1f1a67dd4e69.png\" width=\"16\"> Feed\n<img src=\"https://flite.site/thumbs/01c/60e9049f-df8c-4c3b-8cf4-e441d0c0bf89.png\" width=\"16\"> Form\n<img src=\"https://flite.site/thumbs/db8/d8b908b6-a937-4b2b-be4a-97660580ac72.png\" width=\"16\"> Locations\n<img src=\"https://flite.site/thumbs/9ba/2c8764fe-6a82-4888-808e-7c167051eab3.null?36\" width=\"16\"> Locations: Static\n<img src=\"https://flite.site/thumbs/d55/f8942609-ac07-4844-af0b-a3fb7c35e2a7.png\" width=\"16\"> Poll\n<img src=\"https://flite.site/thumbs/060/d2ff4127-64cb-499d-8237-3606195dd021.png\" width=\"16\"> Twitter\n<img src=\"https://flite.site/thumbs/dd0/45d88938-cea1-4612-9a91-450903f8698d.null?97\" width=\"16\"> Weather", "h-4": "Utility", "0-4": "<img src=\"https://flite.site/thumbs/0c6/ac2e7163-8847-47c3-80d2-5d186a720c3c.null\" width=\"16\"> Conditional\n<img src=\"https://flite.site/thumbs/8fd/624130f1-44c2-4b11-b704-e296995e2032.png\" width=\"16\"> Frequency Cap\n<img src=\"https://flite.site/thumbs/a29/b29a9e1a-2313-4d3b-9411-5d0a9cc753ea.png\" width=\"16\"> Messenger\n<img src=\"https://flite.site/thumbs/bbd/5f382a21-2c48-456e-946a-3fc205f05e02.png\" width=\"16\"> State Manager\n<img src=\"https://flite.site/thumbs/2b2/85db56f7-c719-4240-a3a3-c427b70b4606.null?109\" width=\"16\"> Swiffy\n<img src=\"https://flite.site/thumbs/733/cec7bcbe-4ae4-4cba-84fb-f59ee9b5c3b5.png\" width=\"16\"> Web View" }, "cols": 5, "rows": 1 } [/block] [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FxigTv2F1SG8%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DxigTv2F1SG8&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FxigTv2F1SG8%2Fhqdefault.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://www.youtube.com/watch?v=xigTv2F1SG8", "title": "Flite Ad Design part 3: Components", "favicon": "https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico", "image": "https://i.ytimg.com/vi/xigTv2F1SG8/hqdefault.jpg" } [/block] ## Basics These components are the basic building blocks you need to construct an ad – shapes, text snippets, buttons, images, etc. [<img src="https://flite.site/thumbs/808/9d33c1e1-58ff-4dfa-a323-c19c41c9cb76.png" width="16"> **Button:**](page:component-button) Add a button you can style or upload images for each button state. [<img src="https://flite.site/thumbs/59a/670c1769-1ab1-428c-a356-e7776bc08fd8.png" width="16"> **Hotspot:**](page:component-hotspot) Add a transparent interactive shape to your ad. [<img src="https://flite.site/thumbs/8a4/6fe1bac1-925a-429d-8255-20342b11f21d.png" width="16"> **Image:**](page:component-image) Upload images (JPG, GIF, or PNG). [<img src="https://flite.site/thumbs/434/7062a205-b40c-477e-a6a2-a2a33089c39e.png" width="16"> **SVG:**](page:component-svg) Upload SVG (scalable vector graphic) files. [<img src="https://flite.site/thumbs/5e6/043d6b9c-258d-4601-9da8-dc709ee927cd.png" width="16"> **Shape:**](page:component-shape) Add a rectangle or ellipse, then customize its appearance. [<img src="https://flite.site/thumbs/0a0/f488f2a7-6fe5-4e04-80b1-e9496adb4574.png" width="16"> **Text:**](page:component-text) Add basic formatted text using Markdown syntax or plain text. [<img src="https://flite.site/simulator/370.1775/images/icn-16-cmp-view.png" width="16"> **View:**](page:component-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 ad creatives. [<img src="https://flite.site/thumbs/eca/5cf19e00-a3ce-42b0-99e9-477c9d322c29.png" width="16"> **Animated GIF:**](page:component-animated-gif) Upload a GIF image (more accurate when resizing). [<img src="https://flite.site/thumbs/ac7/0f9cf5a4-acd7-4bf7-80e6-8f0850ffe848.png" width="16"> **External Video:**](page:component-external-video) Add an external video file (.mp4), then customize playback options. [<img src="https://flite.site/thumbs/2d0/0079b696-3a5a-4eb6-9c88-db205a0f3edb.null?74" width="16"> **GIF Controller:**](page:component-gif-controller) Control an animated GIF using actions and events. [<img src="https://flite.site/thumbs/50f/ebf24d0b-cf8d-402a-933a-ac1d246ce35b.png" width="16"> **YouTube:**](page:component-youtube) Add a YouTube video, then customize playback options. ## Navigation These are some pre-made components designed to facilitate navigation within your ad. All navigation components accept children and offer different ways of navigating between layers. [<img src="https://flite.site/thumbs/5d0/b58012fa-a410-402e-a571-0220fbfc3323.png" width="16"> **360° Viewer:**](page:component-360-viewer) Allows user to drag object to view all around. [<img src="https://flite.site/thumbs/2b2/7f780396-6a6c-4c18-a28e-b2f29988d484.png" width="16"> **Button Group:**](page:component-button-group) Ad a connected set of buttons. [<img src="https://flite.site/thumbs/730/ba080a96-b506-4521-99aa-1c9ddfef6390.png" width="16"> **Carousel:**](page:component-carousel) Browse through options floating in a 3D floating rotator. [<img src="https://flite.site/thumbs/f37/02796407-5bee-44bc-a25f-a9ff805fc1f0.png" width="16"> **Gallery:**](page:component-gallery) Navigate a set of components using a filmstrip of thumbnails. [<img src="https://flite.site/thumbs/6ac/4e5a8c14-fca1-41ea-a8c8-9a0d33493721.png" width="16"> **Grid:**](page:component-grid) Display content in a recognizable and navigable grid layout [<img src="https://flite.site/thumbs/57c/838c5993-1083-4ed5-82d5-1531a33c8d07.png" width="16"> **Parallax:**](page:component-parallax) Add a sense of motion and three-dimensionality to your ad via the parallax transition. [<img src="https://flite.site/thumbs/c3b/474a810b-22d3-4d49-8124-7b43f63d94b6.null?66" width="16"> **Revealer:**](page:component-revealer) Reveal the contents of an ad as a user scrolls up or down on a page. [<img src="https://flite.site/thumbs/915/b04945e6-4313-40c6-8d5a-d5e1b1e8ae8e.png" width="16"> **Scroll:**](page:component-scroll) Navigate among child layers using a continuous scrolling/swiping interaction. [<img src="https://flite.site/thumbs/88c/7c89e80a-0c0b-4ab6-a093-d913b3107056.png" width="16"> **Stack:**](page:component-stack) Build a custom navigation system by assigning actions to buttons, images, etc. [<img src="https://flite.site/thumbs/92e/6f993e17-3644-422d-8934-dc332fa084cf.png" width="16"> **Tab Set:**](page:component-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. <img src="https://flite.site/thumbs/883/57b32b11-6e7e-4ac7-984a-70df814ad7ab.png" width="16"> **Facebook:** Add live Facebook content as a browsable list of items. <img src="https://flite.site/thumbs/af3/d9e739dd-eefe-4dbe-aee4-1f1a67dd4e69.png" width="16"> **Feed:** Add live content as a browsable list of items using a feed source (RSS or Atom). [<img src="https://flite.site/thumbs/01c/60e9049f-df8c-4c3b-8cf4-e441d0c0bf89.png" width="16"> **Form:**](page:component-form) Add a custom form and form parts (name, email, dropdown list) <img src="https://flite.site/thumbs/db8/d8b908b6-a937-4b2b-be4a-97660580ac72.png" width="16"> **Locations:** Add a map with pinpointed markers. [<img src="https://flite.site/thumbs/d55/f8942609-ac07-4844-af0b-a3fb7c35e2a7.png" width="16"> **Poll:**](page:component-poll) Add a custom poll and poll parts (question, response options) [<img src="https://flite.site/thumbs/060/d2ff4127-64cb-499d-8237-3606195dd021.png" width="16"> **Twitter:**](page:component-twitter) Add live Twitter content (updates, likes, list, or search) as a browsable list of items. [<img src="https://flite.site/thumbs/dd0/45d88938-cea1-4612-9a91-450903f8698d.null?97" width="16"> **Weather:**](page:component-weather) Show the right content at the right time based on weather conditions. ## Utility Utility components introduce more complex functionality into your ads. They allow for more advanced ad builds that require logic tools or programming functionality. <img src="https://flite.site/thumbs/0c6/ac2e7163-8847-47c3-80d2-5d186a720c3c.null" width="16"> [**Conditional:**](page:component-conditional) Control which layers are shown based on the value of variables or data. [<img src="https://flite.site/thumbs/8fd/624130f1-44c2-4b11-b704-e296995e2032.png" width="16"> **Frequency Cap:**](page:component-frequency-cap) Cap the number of times a particular event takes place in your ad on a per-user basis. [<img src="https://flite.site/thumbs/a29/b29a9e1a-2313-4d3b-9411-5d0a9cc753ea.png" width="16"> **Messenger:**](page:component-messenger) Configure messages to manage your actions and transitions. [<img src="https://flite.site/thumbs/bbd/5f382a21-2c48-456e-946a-3fc205f05e02.png" width="16"> **State Manager:**](page:component-state-manager Keep track of your ad's state across ad impressions. [<img src="https://flite.site/thumbs/733/cec7bcbe-4ae4-4cba-84fb-f59ee9b5c3b5.png" width="16"> **Web View:**](page:component-web-view) Include pre-built HTML in your ad. [block:api-header] { "type": "basic", "title": "Configuring a Video Component" } [/block] ## Adding a Video There are two ways to add a video to your ad. Once you choose a video source, the steps for customizing your video are the same. * From an External Video: go to the Components panel and click on Media > External Video * From YouTube: go to the Components panel and click on Media > YouTube [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/PGTSGhTnSDOjCaIiWRpK", "Screen Shot 2016-01-05 at 10.50.01 PM.png", "470", "304", "#7698c2", "" ] } ] } [/block] Next, select your video under SETTINGS > SOURCE tab in the Inspector. Enter the video URL next to the Video field. Then, upload a poster image. This is the image that viewers will see before the viewer clicks the play button. Finally, use Resize Mode to change the way that the video will be sized within the ad. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/ts3GgR3WTNeUZgVRty7Z", "video-settings-source.png", "311", "165", "#668ebc", "" ] } ] } [/block] Check to see how the video will be displayed by clicking on the Preview Mode near the top left corner of the Design Studio. To return to Edit Mode, click on the pencil, the first of the three buttons. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/qQO8ril4QwabmGskjV0l", "video-preview-button.png", "174", "50", "#fc2404", "" ] } ] } [/block] ## Video Display Options * Name this video layer under the GENERAL > INFO tab in the Inspector to help you keep track of the layers you create. * Change the size of the video by either clicking on the blue border around the feed and dragging each edge to the position you desire, or by altering the number of pixels (px) under the Size section. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/prFRfZMQOaCWwXOBarnU", "video-size-settings.png", "207", "78", "#f72a06", "" ] } ] } [/block] * Similarly, you can change the position of the video. Leaving the Position settings at X 0px and Y 0px will place the upper-left corner of the ad exactly at the upper-left corner. Customize the placement of the feed within the ad by either clicking and dragging the video within the ad space or by adding the desired number of pixels to the X section to determine how far to the right the feed will begin. Add the desired number of pixels to the Y section to determine how far to the down the feed will begin. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/somIWlCsQhOGyyDTnyGO", "video-position-settings.png", "210", "77", "#fc2404", "" ] } ] } [/block] ## Video Appearance * Choose the fill color and border color under the GENERAL > APPEARANCE tab in the Inspector. Begin by clicking on the white square with the red line to the right of Border Color and Fill Color and selecting your desired colors from the spectrum. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/H6OlLzARTICfy3oGyPS8", "youtube+inspector+settings.png", "301", "246", "#132e3d", "" ] } ] } [/block] * Select your desired fill opacity for your ad. Use this slider to choose how transparent this layer will be when shown above other layers. * Enter a title for your video. If you check the Show Title box, your title will appear above the video thumbnail. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/nu86JLHAT2WdnCi5o6Wu", "video-title-preview.png", "615", "189", "#2f5679", "" ] } ] } [/block] Customize font size and text color of the video title under the SETTINGS > TITLE tab. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/hJzssUvXQnyzfwXF6wUW", "Video+title.png", "303", "237", "#82afd0", "" ] } ] } [/block] ## Video Playback Options * Select *Automatically start playing video* under the SETTINGS > PLAYBACK tab in the Inspector to play your video once the webpage loads. This section also allows you choose how many times your video will replay through the options: Loop Forever or Loop Count. * Choose Loop Count if you want your video to play a specific number of times. * Choose Loop Forever if you want your video to play on repeat until the user leaves the page. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/5iZAjKfmTXqMsKia30bw", "video-playback-settings.png", "238", "176", "#88adc8", "" ] } ] } [/block] * Choose whether to display video controls under the SETTINGS > PLAYBACK tab. * Select Show Controls always to display Play, Pause, and Volume options under your video at all times. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/iT4dQrhkRGq2SbwmoVxE", "video-show-controls.png", "310", "35", "#d0d0cf", "" ] } ] } [/block] * Select *Show Controls on hover* to display Play, Pause, and Volume options under your video only when the user mouses over the ad * Select *Show Controls never* to take away all Pause and Volume controls. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/mRcBpWDYQnhVzo0Ydnnk", "video-playback-controls.png", "309", "156", "#4173f5", "" ] } ] } [/block] * You can preview these changes by clicking on the Preview Mode button (looks like an eye), towards the top-left corner. To return to Edit Mode, click on the pencil, the first of the three buttons. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/4AmIuQzSAyJsejhBzbFg", "video-preview-button.png", "174", "50", "#fc2404", "" ] } ] } [/block]