想为您的弹出窗口添加推送通知订阅按钮？
弹出窗口是提高转化率和增加电子邮件列表的绝佳方式。但这并不是您能用它们做的全部。如果您使用正确的弹出窗口生成器，您可以自定义弹出窗口的所有内容。
默认情况下，推送通知也附带弹出窗口。但是，使用弹出窗口生成器，您可以获得更多自定义选项。
因此，我们将使用弹出窗口生成器来构建弹出窗口并添加订阅链接以收集推送订阅者。
您可以轻松地直接从弹出窗口添加按钮来收集推送通知订阅者。而且操作非常简单。您只需要一个弹出窗口生成器和一个推送通知软件来设置自定义弹出窗口以收集推送订阅者。
让我们开始吧。
如何创建弹出窗口以收集推送订阅者
让我们开始创建一个弹出窗口。我们建议使用 OptinMonster 来创建您的所有弹出窗口。
OptinMonster 是全球排名第一的转化工具包，我们自己也使用它。OptinMonster 可以非常轻松地创建强大的、能够带来转化的弹出窗口。而且您永远不需要编写任何代码。
OptinMonster 几乎拥有您开始、发展和扩展潜在客户开发流程所需的一切。
以下是使用该工具包可以执行的操作的快速概述：
- 使用弹出窗口收集推送通知订阅者
- 将首次访问者转化为常规读者
- 减少 购物车放弃 和 浏览放弃 率
- 创建带有实际倒计时器的限时优惠
- 增加电子书下载和 数字产品销售
- 创建漏斗 以用于直播活动
- 使用游戏化弹出窗口提高网站参与度
- 将您的流量重定向到能为您带来收入的页面和帖子
我们经常使用 OptinMonster，甚至撰写了完整的 OptinMonster 评测。您可以查看一下，或者立即开始您的营销活动。您只需注册 OptinMonster 并按照本文其余部分的说明进行操作即可。
第 1 步：创建弹出窗口营销活动以收集订阅者
前往您的 OptinMonster 仪表板，然后点击 创建 按钮：
选择 模板 选项，开始使用预设计的模板创建注册表单：
在本教程中，我们将创建一个用于黑色星期五的弹出窗口。选择 弹出窗口 营销活动类型，然后搜索营销活动模板
您可以选择任何喜欢的模板，但本教程将使用 黑色星期五 营销活动模板。
选择模板后，为您的营销活动命名。请记住，此营销活动名称仅供您自己参考，您很可能会创建大量具有不同定位选项的弹出窗口。因此，请为营销活动起一个有意义的名称，否则以后您会非常困惑。
此外，根据您的套餐，您还可以在多个网站上使用 OptinMonster。因此，请选择您希望展示广告系列的网站。完成后，点击 开始构建 。
第 2 步：编辑您的弹出窗口以自定义外观和感觉
使用 OptinMonster，您将获得一个可视化拖放式弹出窗口构建器。为您的广告系列命名后，您将能够编辑弹出窗口的最小细节。
这里最神奇的部分是，您只需点击想要编辑的任何文本即可在线更改。无需填写表单或编辑弹出窗口中的任何 HTML 代码。
您可以编辑弹出窗口的所有内容，包括图片。当您对注册的外观满意时，可以继续进行更高级的设置。
此特定模板的设置方式是弹出窗口有三个部分。您有一个初始的是/否屏幕，访客在此选择黑色星期五的优惠券。这就是您在上面的图片中看到的。默认情况下，它是免费送货优惠券。但您可以添加任何您想要的优惠或优惠券。
当您的访客点击弹出窗口上的是按钮时，他们会被发送到注册屏幕。您可以在此处收集订阅者。默认情况下，注册屏幕会收集电子邮件。我们将用一个收集推送订阅者的按钮替换它。
最后，您会看到一个在访客订阅后显示的成功屏幕。
让我们一步一步来。
第 3 步：从弹出窗口中删除电子邮件注册
您可以编辑弹出窗口中的任何模块。转到底部栏中的注册屏幕：
在这里，您可以将鼠标悬停在电子邮件注册模块上，然后单击删除按钮将其删除：
现在电子邮件注册已消失，我们将向其添加一个按钮以收集推送通知订阅者。
第 4 步：向您的弹出窗口添加点击订阅按钮
首先，从 OptinMonster 中的侧边栏将一个 HTML 块添加到您的弹出窗口。
这是我们将添加代码以收集推送通知订阅者的地方。首先，粘贴以下代码以创建可点击按钮：
<button class = "btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications Instead</button>将代码粘贴到显示可以添加 HTML 的位置。此时，您应该会在弹出窗口中看到一个新按钮：
接下来，向下滚动并粘贴以下 CSS 到 CSS 容器中：
html div#om-{{id}} .btn
{
font-family: Arial, sans-serif;
font-weight: 0;
font-size: 14px;
color: #fff;
background-color: #cf1f31;
padding: 10px 30px;
width: 100%;
margin: auto;
border: solid #cf1f31 2px;
box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
border-radius: 50px;
transition : 1000ms;
transform: translateY(0);
display: grid;
align-text: center;
cursor: pointer;
}
html div#om-{{id}} .btn:hover
{
transition : 1000ms;
padding: 10px 35px;
transform : translateY(-0px);
background-color: #ffffff;
color: #cf1f31;
border: solid 2px #ffffff;
}此时，您应该会在弹出窗口中看到一个漂亮的按钮：
第 5 步：从 PushEngage 获取订阅代码
推送通知可帮助您自动增加网站流量和参与度。网站推送通知是吸引可能已放弃会话或离开网站的用户返回的有效方法。它有助于通过通知用户有关新内容、优惠或活动来重新吸引用户。
推送通知还包括清晰且可操作的消息和号召性用语按钮，鼓励用户采取特定操作，例如阅读文章、完成购买或参加活动。
您可以根据用户的偏好、行为和兴趣来定制推送通知，以确保消息对每个用户来说都是相关且有价值的。用户必须同意接收网页推送通知。这可以确保消息不会被视为垃圾邮件，并且是在用户许可的情况下发送的。
最酷的部分是，您可以从电子邮件弹出窗口收集推送通知订阅者。因此，万一您的网站访客不想放弃他们的电子邮件 ID，您仍然可以通过网页推送通知让他们订阅。
我们建议使用 PushEngage 来发送网页推送通知。
以下是您使用 PushEngage 所获得功能的快速概览：
- 高转化率的自动化广告系列
- 多种定位和广告系列调度选项
- 目标跟踪和高级分析
- 智能 A/B 测试
- 专属客户成功经理
您可以免费开始使用，但如果您想认真发展业务，则应购买付费套餐。此外，在购买任何推送通知服务之前，您应该查看这篇关于 推送通知成本的指南。
如果您经营一家在线商店，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>第 6 步：将您的订阅代码添加到弹出窗口的 HTML 块中
将此代码添加到 OptinMonster 的 HTML 块中，您就完成了！
完成后，只需点击“保存”和“发布”按钮即可。
第 7 步：添加点击跟踪和广告系列关闭
我们需要做的最后一件事是添加点击跟踪代码，以便在 OptinMonster 中将每个订阅者视为一次转化。此外，当访问者订阅时，您希望他们移至“成功”屏幕或退出广告系列。
在 Javascript 代码段中，添加以下几行代码：
要启用转化跟踪，请添加此代码：
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster要将您的订阅者移至成功屏幕，请添加此代码：
om{{id}}.changeView('success'); // Show Success view on submission要订阅时关闭广告系列，请添加此代码：
om{{id}}.startClose();// Close campaign on submission您也可以添加多个代码片段。我们建议您将订阅者移至成功屏幕并跟踪转化。因此，我们建议使用的最终代码片段（包括按钮和所有 Javascript）是：
<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);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.startClose();// Close campaign on submission
}]);
}
</script>
<div>
<button class="btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>或者，您也可以使用此代码直接关闭广告系列：
<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);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.changeView('success'); // Show Success view on submission
}]);
}
</script>
<div>
<button onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>只需将代码复制并粘贴到您的 OptinMonster 弹出窗口的 HMTL 块中。
对于任一代码段，请记住在 HTML 块的 CSS 部分添加以下 CSS：
html div#om-{{id}} .btn
{
font-family: Arial, sans-serif;
font-weight: 0;
font-size: 14px;
color: #fff;
background-color: #cf1f31;
padding: 10px 30px;
width: 100%;
margin: auto;
border: solid #cf1f31 2px;
box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
border-radius: 50px;
transition : 1000ms;
transform: translateY(0);
display: grid;
align-text: center;
cursor: pointer;
}
html div#om-{{id}} .btn:hover
{
transition : 1000ms;
padding: 10px 35px;
transform : translateY(-0px);
background-color: #ffffff;
color: #cf1f31;
border: solid 2px #ffffff;
}完成后，点击保存。如果您检查您的网站，现在应该会看到弹出窗口同时收集电子邮件和推送通知订阅者：
就这样，您就可以从弹出窗口收集推送订阅者了。推送通知自带弹出窗口模态框。但它们有点难以自定义。因此，您可以使用 OptinMonster 创建精美的弹出窗口，然后将它们用作推送通知弹出窗口。
第 8 步：在 WordPress 中发布您的退出意图弹出窗口
创建新广告系列时，它默认处于暂停状态。
转到顶部菜单的发布选项卡，查看发布选项。然后，将状态设置为发布并选择网站平台：
如果您运行的是 WordPress 网站，OptinMonster 插件会自动处理其余的设置。Shopify 和 BigCommerce 也是如此。对于任何其他网站，请点击任何网站并将嵌入代码粘贴到您网站的 head 中：
您就完成了！
奖励步骤：在 PushEngage 中禁用快速安装
快速安装是一种在没有 SSL 证书的情况下向网站添加推送通知订阅者的方法。如今，几乎所有网站都有 SSL 证书，但万一您没有安装，我们强烈建议您立即安装一个。请查看这篇关于如何在 WordPress 中安装 SSL 证书的文章。
因此，在您开始在网站上收集订阅者之前，我们也建议禁用快速安装。前往PushEngage 仪表板并转到设计 » 弹出窗口模态框。然后，禁用快速安装：
现在，您已准备好推广您的网站并在黑色星期五收集更多订阅者！
开始收集推送订阅者后的操作
好了，各位，本次分享就到这里！
如果本文对您有帮助，请告知我们。在您的网站上创建弹出窗口可以帮助您将流量转化为推送订阅者和真正的业务潜在客户。我们强烈建议您立即开始创建退出意图弹出窗口。
如果您正在寻找一种经济高效的方式来增加流量，我们建议使用推送通知。推送通知可以帮助您带来更多重复访问流量和网站互动。您还可以创建自动推送通知广告系列来产生销售。
不信？查看这些资源：
我们建议使用 PushEngage 来创建您的推送通知广告系列。PushEngage 是全球排名第一的推送通知软件。所以，如果您还没有，请立即开始使用 PushEngage！
