Looking for a way to create push button notifications and collect push notification subscribers?
我们明白。有时，在增长订阅用户的方式上拥有一定的灵活性会更加方便。
别担心。我们已经为您准备好了。
In this article, we’re going to show you step-by-step how to create your own push button notifications.
准备好了吗？让我们开始吧。
How to Create Push Button Notifications in WordPress
Before you create push button notifications in WordPress, you need to create a landing page to collect push subscribers. We highly recommend using SeedProd to create your landing pages.
SeedProd is the best WordPress landing page builder. It’s perfect for businesses, bloggers, and website owners looking to build high-converting landing pages without any development skills.
With SeedPreed, you get pre-built templates for high-converting landing pages that you can publish instantly. This includes templates for:
还有更多！
第 1 步：安装并激活 SeedProd
首先，您需要获取 SeedProd Pro 插件并激活它。如果您不确定如何操作，请参阅这篇关于 如何安装 WordPress 插件的文章。然后，在您的 WordPress 管理仪表板中转到 SeedProd » 设置 并激活 Pro 版本：
接下来，前往 SeedProd » 页面 以概览 SeedProd 的着陆页仪表板。在这里，您可以查看使用 SeedProd 可以创建的不同类型的着陆页：
Keep in mind that these are all special pages with pre-built functionality and design templates. For a landing page, you don’t want to use ANY of these special landing pages. Instead, you’re going to create a custom landing page.
向下滚动并点击 添加新着陆页 按钮开始操作：
Step #2: Create a New Landing Page for Push Button Notifications
点击 添加新着陆页 按钮后，您将看到 SeedProd 的着陆页模板库。这些是专业设计的、完全响应式的着陆页模板。
Next, you can select one of these templates to help you get started.
Remember, the template is just a starting point. you can customize everything about the page later on. For now, find a template that you think will fit. When the templates page opens, you can click Squeeze Page to filter the list:
For this guide, we’ll select the Investment Squeeze Page.
A squeeze page has only one objective. It’s to “squeeze” you just enough to get your email address. Know anyone in the investment and personal finance space? Yeah, they can squeeze for sure!
Go ahead and click on it now.
Next, we’re going to customize the landing page.
Step #3: Customize Your Landing Page Design
SeedProd 的可视化构建器允许您使用拖放内容块来自定义您的着陆页。
You can create a fully customized header for your landing page in a matter of minutes. You can even add custom elements to convince and convert your traffic. For instance, you can create a video module and embed a YouTube video to convince your visitors to buy your product or service.
It’s also super easy to add a section with a brief description of your product or service . Head over to the Sections tab in the visual builder and under the Hero section, you’ll find several pre-built templates that you can import with a single click.
Go ahead and select one that you like.
Don’t worry about the colors or the content. You can edit all of it. What you should look for is a layout that goes well with your template.
You can customize the hero section the same way we did earlier by choosing a different image and changing the headline and description. While you’re at it, add a call-to-action button that nudges visitors to buy from you.
Next, from the Sections tab, select the Testimonial heading, and choose a design you like. And just like that, you have a testimonials section on your landing page.
It’s so simple!
Step #4: Add a Push Button Notifications to Your Landing Page
You can also add a click to subscribe button to collect push notification subscribers. Push notifications are a great way to increase your repeat traffic, get more engagement and even sell official merch if you have some.
In SeedProd, just drag and drop the Custom HTML module from the sidebar.
We’ve put the subscribe button directly underneath the email signup form in the first fold.
But you can insert the button anywhere you like.
For this part, you need some experience with HTML and CSS. Or, you can copy this code and paste it into your Custom HTML block:
<button onclick="subscribeOnClickButton()" style="border: none; padding-left: 5%; padding-right:5%; text-align: center; display: inline-block; color: blue;">Get Updates via Push Notifications</button>That’s a standard button in HTML with very little styling. The only fancy bit is the onclick function in the code. It basically means that your visitors can click on the button to subscribe to something. Now, we need to give the button some extra code to allow your visitors to subscribe to push notifications.
前往 PushEngage 主页，然后点击“开始使用”按钮：
PushEngage 是全球排名第一的推送通知插件。
推送通知可帮助您自动增加网站流量和参与度。如果您经营在线商店，PushEngage 还可以通过帮助您创建自动电子商务推送通知来帮助您增加销售额。
您可以免费开始使用，但如果您想认真发展业务，则应购买付费套餐。此外，在购买任何推送通知服务之前，您应该查看这篇关于 推送通知成本的指南。
PushEngage 提供以下功能，快速概览：
您会发现，如果您想为您的业务带来流量、参与度和销售额，PushEngage 绝对是最佳选择。而且，如果您预算有限，您总是可以 在推送通知方面发挥创意。
注意： 如果您运行的是 WordPress 网站，则应安装并激活 PushEngage WordPress 插件。
然后，您可以选择免费计划来试用 PushEngage，或者如果您想认真发展您的业务，可以选择付费计划。付费计划提供更多的营销活动选项，并能够建立更大的订阅用户列表。
在您的 PushEngage 仪表板中，转到“网站设置”»“网站详细信息”，然后点击“单击此处获取设置说明”按钮。在“任何网站”下，您将获得安装代码：
警告：您需要复制从仪表板获取的代码。该代码对于每个 PushEngage 用户都是唯一的。您将无法复制图像中的代码并收集推送通知订阅者。
在您的 PushEngage 仪表板中获取代码后，将此代码段添加到您的代码中：
<script> window._peq = window._peq || [];</script> <script>
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
if(res.statuscode==1)
{
// Code to return response
console.log(res);
}
}]);
}
</script>您的最终代码应如下所示：
<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];</script> <script>
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
if(res.statuscode==1)
{
// Code to return response
console.log(res);
}
}]);
}
</script>You’ll want to add this code to the HTML block in your landing page after the code for the button. It should look something like this:
Feel free to customize the styles for the button any way you please. When you’re done customizing your landing page, go ahead and hit the Save button.
Step #4: Configure Your Page Settings
After you’re done designing your landing page, click the Connect tab at the top of your page builder, and select your email marketing provider to collect leads on your site.
然后，点击屏幕顶部的“页面设置”选项卡。
在这里，您可以将SEO插件和Google Analytics插件添加到您的着陆页。您甚至可以设置自定义跟踪代码，例如Facebook Pixel或Pinterest Pixel来跟踪广告效果。
Step #5: Publish Your Landing Page in WordPress
Now let’s go ahead and publish your design. To do this, click the dropdown arrow next to the save button and click Publish.
You can then click the See Live Page button to see how it looks.
Congratulations! You just published your very first landing page.
What to do After You Add Push Button Notifications to Your Site
Now that your landng page is live, it’s time to work on your traffic, engagement, and sales. You should try using push notifications on your site. Push notifications are a great marketing tool that can help you grow your business.
看看这些精彩的资源，您就会明白我的意思了：
我们建议使用PushEngage来创建您的推送通知广告系列。PushEngage是全球排名第一的推送通知软件。所以，如果您还没有，请立即开始使用PushEngage！
