创建灯箱弹出窗口

如何创建网站灯箱弹出窗口(分步指南)

正在寻找创建网站灯箱弹窗的方法?

灯箱弹窗在捕获潜在客户方面非常有效。它们旨在说服和转化。

但从头开始编写一个弹窗会非常麻烦。首先,您需要了解足够的 HTML、CSS 和 Javascript 来创建弹窗以及何时显示它的触发规则。然后,您需要与您的电子邮件服务提供商进行手动集成。最后,您还需要处理任何隐私和安全问题。

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

在本文中,我们将向您展示如何在 10 分钟内通过零代码启动灯箱弹窗。

让我们开始吧。

什么是灯箱弹窗?

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

灯箱弹出窗口示例

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

灯箱广告

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

为什么灯箱弹窗有效

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

但它们为什么有效?

让我们快速了解一下灯箱弹窗如此有效的主要原因。

#1。灯箱弹窗具有清晰的号召性用语

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

但事实并非如此。

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

因此,转化率自然很高。

#2。灯箱弹窗无法被忽略

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

如果它们是动画的,这一点尤其正确:

弹出动画效果

当然,您必须确保您的弹窗不具侵入性。您可以通过自定义在网站上触发不同弹窗的时间来实现这一点。只要您的受众不被中断打扰,您就可以非常轻松地说服和转化他们。

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

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

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

优惠券弹出窗口

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

参与优惠券弹出窗口

请注意,两个优惠的折扣金额完全相同。但优惠的表述方式却截然不同。这一点非常重要,因为灯箱弹窗是为戏剧性效果而设计的。因此,更个性化的方法肯定会为您带来更好的结果。

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

Country Living 退出弹出窗口

#4. Lightbox 弹窗可捕获即将离开的访客

Lightbox 只是显示弹窗的一种方式。因此,没有什么能阻止您随意自定义触发器。我们建议创建退出意图 Lightbox 弹窗。

退出意图弹出窗口

退出意图弹窗会在访客尝试离开您的网站时触发。因此,您可以留住大量原本会放弃您网站的访客。所以,如果您正遭受 网站放弃 的困扰,您绝对应该创建一个退出意图 Lightbox 弹窗。

如何创建 Lightbox 弹窗

既然您已经了解了 Lightbox 弹窗是什么以及为什么您想创建一个,那么如何创建一个 Lightbox 弹窗呢?我们建议使用 OptinMonster 来创建您的弹窗。

OptinMonster 主页

OptinMonster 是全球排名第一的转化工具包,我们自己也使用它。OptinMonster 可以非常轻松地创建强大的、能够带来转化的弹出窗口。而且您永远不需要编写任何代码。

我们甚至写了一篇完整的 OptinMonster 评测

您可以查看一下,或者立即开始您的营销活动。您所要做的就是注册 OptinMonster 并按照本文其余部分的说明进行操作。

第 1 步:创建营销活动

前往您的 OptinMonster 仪表板,然后点击 创建 按钮:

创建新的弹窗广告系列

选择 Lightbox 弹窗 营销活动类型:

创建灯箱弹出窗口

然后,选择一个营销活动模板。您可以选择任何喜欢的模板,但在此教程中,我们将使用 简单 营销活动类型。

选择弹出广告系列主题

现在,为您的营销活动命名。请记住,此营销活动名称仅供您自己参考,您很可能会创建大量具有不同定位选项的弹窗。因此,请为营销活动起一个有意义的名称,否则您以后会非常困惑。

此外,根据您的套餐,您还可以在多个网站上使用 OptinMonster。因此,请选择您希望展示营销活动的网站。

创建广告系列身份

完成后,按开始构建

第 2 步:编辑您的 Lightbox 弹窗

使用 OptinMonster,您将获得一个可视化的拖放式弹窗构建器。完成营销活动创建后,您将能够编辑弹窗的每一个细微之处。首先编辑您的弹窗标题:

编辑您的标题

这里最神奇的部分是,您只需点击想要编辑的任何文本即可在线更改。无需填写表单或编辑弹出窗口中的任何 HTML 代码。

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

自定义CTA

当您对弹窗的外观满意后,就可以进入更高级的设置了。

第 3 步:设置显示规则

显示规则用于定义您的营销活动何时在您的网站上显示以及谁可以看到它。

弹出显示规则

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

退出意图灯箱弹出窗口

点击 下一步 选择 操作。在这里,我们建议您将 显示营销活动视图 设置为 Optin 视图,将 显示 MonsterEffect 设置为您喜欢的任何进入动画,并将 播放声音效果 设置为您弹窗的任何声音效果。

广告系列操作设置

然后,点击 下一步 按钮。您可以在摘要选项卡中查看所有设置的完整范围。

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

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

OptinMonster 集成

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

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

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

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

发布 OptinMonster 广告系列

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

全局嵌入

您就完成了!

奖励:从您的弹出窗口收集推送通知订阅者

推送通知可帮助您自动增加网站流量和参与度。网站推送通知是吸引可能已放弃会话或离开网站的用户返回的有效方法。它通过通知用户新内容、优惠或活动来帮助重新吸引用户

推送通知还包含清晰且可操作的消息和号召性用语按钮,鼓励用户采取特定操作,例如阅读文章、完成购买或参加活动。

您可以根据用户的偏好、行为和兴趣来定制推送通知,以确保消息对每个用户来说都是相关且有价值的。用户必须同意接收网页推送通知。这可以确保消息不会被视为垃圾邮件,并且是在用户许可的情况下发送的。

最酷的部分是您可以从电子邮件弹出窗口收集推送通知订阅者。因此,万一您的网站访问者不想放弃他们的电子邮件 ID,您仍然可以通过网站推送通知让他们订阅。

这就是我们将要着手的内容。

第 1 步:选择一个推送通知服务

我们建议使用PushEngage发送网站推送通知。

PushEngage 推送通知服务

以下是您使用PushEngage可以获得的功能的快速概览:

您可以免费开始使用,但如果您想认真发展业务,则应购买付费套餐。此外,在购买任何推送通知服务之前,您应该查看这篇关于 推送通知成本的指南。

如果您经营一家在线商店,PushEngage 还可以通过帮助您创建自动化的电子商务推送通知来帮助您增加销售额。

您会发现,如果您想为您的业务带来流量、参与度和销售额,PushEngage 绝对是最佳选择。而且,如果您预算有限,您总是可以 在推送通知方面发挥创意

第 2 步:向您的弹出窗口添加 HTML 块

首先,从 OptinMonster 中的侧边栏将一个HTML块添加到您的弹出窗口。

在 OptinMonster 中添加 HTML 块

这是我们将添加代码以收集推送通知订阅者的地方。首先,粘贴以下代码以创建可点击按钮:

<button onclick="subscribeOnClickButton()" style="border: none; width: 100%; padding-left: 15%; padding-right:15%; text-align: center; display: inline-block; color: white;">Get Updates via Push Notifications Instead</button>

将代码粘贴到显示可以添加 HTML 的位置:

将 HTML 代码添加到弹出窗口

此时,您应该会在弹出窗口中看到一个新按钮,其文字为“通过推送通知获取更新”,位于电子邮件订阅按钮的正下方:

向弹出窗口添加推送订阅按钮

当然,您可以调整样式使其看起来更具吸引力。接下来,我们将使按钮在被点击时收集推送通知订阅者。

第 3 步:从 PushEngage 获取订阅代码

前往 PushEngage 主页,然后点击“开始使用”按钮:

PushEngage

然后,您可以选择免费计划来试用 PushEngage,或者如果您想认真发展您的业务,可以选择付费计划。付费计划提供更多的营销活动选项,并能够建立更大的订阅用户列表。

在您的 PushEngage 仪表板中,转到“网站设置”»“网站详细信息”,然后点击“单击此处获取设置说明”按钮。在“任何网站”下,您将获得安装代码:

PushEngage 任何网站安装代码

警告:您需要复制从仪表板获取的代码。该代码对于每个 PushEngage 用户都是唯一的。您将无法复制图像中的代码并收集推送通知订阅者。

在您的 PushEngage 仪表板中获得代码后,复制第二个脚本并为其添加一些额外的代码。您的最终代码应如下所示:

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>

第 4 步:将您的订阅代码添加到弹出窗口的 HTML 块中

将此代码添加到 OptinMonster 的 HTML 块中,即可完成!

将订阅代码添加到按钮

完成后,只需点击 保存发布 按钮即可。

如果您查看您的网站,现在应该会看到收集电子邮件和推送通知订阅者的灯箱弹出窗口:

从弹出窗口收集推送订阅者

就这样,您就可以从弹出窗口收集推送订阅者了。推送通知带有自己的弹出窗口模型。但它们的自定义程度有点困难。因此,您可以使用 OptinMonster 创建精美的弹出窗口,然后将它们用作推送通知弹出窗口。

创建灯箱弹出窗口后的操作

好了,各位,本次分享就到这里!

如果本文对您有所帮助,请告诉我们。在您的网站上创建弹出窗口可以帮助您将流量转化为电子邮件订阅者和真正的业务潜在客户。我们强烈建议您立即开始创建灯箱弹出窗口。

如果您正在寻找一种经济高效的方式来增加流量,我们建议使用推送通知。推送通知可以帮助您带来更多重复流量和网站互动。您还可以创建自动推送通知广告系列来产生销售。

不信?查看这些资源:

我们建议使用 PushEngage 来创建您的推送通知广告系列。PushEngage 是全球排名第一的推送通知软件。所以,如果您还没有,请立即开始使用 PushEngage

添加评论

我们很高兴您选择留下评论。请记住,所有评论都将根据我们的隐私政策进行审核,并且所有链接都将是 nofollow。请勿在姓名字段中使用关键字。让我们进行一次个人化且有意义的对话。

在访客离开您的网站后与他们互动并挽留他们

通过难以忽略的推送通知,增加每次网站访问的价值。

  • 永久免费套餐
  • 轻松设置
  • 五星支持