如何向弹出窗口添加推送通知订阅按钮

已发表: 2023-07-21

正在寻找一种向弹出窗口添加推送通知订阅按钮的方法？

弹出窗口是提高转化率和扩大电子邮件列表的好方法。但这并不是您可以用它们做的全部事情。如果您使用正确的弹出窗口生成器，您可以自定义有关弹出窗口的所有内容。

默认情况下，推送通知还带有弹出模式。唯一的问题是，在大多数情况下，它们很难定制和设计样式。关于推送通知弹出模式的自定义内容也存在许多限制。因此，我们将使用弹出窗口构建器来构建弹出窗口并添加订阅链接来收集推送订阅者。

您可以轻松添加一个按钮，直接从弹出窗口收集推送通知订阅者。而且非常容易做到。您所需要的只是一个弹出窗口生成器和一个推送通知软件来设置自定义弹出窗口来收集推送订阅者。

让我们深入了解一下。

如何创建弹出窗口来收集推送订阅者

让我们从创建一个弹出窗口开始。我们建议使用 OptinMonster 创建所有弹出窗口。

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

OptinMonster 几乎拥有您启动、发展和扩展电子邮件潜在客户生成流程所需的一切。

以下是使用该工具包可以执行的操作的简要概述：

顺利扩大您的电子邮件列表以进行再营销
将首次访问者转变为常客
减少购物车放弃和浏览放弃率
使用实际倒计时器创建限时优惠
增加电子书下载和数字产品销量
为现场活动创建渠道
使用游戏化弹出窗口提高网站参与度
将您的流量重定向到可以赚钱的页面和帖子
创建真实潜在客户列表并使用两步选择删除虚假电子邮件

我们经常使用 OptinMonster，甚至还撰写了 OptinMonster 的完整评论。您可以查看一下，或者立即开始您的活动。您所要做的就是注册 OptinMonster 并按照本文的其余部分进行操作。

第 1 步：创建营销活动

前往 OptinMonster 仪表板并点击“创建”按钮：

选择模板选项以开始使用预先设计的模板创建选择：

在本教程中，我们将创建一个全屏弹出窗口。选择全屏以开始使用全屏弹出模板：

然后，选择一个营销活动模板。您可以选择您喜欢的任何模板，但我们将在本教程中使用产品推荐（游戏化）活动模板。

选择模板后，为您的营销活动命名。请记住，这个广告系列名称适合您，您可能会创建一大堆具有不同定位选项的弹出窗口。因此，请给该活动起一个有意义的名称，否则您稍后会感到非常困惑。

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

完成后按开始构建。

步骤#2：编辑弹出窗口

使用 OptinMonster，您将获得一个可视化的拖放弹出窗口构建器。创建完广告系列后，您将能够编辑有关弹出窗口的最微小的详细信息。首先编辑弹出标题：

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

您可以编辑弹出窗口的所有内容。当您对选择的外观感到满意时，您可以继续进行更高级的设置。

步骤#3：向弹出窗口添加点击订阅按钮\

推送通知可帮助您增加网站流量和自动驾驶参与度。如果您正在运营在线商店，PushEngage 还可以帮助您创建自动电子商务推送通知，从而帮助您增加销售额。

您可以免费开始使用，但如果您真的想发展业务，则应该购买付费计划。此外，在购买任何推送通知服务之前，您应该查看本推送通知费用指南。

快速浏览一下 PushEngage 所带来的好处：

高转化自动化营销活动
多种定位和活动安排选项
目标跟踪和高级分析
智能 A/B 测试
专注的成功经理

如果您想为您的企业增加流量、参与度和销售额，您会发现 PushEngage 无疑是最佳选择。如果您的预算有限，您可以随时在推送通知上发挥一点创意。

首先，从 OptinMonster 的侧边栏向弹出窗口添加一个HTML块。

我们将在此处添加代码以收集推送通知订阅者。首先，粘贴以下代码以创建可点击的按钮：

 <button>Get Updates via Push Notifications</button>

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

当然，您可以尝试一下样式，使其看起来更有吸引力。接下来，我们将使按钮在单击时收集推送通知订阅者。

前往 PushEngage 主页并单击“开始”按钮：

然后，您需要选择免费计划来尝试 PushEngage，或者如果您真的想发展业务，则选择付费计划。付费计划提供更多的活动选项以及建立更大的订户列表的能力。

在 PushEngage 仪表板中，转到站点设置 » 站点详细信息，然后单击单击此处获取设置说明按钮。在Any Site下，您将获得安装代码：

警告：您需要复制从仪表板获得的代码。该代码对于每个 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>

将此代码添加到 OptinMonster 中按钮代码之后和<div></div>代码块之间的HTML块中，即可完成！