如何在您的网站上创建灯箱弹出窗口(逐步)

已发表: 2021-12-31

正在寻找一种为您的网站创建灯箱弹出窗口的方法?

灯箱弹出窗口对于捕获潜在客户非常有效。 它们旨在说服和转换。

但是必须从头开始编写代码是一种真正的痛苦。 一方面,您必须了解足够的 HTML、CSS 和 Javascript 才能创建弹出窗口以及何时显示它的触发规则。 然后,您必须与您的电子邮件服务提供商创建手动集成。 最后,您必须处理任何隐私和安全问题。

好消息:有一个更简单的方法。

在本文中,我们将向您展示如何在 10 分钟内启动零编码的灯箱弹出窗口。

让我们潜入水中。

什么是灯箱弹出窗口?

灯箱弹出窗口是一种选择加入的形式,弹出具有电影效果。 当一个灯箱弹出时,它会模糊背景中网站的其余部分。 这样,您的全部注意力都集中在弹出窗口上。

灯箱弹出示例

最初,灯箱的概念来源于户外广告:

灯箱广告

然后,一些开发人员认为这是一个非常酷的效果,他们创建了一个 Javascript 库来在 Web 资产上重新创建相同的效果。 后来,使用灯箱弹出窗口的想法开始发挥作用。

为什么灯箱弹出窗口有效

灯箱弹出窗口比传统的电子邮件选择表单捕获更多的电子邮件。

但它们为什么起作用?

让我们快速看一下灯箱弹出窗口运行良好的主要原因。

#1。 灯箱弹出窗口具有明确的号召性用语

大多数人认为,为客户提供很多选择是一件好事。

但事实并非如此。

如果您正在寻找直接转化,您需要一个单一、清晰的号召性用语,让您的受众可以关注。 这样,您就可以消除用户心中的所有干扰。 灯箱弹出窗口在突出您的核心产品并让人们专注于您的行动号召方面做得很好。

因此,自然地,转换率非常高。

#2。 灯箱弹出窗口是不可忽视的

灯箱弹出窗口占据了整个屏幕并模糊了其他所有内容。 因此,几乎不可能忽略它们。

如果它们是动画的,则尤其如此:

弹出动画效果

当然,您必须确保您的弹出窗口不具有侵入性。 您可以通过自定义何时触发您网站上的不同弹出窗口来做到这一点。 只要您的听众不被打扰而烦恼,您就可以很容易地说服并转换他们。

#3。 灯箱弹出窗口有个性化的触发器

您不应该向所有网络访问者展示相同的优惠。 如果您经营的是电子商务商店,您将需要为新客户和回头客提供截然不同的优惠。

对于新客户,您可以触发欢迎活动:

优惠券弹出窗口

但是对于回头客,您可能希望向他们发送不同的报价:

订婚优惠券弹出窗口

请注意两种优惠的折扣金额完全相同。 但报价的方式却截然不同。 这非常重要,因为灯箱弹出窗口是为戏剧效果而构建的。 因此,更个性化的方法肯定会给您带来更好的结果。

您甚至可以根据用户的内容偏好个性化优惠。 如果他们正在阅读有关晚餐食谱的文章,向他们展示与晚餐食谱相关的报价比向他们展示汽车报价更有意义。

乡村生活退出弹出窗口

#4。 灯箱弹出窗口可以捕获被遗弃的访客

灯箱只是显示弹出窗口的一种方法。 所以,真的没有什么能阻止你自定义触发器到你喜欢的任何程度。 我们建议创建退出意图灯箱弹出窗口。

退出意图弹出窗口

当您的访问者试图退出您的网站时,会触发退出意图弹出窗口。 结果,您保留了大量本来会放弃您的网站的访问者。 因此,如果您正遭受网站放弃的困扰,您绝对应该创建一个退出意图的灯箱弹出窗口。

如何创建灯箱弹出窗口

既然您已经了解了什么是灯箱弹出窗口以及为什么要创建一个灯箱弹出窗口,那么您如何制作灯箱弹出窗口? 我们建议使用 OptinMonster 创建弹出窗口。

OptinMonster 主页

OptinMonster 是世界上排名第一的转换工具包,我们自己也使用过。 OptinMonster 让创建可转换的强大弹出窗口变得超级简单。 而且您根本不需要使用任何编码。

我们甚至写了对 OptinMonster 的完整评论。

您可以检查一下,或立即开始您的广告系列。 您所要做的就是注册 OptinMonster 并按照本文的其余部分进行操作。

第 1 步:创建广告系列

前往您的 OptinMonster 仪表板并点击创建按钮:

创建一个新的弹出广告系列

选择灯箱弹出广告活动类型:

创建一个灯箱弹出窗口

然后,选择一个广告系列模板。 您可以选择您喜欢的任何模板,但我们将使用本教程的简单广告系列类型。

选择弹出广告系列主题

现在,为您的广告系列命名。 请记住,此广告系列名称适合您,您可能会创建一大堆具有不同定位选项的弹出窗口。 所以,给活动起一个有意义的名字,否则你以后会很困惑。

此外,根据您的计划,您还可以在多个站点上使用 OptinMonster。 因此,请选择您想要展示广告系列的网站。

创建活动标识

完成后按开始构建

步骤#2:编辑您的弹出窗口

使用 OptinMonster,您将获得一个可视的拖放弹出式构建器。 完成广告系列的创建后,您甚至可以编辑有关弹出窗口的最细微的细节。 首先编辑您的弹出标题:

编辑您的标题

这里最令人惊奇的部分是您只需单击要编辑的任何文本并内联更改它。 无需填写表格或在弹出窗口中编辑任何 HTML 代码。

然后,调整您的按钮文本和外观以创建清晰的号召性用语:

自定义 CTA

当您对弹出窗口的外观感到满意时,您可以继续进行更高级的设置。

第 3 步:设置显示规则

显示规则旨在定义您的广告系列何时显示在您的网站上以及谁可以看到它。

弹窗显示规则

我们的建议是您将触发条件更改为退出意图:

退出意图灯箱弹出窗口

单击下一步以选择操作。 在这里,我们建议您将Show the campaign view设置为 Optin View,将带有 MonsterEffect 的 show设置为您喜欢的任何入口动画,并为您的 popup播放任何音效。

广告活动操作设置

然后,单击下一步按钮。 您可以在“摘要”选项卡中查看设置的全部范围。

步骤#4:设置您的电子邮件集成

下一步是设置您的电子邮件集成。 单击集成选项卡中的添加新集成,然后选择您的电子邮件服务提供商:

OptinMonster 集成

如果您还没有电子邮件服务提供商,我们建议您使用 Drip 进行电子邮件营销。

步骤#5:发布您的灯箱弹出窗口

当您创建新的广告系列时,它默认处于暂停状态

从顶部菜单转到“发布”选项卡以查看“发布选项”。 然后,将状态设置为发布并选择网站平台:

发布 OptinMonster 活动

如果您运行的是 WordPress 网站,OptinMonster 插件会自动处理其余的设置。 Shopify 和 BigCommerce 也是如此。 对于任何其他网站,单击任何网站并将嵌入代码粘贴到您网站的头部:

全球嵌入

你完成了!

包起来

这就是这个,伙计们!

让我们知道这篇文章是否有帮助。 在您的网站上创建弹出窗口可以帮助您将流量转化为电子邮件订阅者和真正的业务线索。 我们强烈建议您立即开始创建灯箱弹出窗口。

如果您正在寻找一种经济实惠的方式来增加流量,我们建议您使用推送通知。 推送通知可以帮助您带来更多的重复流量和网站参与度。 您还可以创建产生销售的自动推送通知活动。

不服气? 查看这些资源:

  • 提高客户参与度的 7 种明智策略
  • 推送通知有效吗? 7 个统计数据 + 3 个专家提示
  • 如何设置废弃购物车推送通知(简易教程)

我们建议使用 PushEngage 创建您的推送通知活动。 PushEngage 是世界上排名第一的推送通知软件。 因此,如果您还没有,请立即开始使用 PushEngage!