Using Overlays to Get More Conversions


Published on

Learn why modal overlays can help you drive more conversions from any web page (and how to build them yourself!)

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Thanks Steph!

    Welcome everybody, my name is Angus and I’m a Conversion Optimizer here at Unbounce, and sitting to my right is Matt Shepherd who’s a launch specialist at Unbounce.

    We’re really excited to have you with us today… partly because we’re both heavily caffeinated...but mostly because this is the first time Unbounce has done any kind of presentation on using overlays.

    We’ve been experimenting with this technology for the past 2 ½ years, so much of today’s presentation will be based on these experiences.
  • We’re gonna move pretty quickly today because we want to cover these three questions in quite a bit of detail

    Start with the basics
    Halfway through Matt is going to jump in and show you how to build and publish your own overlays
    After that I’m going to show you how to build overlays that drive conversions, so the difference between a successful overlay and an overlay that goes largely ignored by your visitors.
  • Unbounce has been experimenting with overlays for 2 ½ years on our blog posts and campaign landing pages.

    Since then we’ve had 1.81 unique sets of eyeballs interact with our overlays.

  • All this led up to our launch last month a Convertables…a tool that…

    And you’ll get the chance to see this tool in action during Matt’s demonstration.
  • Overlays are designed to eliminate distractions and focus attention on a single offer… so you could argue they’re like a mini landing page in some respects.
  • Now I know what you’re thinking… isn’t that just a popup? No “Wait, isn’t that just a popup?”

  • First off, the structure is totally different. Overlays are centered in the middle of the browser, not over top in a new window.

    Those are some pretty old school examples on the right that you probably don’t see much anymore. I think Tiger was still winning majors the last time those were shown, but regardless…
  • …which leads to my next point…
  • So if you’re ever shopping for winter jackets and you get blasted by something selling you some scammy Dr. Oz stuff about a pill that’s gonna magically regrow your hair, that’s a popup…not an overlay.
  • And finally overlay is targeted based on browsing history and visitor actions, while a pop-up basically hunts you around the internet like a wild animal. If you visit a page,
    You’re gonna see the popup no matter how many times you’ve closed it.
  • Across any industry…
  • Capturing sales from users who wouldn’t otherwise make a purchase.
  • Here’s a great example of a nice clean overlay that gets it message across quickly.
    - good contrast
    - Concise copy
  • Average is just under 2%, but much of this depends on the value of your offer.

    And when I say “conversion rate” I don’t just mean clicking the overlay.

    I mean they came, they clicked, and they converted to a paying customer.
  • The most common use of overlays., it almost always has a form.
  • Unbounce customer, Here’s a great example of lead gen done in a way that serves the goals of both the visitor and the marketer.

    If you know anything about wood stoves, you know installation costs are half the battle, the visitor saves time on the quote process, and the marketer gets to move the visitor further down the buying cycle.

  • Essentially means directing users from low-converting to high converting pages.
  • So Matt is going to quickly show you to build and publish your own overlays, but stay tuned because afterwards I’m going to show the difference between a high converting and a low converting overlay – and how you can apply it to your own campaigns. Take it away matt!
  • So why are triggers and targeting important? Overlays can dramatically increase your conversion rates.
  • There’s no magic or romance to this statement. It’s all about getting into the head of your visitors, and coming up with offers that would be truly valuable to them.
  • Value – We don’t wanna just repackage what was already on the page,

    UX – Finding triggers that activate at the right time.
  • -So much of establishing relevance and value comes down to where you place your overlays.
    -The biggest mistake you can make with overlays is placing them indiscriminately
    on all pages without considering the goals of the page, and the goals of your visitors.
  • - Ideal for high-traffic pages with low “buyer intent,” such as blogs and homepages

    - Never use them on pricing or cart/checkout pages… those visitors are too far along in the buying cycle!
  • -We learned this lesson the hard way.
    - We left it for far too long
    -There just isn’t enough value in generic “sign up for updates!” messaging
  • But we weren’t done making mistakes…

    Remember this example, I’m gonna come back to it.
  • So what did we do?
    - We did away with the generic offer of staying in the loop and offered something concrete
    - We assigned different overlays to different categories based on relevance.
  • - Ideal for pages with moderate to high buyer intent, such as product, pricing and checkout/cart

    - Typically shouldn’t be used on blog posts or articles… those users aren’t far enough in the buying cycle!
  • - Can be used on many types of pages, depending on your goal

    - Shouldn’t be used to move visitors backwards in the buying cycle, e.g. from a pricing page to your blog
  • Aand again back to this example.

    Again I’ll stress relevance here…
  • So as you saw in Matt’s demonstration there are 4 triggers available within Convertables, and there is also a frequency option.
  • That means it’ll be shown in the first few moments…
  • It will be shown after a delay of 5 – 20 seconds
  • It will be shown when an abandoning user is detected
  • It will be shown when a user scrolls a set number of pixels down the page
  • One of the biggest online events we ever did.
  • If there was a hall of fame for overlays, this one would get its jersey hung from the rafters.

    Do me a favor, if you ever see an overlay with a conversion rate as high as this, email me at, I’d love to hear how you did it.
  • So we covered a lot today, but if you can remember one thing…

    If you find a way to do this, I promise you’ll be rewarded.
  • So just before we finish off here…
  • In the meantime, check out this page. It contains a feature guide for convertables, and a best
    Practices guide that elaborates on what we’ve talked about in this webinar.
  • And finally, our overlay tool is called Convertables, and Convertables are now part of every Unbounce plan.

    So with Unbounce you can build and publish overlays yourself, and integrate them the with other tools in your marketing stack.
    And as an Unbounce user you can also build and publish custom landing pages yourself without any coding skills or help from developers.

    So once again, thanks so much for joining us today. Steph, how about we tackle some of these questions?
  • Using Overlays to Get More Conversions

    1. 1. @unbounce #unwebinar MATTHEW SHEPHERD Launch Specialist Unbounce Thanks for joining us! The webinar will begin shortly. ANGUS LYNCH Conversion Optimizer Unbounce OFF Join our chat on Twitter Using Overlays to Get More Conversions
    2. 2. @unbounce #unwebinar Stephanie Saretsky Multimedia Producer Unbounce OFF Join our chat on Twitter Using Overlays to Get More Conversions
    3. 3. Build Landing Pages Fast & Get More Conversions Unbounce helps marketers build and publish high-converting landing pages and website overlays. 1.888.515.9161
    4. 4. Today we’ll answer 3 questions. 1 What are overlays, and why should I use them? 2 How do I build overlays and publish them on my site? 3 How do I run overlays effectively (and responsibly)? @unbounce #unwebinar
    5. 5. In 2014, Unbounce began experimenting with overlays on blog posts and campaign landing pages. Since then, 1.81 million unique visitors have viewed Unbounce overlays. @unbounce #unwebinar Background
    6. 6. In November 2016, Unbounce launched Convertables — a conversion tool that allows marketers to drive leads, sales and signups by placing targeted overlays on any web page. @unbounce #unwebinar Background
    7. 7. What Are Overlays, And Why Should I Use Them?
    8. 8. Overlays are modal light boxes that open within a web page. @unbounce #unwebinar
    9. 9. Overlays focus attention on a single offer by greying out the background. @unbounce #unwebinar
    10. 10. Overlays are often mistaken for “pop-ups,” but there are key differences. @unbounce #unwebinar
    11. 11. @unbounce #unwebinar Overlays open within an existing window. Pop-ups open a new window.
    12. 12. @unbounce #unwebinar Overlays do not take control of the browser, or inhibit the navigation bar. Pop-ups take control of the browser and impede navigation.
    13. 13. @unbounce #unwebinar Overlays are controlled by site owners. 1 Must focus on relevant content 2 Must consider user experience Pop-ups are controlled by third-party advertisers. 1 Offers aren’t relevant 2 No consideration for UX
    14. 14. @unbounce #unwebinar Overlays are shown based on browsing history and visitor actions, while pop-ups are shown based on page visits.
    15. 15. Why Use Overlays?
    16. 16. Roughly 90-97% of visitors to any marketing website will not buy or sign up. @unbounce #unwebinar
    17. 17. @unbounce #unwebinar Overlays are used to drive conversions from this pool of visitors, i.e. convert visitors who otherwise wouldn’t buy or sign up.
    18. 18. You can use overlays for… 1 Revenue generation — Driving immediate sales 2 Lead generation — Capturing contact info/data 3 Traffic shaping — Directing users to high-converting pages @unbounce #unwebinar
    19. 19. Generating Revenue With Overlays
    20. 20. @unbounce #unwebinar Revenue Generation 1 A discount, giveaway or resource is offered to specific visitors (e.g. abandoning, idle). 2 Visitors are incentivized to make an additional purchase, or complete a pending purchase. 3 The marketer gets an additional conversion.
    21. 21. @unbounce #unwebinar Revenue Generation Travel site using an entrance overlay to highlight its best offers.
    22. 22. @unbounce #unwebinar What Can You Achieve?
    23. 23. Capturing Leads With Overlays
    24. 24. @unbounce #unwebinar Lead Generation 1 An overlay offers a deal, resource or opportunity in exchange for contact details. 2 When visitors convert, a confirmation screen is shown. 3 Leads are automatically sent to any email marketing tool, and stored within Unbounce (CSV).
    25. 25. Lead Generation Examples Gr8fires capturing leads by offering a free calculator. @unbounce #unwebinar
    26. 26. @unbounce #unwebinar What Can You Achieve?
    27. 27. Directing Traffic With Overlays (a.k.a. “Traffic Shaping”)
    28. 28. Traffic Shaping 1 A click-through overlay (no form) is placed on a high-traffic page. 2 The user is offered relevant products, services or content. 3 When visitors click, the chance of conversion increases. @unbounce #unwebinar
    29. 29. @unbounce #unwebinar Traffic Shaping Example Overlay on “conference” blog posts. CTA Conf Homepage.
    30. 30. @unbounce #unwebinar What Can You Achieve?
    31. 31. Building & Publishing Overlays
    32. 32. Using Convertables OFF
    33. 33. Using Overlays Effectively
    34. 34. Overlays are a powerful conversion tool, but when used improperly, they can negatively affect the user experience. @unbounce #unwebinar
    35. 35. Make offers that are relevant and valuable to your visitors — without harming the user experience. @unbounce #unwebinar
    36. 36. @unbounce #unwebinar What does that mean? 1 Relevance Using page targeting to show the right overlays on the right pages. 2 Value Finding offers that further your visitors’ goals (and yours!) 3 User Experience Picking triggers that show your overlays at the right time.
    37. 37. Relevance & Value
    38. 38. Where To Place Overlays
    39. 39. Placing Lead Gen Overlays
    40. 40. @unbounce #unwebinar Lacking Value Targeting Unbounce blog Duration 163 days Views 558,488 Conversions 8,194 Conversion rate 1.42%
    41. 41. @unbounce #unwebinar Lacking Relevance Targeting Unbounce blog Duration 14 days Views 43,456 Conversions 495 Conversion rate 1.11%
    42. 42. @unbounce #unwebinar Segmentation to the Rescue Targeting ”Conference” posts Views/Conversions 52,505 Conversion rate 3.82% Targeting “UX” blog posts Views/Conversions 17,001 Conversion rate 2.92%
    43. 43. Placing Rev Gen Overlays
    44. 44. @unbounce #unwebinar Relevance Targeting CTA Conf Homepage Duration 30 days Views 8,277 Conversions 343 Conversion rate 4.14%
    45. 45. Placing Traffic Shaping Overlays
    46. 46. @unbounce #unwebinar Traffic Shaping For CTA Conf Overlay on “conference” blog posts. CTA Conf Homepage.
    47. 47. @unbounce #unwebinar Relevance Targeting Unbounce blog Duration 16 days Views 9,280 Conversions 289 Conversion rate 3.11%
    48. 48. User Experience (Triggers & Frequency)
    49. 49. Best used for: • “Can’t miss” offers, events or opportunities • Returning visitors who may no longer notice your on- site calls to action On Arrival @unbounce #unwebinar Triggers
    50. 50. Best used for: • Relevant offers to users who have implied interest • Returning visitors who may no longer notice your on-site calls to action After Delay @unbounce #unwebinar Triggers
    51. 51. Best used for: • “Saving” potentially lost conversions (e.g. coupon code, shipping discount) • Capturing user details (leads) from abandoning visitors On Exit @unbounce #unwebinar Triggers
    52. 52. Best used for: • Expanding on offers below the fold • Content-heavy pages (blog posts) On Scroll @unbounce #unwebinar Triggers
    53. 53. Unbounce recommends showing overlays once per visitor. @unbounce #unwebinar Frequency
    54. 54. Putting it All Together
    55. 55. @unbounce #unwebinar Capturing Leads For Digital Agency Day • Virtual event held in January, 2016 • 30+ digital marketing experts • Online audience of 6,500+
    56. 56. @unbounce #unwebinar Exit Overlay on Homepage 1 Relevance Directly relevant content 2 Value Saving time + valuable content 3 User Experience Once per visitor, shown only to abandoners, disabled for users who completed forms
    57. 57. @unbounce #unwebinar Results Duration 22 days Views 10,463 Conversions 1,991 Conversions rate 19.02%
    58. 58. Make offers that are relevant and valuable to your visitors — without harming the user experience. @unbounce #unwebinar One Takeaway
    59. 59. Expect an email within 1 week @unbounce #unwebinar Recording + Slides
    60. 60. @unbounce #unwebinar More Convertables Information
    61. 61. Build Landing Pages Fast & Get More Conversions Unbounce helps marketers build and publish high-converting landing pages and website overlays. 1.888.515.9161