这就是您最喜欢的企业使用网站弹出窗口发展的方式(您也可以!)

已发表: 2020-04-02

有两种人。

那些喜欢网站弹出窗口的人,以及那些讨厌它们的人。

第一组知道网站弹出窗口的效果是多么可笑。 第二组觉得他们可笑地烦人。

但是一个好的网站弹出窗口和一个坏的弹出窗口之间的真正区别是什么?


通过查看数百个,我们得出了以下结论。 这一切归结为三件事:

  • 这些弹出窗口的外观

  • 他们提供什么价值

  • 他们什么时候出现

我的意思是,是的,一些弹出窗口很烦人,令人讨厌,丑陋的体验中断者。

但那是因为它们的设置方式错误。

例如,看看耐克网站上这个惊人的弹出窗口:

耐克网站上的网站弹出窗口宣布全场促销

有人会说它令人讨厌或烦人吗?

我也是这么想的。

耐克弹出窗口看起来很优雅并且提供了价值(在结账时自动应用折扣,是的!)。 而且它肯定也不会中断体验。 如果有的话 - 它是它的一个组成部分。

有数以千计的大型知名公司成功地使用网站弹出窗口来收集电子邮件、宣布销售和显示号召性用语。 以《纽约时报》、阿迪达斯、《卫报》、《世纪 21》或 Slack 为例——这个名单可以继续下去!

那么,为什么不向最好的人学习并应用他们的方法来发展您的业务呢?

您可能认为您需要开发人员或这些大公司的预算来为您的网站添加具有专业外观的弹出窗口。 嗯,这不是真的。

在这篇博文中,我们将向您展示 15 个网站弹出窗口示例,这些示例被各种细分市场中的一些最知名企业使用。 我们还将向您解释为什么每个弹出窗口都如此有效。

最好的部分? 我们将准确地向您展示如何使用 Getsitecontrol 在几分钟内在您的网站上重新创建它们。

为了帮助您导航,我们将列表分为 3 类。 您即将看到有助于以下内容的网站弹出窗口:

  • 获取电子邮件订阅者

  • 显示号召性用语

  • 宣布任何更新

随意跳到您最感兴趣的类别。

帮助品牌建立电子邮件列表的网站弹出窗口

现在每个人都为增加他们的电子邮件列表而疯狂。 你也应该如此!

万一您错过了,电子邮件每花费 1 美元就有高达 44 美元的投资回报率。

让人们在您的电子邮件列表中意味着您拥有在他们的收件箱中直接与他们会面、发展关系并将他​​们变成常客的独家许可。

等等,但是增加电子邮件列表的最佳方法是什么? 我打赌你已经知道答案了。

这是网站弹出窗口。

让我们看看您肯定听说过(甚至可能购买过)的品牌如何使用弹出窗口来收集电子邮件地址。

1. The New York Times store – 第一次下单立减 10%

《纽约时报》是最早发展成为付费订阅在线媒体的媒体之一。

今天,这是访问量最大的报纸网站。 他们将网站弹出窗口用于各种目的。

例如,看看这个极简的电子邮件订阅表格,它会在您登陆《纽约时报》在线商店时立即出现。

纽约时报商店使用网站弹出窗口收集电子邮件

以下是使该网站弹出窗口很棒的原因:

  • 有凝聚力的设计
    弹出窗口与纽约时报商店的其余部分具有相同的颜色主题和相同的字体。 它似乎是网站不可或缺的、可信的部分。

  • 铅磁铁
    您不仅可以订阅新优惠,如果您加入该列表,您的第一笔订单还可以获得 10% 的折扣。

  • 瞬间出现
    网站弹出窗口应该立即出现还是在访问者在页面上停留一段时间后出现总是不清楚。 在这种情况下,立即显示表单肯定比在潜在客户购买之后更好,不是吗?

想要向您的网站添加类似的订阅弹出窗口吗?

我们遵循《纽约时报》的创新精神来构建类似的订阅表格。 单击下面的网站弹出窗口以查看它的运行情况。 然后按照页面右侧显示的简单说明进行操作。

由 Getsitecontrol 提供支持的简约电子邮件列表构建弹出窗口 查看实时预览 →

实时预览模板将直接添加到您的 Getsitecontrol 仪表板。 从那里,您将能够调整折扣百分比、标题和颜色主题等细节,使其与您的网站完美匹配。

然后,您将能够使用定位设置以指定您希望弹出窗口出现的页面。

2. Century 21 – 解锁 25 美元折扣或支付全价

Century 21,这家折扣时尚零售巨头在几年前上线,也涉足电子邮件列表建设游戏。 查看在您到达他们的网站后几秒钟显示的弹出窗口。

Century 21 在其弹出窗口中使用了一个否定的退出按钮

以下是此网站弹出窗口的优点:

  • 电子邮件格式缩微
    Century 21 选择指定电子邮件地址的外观以确保客户正确使用。 知道他们的受众非常广泛,包括不一定精通技术的人,这是一个很好的决定。

  • 否定的退出按钮
    当然,如果您不想注册,则不必注册。 但这意味着您愿意支付全价,对吗? 选择退出按钮是一个小细节,让您在拒绝报价之前三思而后行。

  • 智能选择颜色
    请注意,此弹出窗口的颜色不仅与网站的主题相关,而且“继续”按钮也用红色强调。 同时,选择退出按钮与背景融为一体。

想要一个带有选择退出按钮的弹出窗口吗?

如果您喜欢这个网站弹出窗口,重新创建它就像 1-2-3 一样简单。 只需单击下面的模板并按照说明进行操作。

Getsitecontrol 带有按钮的电子邮件订阅弹出窗口 查看实时预览 →

进入仪表板后,通过内容如果需要,可以设置来调整副本和颜色主题。 以 Century 21 为例,您可能还想将您的徽标添加到顶部。

3. 玛丽克莱尔——FOMO 效应在起作用

如果您认为否定选择退出按钮可能仅适用于在线商店,请再想一想。

当您通过电子邮件提供高质量的内容时,您不妨提醒人们不订阅的后果。 看看玛丽克莱尔杂志如何在他们的选择退出按钮上使用 FOMO 效果。

玛丽克莱尔提供铅磁铁以换取订阅

这是我们喜欢这个网站弹出窗口的地方:

  • 否定的退出按钮
    除了 FOMO 效应,请注意 Marie Claire 如何将选择退出按钮变成自爱声明。

  • 电子邮件注册 CTA 副本
    您可以在注册按钮上放置许多激励性的号召性用语,而不仅仅是“订阅”。 “给我看看里面有什么!” 是其中之一。

  • 图像的选择
    在这种情况下,它不仅仅是任何图像。 这是西尔莎·罗南(Saoirse Ronan)的照片,大多数读者肯定会认出她是一位才华横溢的女演员。

为什么图像在这里如此重要?

拥有与订阅者期望相关的视觉效果对于提高电子邮件注册率至关重要。 因为他们不只是订阅一些发型趋势。 他们订阅了在红地毯上看起来像好莱坞明星的秘诀。

认为您可能想要一个像这样的网站弹出窗口吗?

Getsitecontrol 弹出式构建器有一个模板,可以帮助您轻松地重新创建上面的示例。 看看下面。

一个网站弹出模板,其中一张图片占据了一半的空间 查看实时预览 →

将其添加到仪表板后,您将能够轻松地将图像替换为您的视觉对象或从图库中选择替代图片。

4. Adidas – 订阅电子邮件可享受 15% 的折扣

阿迪达斯为新订阅者提供 15% 的折扣,并在您在他们的网站上停留一段时间后显示一个弹出窗口。

阿迪达斯的网站弹出窗口带有同意复选框

现在,这是阿迪达斯网站弹出窗口的特别之处:

  • 底部的缩微文案为了减轻您对被无关电子邮件发送垃圾邮件的恐惧,阿迪达斯准确指定了您订阅的内容。

  • 年龄确认复选框根据儿童在线隐私保护法 (COPPA),每个订阅者都必须确认他们已年满 13 岁 此复选框还可用于收集明确同意以接收营销电子邮件。

  • 基于性别的细分根据您的回复,阿迪达斯稍后将应用细分规则向您发送最相关的内容。 但是,考虑到阿迪达斯生产的性别中立商品的数量,将此字段设置为可选也是明智之举。

  • 订阅确认注册后,您会看到一条所谓的“提交成功消息”,告诉您会发生什么。

阿迪达斯网站上的表单提交成功信息

这里的另一种选择是显示折扣代码,供人们在结账时复制和粘贴。 这样,他们无需离开商店打开电子邮件就可以继续购物。

5. Ahrefs – 不要错过下一篇文章

让我们继续进入 IT 世界。

Ahrefs 是著名的 SEO 软件开发商,它使用这个可爱的幻灯片建议您在到达博客文章末尾时订阅他们的时事通讯。

Ahrefs 使用一个很小的侧滑来显示电子邮件注册表单

这是它的伟大之处:

  • 不同的格式
    与模态弹出窗口不同,幻灯片不那么突兀,但足够吸引人注意。 对于您希望尽可能流畅地保持阅读体验的内容项目,它们可能是一个完美的选择。

  • 页面行为触发器
    该表单仅在您到达博客文章末尾时出现。 这是建议订阅的最佳时机,因为参与度很高。

  • FOMO 原则
    如果您看完了 Ahref 的一篇长篇阅读文章,那么您很可能会喜欢它。 而且你不想错过另一部像这样的伟大作品。

想在您的网站上添加类似的幻灯片吗?

重新创建此订阅表单很容易。 我们已经构建了一个类似的右侧滑入式,因此您可以快速将其安装到您的网站上。

Getsitecontrol 的电子邮件订阅幻灯片模板 查看实时预览 →

单击小部件以查看其运行情况并按照说明进行操作。

准备好后,使用定位设置以选择网站上您希望幻灯片出现的特定页面以及它应该出现的时间。

6. Product Hunt – 订阅每日时事通讯

Product Hunt 是最大的在线社区之一,每天都会推出令人惊叹的科技产品。 那些没有时间每天去查看网站的人可以通过电子邮件订阅获得最重要的更新摘要。

为了增加订阅数量,Product Hunt 在页面底部有一个浮动的电子邮件注册栏。

Product Hunt 使用浮动电子邮件选择栏来收集电子邮件

以下是此订阅表格的优点:

  • 尽量减少分心
    浮动栏是所有网站弹出窗口中最不引人注目的。 当您滚动内容时,它们会停留在网页的顶部或底部,并耐心等待您准备好订阅。

  • 通讯频率
    该副本准确地告诉您从 Product Hunt 收到电子邮件的频率。

  • 正宗的设计
    表情符号和按钮颜色是 Product Hunt 的标志性元素。 在表单中使用它们是一个很好的决定。

想要自己的浮动电子邮件注册栏吗?

您可以向您的网站添加类似的小部件并在整个站点或特定页面上显示它。 使用下面的现成模板开始。

Getsitecontrol 带有电子邮件字段的简单浮动栏 查看实时预览 →

该模板的副本和设计非常通用,因此请随时在您的网站上直接使用它。

网站弹出窗口显示您的号召性用语

是时候进入下一个类别了!

公司使用网站弹出窗口的第二个重要原因是鼓励访问者获得折扣、查看新博客文章、参与赠品——换句话说,采取行动

让我们看看现实生活中的企业是如何做到这一点的。

7. Century 21 – 出发前享受折扣

如果您开始浏览 Century 21 在线商店,您需要有极大的意志力,并抵制在每个角落获取特价商品的冲动。

首先,他们要求您订阅以换取 25 美元的优惠券。 然后,如果您想在没有购买的情况下离开,您会看到以下网站弹出窗口:

Century 21使用退出意图技术提供折扣

如果您点击“是的,请!” 按钮,优惠券代码显示在弹出窗口的右侧。 您可以复制代码并在结账时粘贴。 简单的。 有效的。

这就是退出意图方法如此有效的原因:

  • 注意力保证
    当您导航退出时,绝对不会错过出现在您眼前的折扣优惠。

  • 最后一招
    退出意图弹出窗口实际上为您提供了转换即将离开的人的独特机会。 当然,并不是每个放弃的访客都会回应。 但他们中的一些人会——而且每一次努力都很重要,对吧?

想要在您的网站上放置一个退出意图弹出窗口吗?

查看下面的模板。 它已经设置为在您的访问者开始导航以退出页面时显示。

Getsitecontrol 提供折扣优惠的退出意图弹出模板 查看实时预览 →

只需单击几下即可将其放置到您的网站,然后转到定位设置来指定它应该弹出的页面。 例如,您可能希望将其放置在产品页面、类别页面甚至结账处,以防止放弃购物车。

8. Skillshare – 推荐计划促销

Skillshare 是一个在线学习平台,它正在运行一个推荐计划,让您可以通过邀请朋友来获得几个月的免费课程。 请注意他们放置在每个页面顶部的浮动栏。

Skillshare 使用顶部浮动栏来推广他们的推荐计划

Skillshare 在这里做了什么:

  • 对比色
    Skillshare 选择白色是因为考虑到深蓝色网站颜色主题,它会吸引注意力。

  • 足够的细节
    尽管空间不足,但该副本为您提供了足够的信息来决定您是否感兴趣。

  • 清除 CTA 按钮
    “邀请朋友”按钮设定了明确的期望。 它会将您带到专用页面,您可以在其中了解详细信息并获取推荐链接。

9. 纽约时报——立即阅读重要更新

如果您的项目专注于内容,您可以使用弹出窗口来宣传博客上的最新文章、选定主题的重要更新或仅相关材料。

例如,这就是《纽约时报》如何促使读者关注 COVID-19 爆发的实时更新。

《纽约时报》安装了一个浮动栏,以吸引对重要新闻的关注

网页底部的号召性用语栏被各种媒体用于各种目的。 只需查看我们的下一个示例,该示例具有类似外观的弹出窗口。

10. 卫报——今天就支持卫报

与《纽约时报》不同的是,《卫报》选择将所有材料开放获取,而读者可以通过捐款的形式参与为报纸提供资金。 查看他们如何使用页面底部的弹出窗口传达此消息。

卫报使用黄色粘性条鼓励游客捐款

想在您的网站上使用类似的弹出窗口吗?

当你想把重点放在信息上时,显然,这些粘滞条是完美的注意力吸引器。 如果您想向您的网站添加一个模板,请查看下面的模板。

Getsitecontrol 的底部粘性栏模板 查看实时预览 →

将其添加到 Getsitecontrol 仪表板后,转到内容选项卡并打开按钮设置以放置指向所需页面的链接。

网站弹出窗口发布全站公告

最后一类网站弹出窗口旨在通知访问者而不是鼓励他们采取行动。

如果您想让您的受众了解最新的新闻和当前条款,网站弹出窗口是完美的选择。

您可以使用它们来宣传业务运营变化、当前优惠或新政策——例如 cookie 同意政策。

让我们来看看 Reebok、Tiffany、Nespresso、Intercom 和 Slack 如何处理这种类型的通信。

11. Reebok – 全场销售公告

为确保登陆其网站的每个人都了解全场促销,锐步在网页顶部放置了一个浮动公告栏。

Reebok 宣布在页面顶部使用黑色粘性条进行全场促销

此公告不需要网站访问者的任何操作。 您可以将其视为一个不错的惊喜和继续浏览商店的动力。

12. Tiffany & Co. – 免费服务提醒

以下是 Tiffany & Co. 通知在线商店访问者所有订单均可免费送货和退货的方式。 他们在网页顶部使用标志性的蒂芙尼蓝色浮动条。

Tiffany & Co 为粘性公告栏选择了他们的标志性颜色

如果您有网站主题的颜色代码,则可以在弹出窗口中使用它们外观/CSS 设置来创建一个完美匹配的公告栏,就像蒂芙尼的一样。

13. Nespresso – 可能的交货延迟公告

最后一个浮动条示例属于 Nespresso 网站。 他们通过通知在线客户延迟交货来提醒他们。

Nespresso 使用粘性标准通知客户交货延迟

同样,您可能已经注意到浮动条的颜色不是随机选择的——它与下面的“搜索”按钮完美匹配。

想要重新创建这些网站弹出窗口吗?

为了通过简短但重要的信息吸引观众,浮动条非常棒。 要将一个添加到您的网站,只需单击下面的模板,然后编辑副本。

Getsitecontrol 提供简约的置顶公告栏模板 查看实时预览 →

随意将颜色更改为在您的网站上看起来更好的颜色。 颜色主题可在外貌Getsitecontrol 仪表板的选项卡。

14. Slack – cookie 同意横幅

我们列表中的最后两个示例是 cookie 横幅。

您可能知道,从 2018 年开始,每个接收欧盟访问者的网站都需要获得他们的知情同意,才能使用跟踪用户数据的 cookie。

这就是 Slack 网站上的 cookie 消息的样子。

Slack 使用网站弹出窗口显示 cookie 同意消息

Slack 选择使用右侧滑入式链接到 cookie 同意政策并在单击时关闭。

如果您想放置一个类似的,请使用下面的模板。

Getsitecontrol 允许您安装和自定义 cookie 横幅 查看实时预览 →

您可以按原样将此弹出窗口添加到您的网站,或者您可以将指向您的 Cookie 政策页面的链接插入小部件副本,就像 Slack 所做的那样。

15. 对讲机 – cookie 同意贴

Intercom 是一家流行的消息平台开发商,它选择在网页顶部使用不那么显眼的粘性栏来通知访问者有关 cookie 政策的信息。

对讲机选择在浮动栏上显示 cookie 通知

如果您更喜欢此选项,请继续并单击此处检查 cookie 同意栏的 Getsitecontrol 模板。

准备好使用网站弹出窗口来发展您的业务了吗?

如果您一直好奇网站弹出窗口是否有助于发展您的业务——今天就是找出答案的一天。

不知道从什么开始?

以下是我们最受欢迎的 3 个网站弹出窗口:

  • 电子邮件订阅表格,

  • cookie 同意横幅,

  • 特价促销。

使用 Getsitecontrol 选择与您的业务最相关的一个(或一次将所有这些添加到您的网站)并免费试用。

您正在阅读 Getsitecontrol 博客,其中营销专家分享经过验证的策略来发展您的在线业务。 本文是客户参与部分的一部分。

订阅我们的时事通讯 → Icons8 的主要插图