Flurry
Events Products Customers Blog My Apps

Example Templates

Below are a collection of HTML Ad Templates you can either copy and paste directly into your ad template or use as a base for your own custom template.

Please Note:

  • Unless specified the images are static sizes
  • Image dimensions can be changed as needed, but remember to look out for any minimum height values implemented elsewhere in the sample code.
  • Remember any changes to the Ad Template will take roughly 45 minutes to take effect

Large Card

Large Card
  • originalHeight: 261
  • originalWidth: 500
<div style="width: 500px; min-height: 320px; padding: 0px; clear: both; background-color: transparent; border: 1px solid rgb(192, 192, 192); border-radius: 5px; position: relative !important; text-align: center !important; margin: auto !important;">
  <div class="yap_img" style="position: relative !important;">
    <a href="{click_url}" target="_blank" style="display: block; color: #FFF;">
          <img src="{image}" style="background-size: cover !important; width: 100% !important; height: 261px !important;" alt="{title}">
          <p class="yap_ad_spnsrd" style="font-size: 14px; position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,0.3); padding: 5px; margin: 0 14px 8px 0;">Sponsored: {sponsor}p>
        a>
  div>
  <div class="yap_ad_txt" style="width: 95%; margin: auto; text-align: center;">
    <a href="{click_url}" target="_blank" style="display: block !important; color: #000; text-decoration: none;">
      <h2 style="margin-bottom: 0; font-weight: bold; font-size: 20px; text-align: center;">{title}h2>
      <p style="margin: 0;">{description}p>
    a>
    <div style="text-align: right; position: absolute; top: 12px; right: 15px;">{gemini}div>
  div>
div>

Flexbox Banner with Button

Flexbox Banner with button
  • Image Height: 156
  • Image Width: 300
<div class="yap_container" style="display: flex; flex-wrap: nowrap; align-items: flex-start; align-content: center; justify-content: flex-start; background-color: #EEEEEE; margin-bottom: 10px; clear: both; padding: 10px;">
  <div class="yap_image" style="flex: auto;"><a href="{click_url}" style="text-decoration: none; color: #000;"> <img src="{image}" style="background-color: transparent; height: 156px; width: 300px; background-size: cover !important;">a>div>
  <div
    class="yap_text" style="width: 100%;padding: 0 10px;">
    <a href="{click_url}" style="text-decoration: none; color: #000;">
      <p style="font-size: 11px; color: #4D90FD; padding: 0; margin: 0 0 5px 0;"><span style="float: right;">{gemini}span>Sponsored by {sponsor}p>
      <h2 style="margin: 0 0 5px 0; padding; 0;">{title}h2>
      <p>{description} p>
      <p style="display: inline; background-color: #4D90FD; color: white; padding: 10px; line-height: 40px; border-radius: 5px">Visit Sitep>
    a>
div>
div>

Small Banner with Button

Banner with Variable Image Width
  • originalHeight: 77
  • originalWidth: 100
<div>
  <a href="{click_url}" target="_blank" style="background-color: rgb(238, 238, 238); position: relative; display: block; text-decoration: none; color: #000; min-height: 77px;">
      <img src="{image}" alt="{title}" style="float: left; background-size: cover !important; margin-right: 10px;">
      <div>
      <div  style="padding: 2px;"><span style="font-size: 12px; margin: 0 25px 0 4px;">Sponsored by <span style="color: #E45F32">{sponsored}span>span>div>
      <div style="padding: 4px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{title}
      div>
      <div style="padding: 2px;"><span style="text-transform: uppercase; background-color: #E45F32; border-radius: 5px; padding: 2px 5px; text-align: center; color: #FFF; text-decoration: none;">Visit Sitespan>div>
      div>
      <div style="position: absolute; top: 2px; right: 2px;">{gemini}div>
    a>div>
<div style="clear: both">div>

Small Banner (300 x 50)

Small Banner
  • originalHeight: 50
  • originalWidth: 50
<div style="width: 300px; height: 50px; padding: 0px; clear: both; background-color: transparent; border: 1px solid rgb(192, 192, 192); border-radius: 5px; position: relative !important; overflow: hidden;">
  <div class="yap_img" style="position: relative !important; float: right;">
    <a href="{click_url}" target="_blank" style="display: block; color: #FFF;">
              <img src="{image}" style="background-size: cover !important; width: 50px !important; height: 50px !important; margin-left: 5px;" alt="{title}">

            a>
  div>
  <div class="yap_ad_txt" style="padding: 5px;">
    <a href="{click_url}" target="_blank" style=" color: #000; text-decoration: none;">
      <h2 style="padding: 0; margin: 0; font-weight: bold; font-size: 14px; text-align: left; width: 235px; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{title}h2>
      <p style="margin: 0; padding-top: 5px; font-size: 12px; width: 215px; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">Ad: {sponsor}p>
      <div>
      div>
    a>
    <div style="text-align: right; position: absolute; bottom: 3px; left: 225px;">{gemini}div>
  div>
div>
<div style="clear: both">div>

Small Banner (300 x 100)

Small Banner
  • originalHeight: 0
  • originalWidth: 0
<div style="position: relative; width:300px !important; height:75px !important; border: 1px solid black; clear: both;">
  <div>
    <figure style="float:left; margin: 0 10px 0 0;">
      <a href="{click_url}" style="display:block;" target="_blank"><img src="{image}" style="background-size: cover !important; height: 75px !important;" alt="{title}">a>
    figure>
    <h4 style="text-align:left; margin:0 !important; line-height: 15px !important;"><a href="{click_url}" style="text-overflow: ellipsis; font-size:14px !important; color:#000; text-decoration: none;"
        target="_blank">{title}a>h4>
  div>
  <div style="right: 0px; bottom: 0px; position: absolute; z-index: 2; font-size: 11px; color: #555; margin: 0 !important; padding: 0 !important; border: 0 !important;">{gemini}div>
  <div style="margin-top:10px; right: 0px; bottom: 0px; text-align:left; font-size: 11px; color: #555;"><span class="sponsor-text">Sponsoredspan> <b>{sponsor}b>div>
div>

Card - variable width

Card with variable Width
  • originalHeight: 260
  • originalWidth: 0
<div style="background-color: #f0f1f1; position: relative; padding: 15px; width: 100%; box-sizing: border-box; clear: both;">
  <div><a href="{click_url}" target="_blank" style="display:block;"> <img alt="{title}" src="{image}" data-gemini-imgtype="default" style="background-position: top  center !important; background-size: cover !important; width:100% !important;"> a>div>
  <h1 style="font-size: 10px; margin-bottom: 10px; padding: 0; margin-top:5px; line-height:24px;"><a href="{click_url}" style="text-decoration:none; color: inherit; font-size: 24px; line-height: 24px; text-overflow: ellipsis;"
      target="_blank">{title}a> h1>
  <div style="right: 10px; bottom: 10px; position: absolute; z-index: 2; font-size: 11px; color: #555; margin: 0 !important; padding: 0 !important; border: 0 !important;">
    {gemini} div>
  <div style="font-size: 14px;"><span class="sponsor-text">Byspan> {sponsor}div> <span style="position:absolute; top:5px; left:5px;color:#fff; background-color:#000; padding:2px;">Sponsoredspan>div>
<div style="clear: both;">div>

Basic Card (responsive)

Example on small screen device

Card with variable Width on small screen device

Example on large screen device

Card with variable Width on large screen device
  • originalHeight: 0
  • originalWidth: 0
<div style="position: relative; padding: 0; background-color: #fff; text-align: center; margin: 10px 0;">
  <div style="max-width: 350px; margin: auto;">
    <a href="{click_url}" target="_blank" style="text-decoration: none; display: block !important;">
      <div style="position: relative;">
        <img src="#" alt="{title}" style="background-size: cover !important; max-height: 320px;">
        <p style="position: absolute; bottom: 0; right: 0;background: rgba(0,0,0,0.3); padding: 5px 15px; margin: 5px 0; color: #fff; font-size: 14px">Ad by {sponsor}p>
      div>
      <div style="padding: 10px;">
        <h2 style="color: #000; padding: 0 0 10px 0; margin: 0;">{title}h2>
      div>
    a>
  div>
  <div style="position: absolute; top: 5px; right: 18px;">{gemini}div>
div>

App Style Card - Responsive

Example on small screen device

app style Card with variable Width on small screen device

Example on large screen device

App style Card with variable Width on large screen device
  • originalHeight: 0
  • originalWidth: 0
<div style="position: relative; padding: 0; width: 100%; display: block; margin: 10px 0;">
  <div style="box-sizing: border-box;max-width: 500px; margin: auto;background-color: rgba(238, 238, 238, 0.4); padding: 10px;">
    <div style="float: right; padding: 0;">{gemini}div>
    <a href="{click_url}" target="_blank" style="text-decoration: none; display: block;">
      <h2 style="font-size: 18px; border-bottom: 1px solid #000; padding: 0 0 5px 0; margin:0; line-height: 20px; color: #000;">{title}h2>
      <p style="font-size: 14px; color: #60697E; padding: 10px 0 10px 0; margin:0;">Ad by: <span style="font-weight: bold">{sponsor}span>p>
      <img src="{image}" alt="{title}" style="background-size: cover !important; max-height: 320px;"> a>
  div>
div>

MPU style Card - Responsive

Example on small screen device

MPU style Card with variable Width on small screen device

Example on large screen device

MPU style Card with variable Width on large screen device
  • originalHeight: 0
  • originalWidth: 0
<div style="position: relative; background-color: #fff; max-width: 500px; margin: auto;"> <a href="{click_url}" target="_blank" style="text-decoration: none; color: #000;">
    <img src="{image}" alt="{title}" style="background-size: cover !important; max-height: 320px;">    <div style="position: absolute; bottom: 0; right: 0;">
      <h2 style="background: rgba(0,0,0,0.3); padding: 5px 15px; margin: 5px 0; color: #fff; font-size: 16px;">{title}h2>
      <p style="font-size: 14px; background: rgba(0,0,0,0.3); padding: 5px 15px; margin: 5px 0; color: #fff;">Ad by: <span style="font-weight: bold">{sponsor}span>p>
    div>  a>
  <div style="position: absolute; top: 5px; right: 5px;">{gemini}div>
div>
Feedback