Looking for a way to add web push notifications to your website?
Push notifications can help you generate a lot of traffic, engagement, and sales on autopilot and with very little effort. But a major question is how do you even do it?
In this article, we’ll show you how to add push notifications to your website even if you’ve never done it before.
在本文中，我们将使用 PushEngage 为您的网站设置推送通知。PushEngage 是全球排名第一的推送通知软件。因此，您的广告系列将得到妥善处理。
让我们开始吧。
如何为您的网站安装推送通知
Let’s start with a preview of what you can expect as a result of this article. If you follow these steps, by the end of this article, you should be able to send push notifications from your site like this one:
It doesn’t matter what your website was built with. No matter what tech stack you used to develop your site, you can always install push notifications on your site. We’ll cover all of that in the next few segments.
让我们开始吧。
第 1 步：设置您的 PushEngage 帐户
访问 PushEngage 主页，然后点击 开始使用 按钮：
您可以选择免费套餐来试用 PushEngage，或者如果您想认真发展您的业务，可以选择付费套餐。付费套餐提供更多广告系列选项，并能够建立更大的订阅者列表。
注册账户后，请前往 PushEngage 仪表板并转到 设置 » 网站设置 » 安装设置：
在这里你可以配置你的网站详细信息和品牌。请立即设置你的推送通知的徽标和网站 URL。你应该立即这样做，以便能够正确测试你的推送通知。
第 2 步：从 PushEngage 获取安装代码
接下来，您需要前往 PushEngage 仪表板并获取安装代码。转到 设置 » 网站设置 » 安装设置：
This is where things start to get a little bit technical.
Inside this tab, you’ll see that you can get a different code for different types of websites.
Find the right one for your site and copy it.
如果您运行的 CMS 网站未在选项卡中列出，您可以根据您的网站是否安装了 SSL 证书，转到 HTTP 或 HTTPS 选项卡。
如果您使用的是 HTTPS 网站，此步骤中一个非常重要的部分是能够访问您服务器的根文件夹。要在 HTTPS 网站上运行推送通知，您需要从同一选项卡下载 service-wroker.js 文件。然后，将其上传到您的根文件夹。
NOTE: If you can’t upload the service-worker file to the root folder, you have the option to upload the file to another folder. Go to PushEngage Dashboard » Settings » Site Settings » Advanced Settings.
Just follow the instruction in the Service Worker Settings and you’re golden:
就这样！
You’ve successfully installed web push notifications to WordPress without using a plugin.
Step #3: Placing the Installation Code In Your Site’s HTML
Essentially, no matter what type of website you have, you’ll want to place this installation code in the HTML <head> of your website. And the process to do this is different for different platforms. If you’d like to get a platform-specific guide on how to install web push notifications to your website, check out these resources:
- 在 WordPress 上安装推送通知
- 在 WooCommerce 上安装推送通知
- 在 Wix 上安装推送通知
- 在 Zoho 上安装推送通知
- 在 Volusion 上安装推送通知
- 在 Weebly 上安装推送通知
- 在 ClickFunnels 上安装推送通知
- 在 PrestaShop 上安装推送通知
- 在 OpenCart 上安装推送通知
- 在 CS-Cart 上安装推送通知
- 在 Squarespace 上安装推送通知
If you’re running a custom site built on HTML, you’ll know exactly where to place the code. But The process of placing the installation code in the head of your site will change based on your CMS or website builder.
For certain CMSs, you can insert your installation code directly from your dashboard. In other instances as with PrestaShop, you’ll need to use the PushEngage API Key instead. So, we recommend following these platform-specific tutorials for any other site.
第 4 步：配置 PushEngage 选择加入
最后，在您的 PushEngage 仪表板中，转到 设置 » 订阅设置 » 订阅对话框 » 编辑：
您可以在此处自定义推送通知选择加入。如果您需要帮助，可以查看这篇关于如何创建自定义推送通知选择加入的文章。
如果您需要一些灵感，可以查看这篇关于高转化率的推送通知选择加入的文章。
第 5 步：创建欢迎通知
完成选择加入设置后，您的网站就可以收集订阅者了。
但是，您如何知道您的推送通知是否正常工作？
我们建议您 创建欢迎推送通知 来测试您的设置是否顺利。欢迎通知是您发送给新订阅者的推送通知，以确认他们的订阅并欢迎他们加入。
转到 设置 » 网站设置 » 安装设置 并配置您的欢迎消息：
最后，回到您的网站并选择您自己的推送通知，以测试一切是否顺利。
就这样！
您已在网站上成功设置了网站推送通知。现在是时候回到您的PushEngage仪表板，开始创建您的推送通知广告系列了。
总结
好了，各位，本次分享就到这里！
如果您是推送通知新手，在上线之前，您应该遵循一个完整的 推送通知测试 流程。这将帮助您在访问者看到它们并开始抱怨糟糕的用户体验之前，排除常见问题。
如果您在以上任何步骤中遇到困难，我们建议您联系我们的客户成功经理。我们非常乐意帮助您解决任何问题。
如果您还没有尝试过PushEngage，现在就去试试吧。PushEngage是全球排名第一的推送通知服务。所以，如果您想认真发展您的业务，就应该投资PushEngage。
