Creator ads pair a portrait poster with a short silent clip in one creative. The widget shows them in a carousel; the clip only loads when a visitor points at the card.
You don't have to design anything: pick one of the ready-made layouts in the zone's Code tab and paste the code. Every widget below is a live zone on a demo account with 15 made-up advertisers.
Portrait cards in a sliding carousel, like a row of short videos, with a round avatar and two lines of text under each clip. This is the ready-made Caption below layout, picked in the zone's Code tab: the text takes the page's own colour, so it works on dark sites too. Point at a card (or tap it on a phone) and its clip plays, muted and looping.
Watch next
Point at a card to play its clip. Use the arrows or swipe to browse.
<!-- once per page, in <head> -->
<script src="https://g2.gsrv.dev/ctrl/19460.js"></script>
<!-- where it goes -->
<style>
#id_12512495 .gcl, #id_12512495 .gcl *{box-sizing:border-box}
#id_12512495 .gcl{font:13px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
#id_12512495 .gcl-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;word-break:break-word}
#id_12512495 .gcl-ad{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.65}
#id_12512495 .gcl-av{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;margin:0}
#id_12512495 .gcl-cap{display:flex;align-items:flex-start;gap:8px;padding:8px 2px 2px}
#id_12512495 .gcl-cap .gcl-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
</style>
<div id="id_12512495" style="height:100%; max-height:350px;"></div>
<script>
goCtrl.add({"plugin":"creator_widget","sid":12512495,"display":"id_12512495",
"settings":{
"max-items":10
},
"tpl_item":'{media}<div class="gcl gcl-cap"><img class="gcl-av" src="{image}" alt=""><span class="gcl-txt"><span class="gcl-desc">{description}</span><span class="gcl-ad">Sponsored</span></span></div>'
});
</script>The text sits over the bottom of each clip on a dark fade, so the tiles stay as compact as the clips: good for a narrow sidebar. The ready-made Text on the clip layout.
Sponsored
<!-- once per page, in <head> -->
<script src="https://g2.gsrv.dev/ctrl/19460.js"></script>
<!-- where it goes -->
<style>
#id_12512496 .gcl, #id_12512496 .gcl *{box-sizing:border-box}
#id_12512496 .gcl{font:13px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
#id_12512496 .gcl-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;word-break:break-word}
#id_12512496 .gcl-ad{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.65}
#id_12512496 .gcl-av{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;margin:0}
#id_12512496 .gcl-ov{position:relative;border-radius:10px;overflow:hidden}
#id_12512496 .gcl-ov .item{border-radius:0}
#id_12512496 .gcl-ovt{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:3px;padding:44px 10px 10px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.82));color:#fff;pointer-events:none}
#id_12512496 .gcl-ovt .gcl-ad{opacity:.8}
</style>
<div id="id_12512496" style="height:100%; max-height:350px;"></div>
<script>
goCtrl.add({"plugin":"creator_widget","sid":12512496,"display":"id_12512496",
"settings":{
"max-items":10
},
"tpl_item":'<div class="gcl gcl-ov">{media}<span class="gcl-ovt"><span class="gcl-ad">Sponsored</span><span class="gcl-desc">{description}</span></span></div>'
});
</script>Each clip in a light card with two lines of text, the advertiser's link and a Sponsored label. The ready-made Card layout, best on light pages.
Creators we like
<!-- once per page, in <head> -->
<script src="https://g2.gsrv.dev/ctrl/19460.js"></script>
<!-- where it goes -->
<style>
#id_12512638 .gcl, #id_12512638 .gcl *{box-sizing:border-box}
#id_12512638 .gcl{font:13px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
#id_12512638 .gcl-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;word-break:break-word}
#id_12512638 .gcl-ad{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.65}
#id_12512638 .gcl-av{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;margin:0}
#id_12512638 .gcl-card{background:#fff;color:#1d1b33;border:1px solid #e6e5ee;border-radius:12px;overflow:hidden}
#id_12512638 .gcl-card .item{border-radius:0}
#id_12512638 .gcl-body{display:flex;flex-direction:column;gap:6px;padding:8px 10px 10px}
#id_12512638 .gcl-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;contain:inline-size}
#id_12512638 .gcl-url{font-size:11px;color:#8a88a0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#id_12512638 .gcl-card .gcl-ad{flex:none;opacity:1;color:#8a88a0}
</style>
<div id="id_12512638" style="height:100%; max-height:350px;"></div>
<script>
goCtrl.add({"plugin":"creator_widget","sid":12512638,"display":"id_12512638",
"settings":{
"max-items":10
},
"tpl_item":'<div class="gcl gcl-card">{media}<div class="gcl-body"><span class="gcl-desc">{description}</span><span class="gcl-meta"><span class="gcl-url">{displayurl}</span><span class="gcl-ad">Sponsored</span></span></div></div>'
});
</script>Just the clips with a small Sponsored label: the poster and its video do all the work. Here on a dark page, the way creator widgets often run.
<!-- once per page, in <head> -->
<script src="https://g2.gsrv.dev/ctrl/19460.js"></script>
<!-- where it goes -->
<style>
#id_12512639 .gcl, #id_12512639 .gcl *{box-sizing:border-box}
#id_12512639 .gcl{font:13px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
#id_12512639 .gcl-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;word-break:break-word}
#id_12512639 .gcl-ad{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.65}
#id_12512639 .gcl-av{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;margin:0}
#id_12512639 .gcl-min{padding:5px 2px 0}
</style>
<div id="id_12512639" style="height:100%; max-height:350px;"></div>
<script>
goCtrl.add({"plugin":"creator_widget","sid":12512639,"display":"id_12512639",
"settings":{
"max-items":10
},
"tpl_item":'{media}<div class="gcl gcl-min"><span class="gcl-ad">Sponsored</span></div>'
});
</script>Every format on this page is part of the GoAdserver ad server. Talk to us about your platform.
Contact us