AppPush
WebPush
WhatsApp
Email
SMS
OTP
In-App消息 html编辑指南
最新更新：2024-08-14
如果你是一名 html 新手建议你直接用我们定制好的消息类型，如果你対 html 很熟练可以直接自定义 html，它支持 html 的各种特性，完全交给用户自定义布局和交互（一些 html5 和 css3 最新特性取决于用户的浏览器版本）。 你可以在 html 里面完成：
- 布局：复杂的界面，各种响应式布局
- 媒体：图片、视频、动画和其他形式的媒体
- 第三方资源：可以链接 cdn 上的 css，javascript
- 字体：添加任何字体以符合您的主题
你甚至可以用一套代码适配 WebPush 和 AppPush，只要你把响应式布局设计好。
使用要求
- WebpushSDK: 2.2.0+
- Android SDK: 4.5.0+
- iOS SDK: 4.5.0+
API 说明
AppPush
// 关闭弹窗
MTPushSdk.close()
// 打开指定url
MTPushSdk.openUrl(event,'https://www.engagelab.com')
// 打开deeplink
MTPushSdk.openDeeplink(event,'twitter://')
//打开通知权限请求弹窗
MTPushSdk.askPushPermission()
// 关闭弹窗
MTPushSdk.close()
// 打开指定url
MTPushSdk.openUrl(event,'https://www.engagelab.com')
// 打开deeplink
MTPushSdk.openDeeplink(event,'twitter://')
//打开通知权限请求弹窗
MTPushSdk.askPushPermission()
此代码块在浮窗中显示
WebPush
// 关闭弹窗
MTPushSdk.close()
// 关闭弹窗
MTPushSdk.close()
此代码块在浮窗中显示
示例
AppPush
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>engagelab example</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.modal {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-inner {
box-shadow: rgb(0 0 0 / 30%) 0px 0px 12.5px,
rgb(0 0 0 / 15%) 0px 0px 2.5px;
margin: 0 20px;
padding: 20px;
position: relative;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #fff;
}
.modal-content img {
margin: 20px auto;
display: block;
width: 100%;
}
.title {
text-align: center;
font-size: 20px;
margin-top: 20px;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
}
button {
font-size: 16px;
color: #fff;
background-color: #1f8feb;
width: 100%;
padding: 12px;
border-radius: 4px;
border: none;
margin-bottom: 12px;
}
</style>
</head>
<body>
<div class="modal">
<div class="modal-inner">
<div class="modal-head">
<div class="title">这是标题</div>
<div class="close-btn">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="AppPush" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="aaa" transform="translate(-315.000000, -123.000000)">
<g id="bbb" transform="translate(315.000000, 123.000000)">
<path
d="M19.7355871,10.2465191 C20.072232,10.583164 20.072232,11.1289733 19.7355871,11.4656182 L16.2100354,14.9900354 L19.7327572,18.5129305 C20.069603,18.8497763 20.069603,19.3959113 19.7327572,19.7327572 C19.3959113,20.069603 18.8497763,20.069603 18.5129305,19.7327572 L14.9900354,16.2100354 L11.4656182,19.7355871 C11.1289733,20.072232 10.583164,20.072232 10.2465191,19.7355871 C9.90987416,19.3989422 9.90987416,18.8531329 10.2465191,18.516488 L13.7710354,14.9910354 L10.249349,11.4691757 C9.91250317,11.1323298 9.91250317,10.5861948 10.249349,10.249349 C10.5861948,9.91250317 11.1323298,9.91250317 11.4691757,10.249349 L14.9910354,13.7710354 L18.516488,10.2465191 C18.8531329,9.90987416 19.3989422,9.90987416 19.7355871,10.2465191 Z"
id="ccc" fill="#000"></path>
</g>
</g>
</g>
</svg>
</div>
</div>
<div class="modal-content">
<img src="https://res.engagelab.net/oversea/push/inappmessage/chapin-image.png" />
<div class="modal-btns">
<button id="url">Open the URL</button>
<button id="deeplink">Open Deeplink</button>
<button id="permission">Push Permission Prompt</button>
<button id="close">close</button>
</div>
</div>
</div>
</div>
<script>
document.querySelector("#url").addEventListener("click", (event) => {
MTPushSdk.openUrl(event, "https://www.engagelab.com");
});
document.querySelector("#deeplink").addEventListener("click", (event) => {
MTPushSdk.openDeeplink(event, "twitter://`");
});
document.querySelector("#permission").addEventListener("click", (event) => {
MTPushSdk.askPushPermission(event);
});
document.querySelector("#close").addEventListener("click", (event) => {
MTPushSdk.close(event);
});
document.querySelector(".close-btn").addEventListener("click", (event) => {
MTPushSdk.close(event);
});
</script>
</body>
</html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>engagelab example</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.modal {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-inner {
box-shadow: rgb(0 0 0 / 30%) 0px 0px 12.5px,
rgb(0 0 0 / 15%) 0px 0px 2.5px;
margin: 0 20px;
padding: 20px;
position: relative;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #fff;
}
.modal-content img {
margin: 20px auto;
display: block;
width: 100%;
}
.title {
text-align: center;
font-size: 20px;
margin-top: 20px;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
}
button {
font-size: 16px;
color: #fff;
background-color: #1f8feb;
width: 100%;
padding: 12px;
border-radius: 4px;
border: none;
margin-bottom: 12px;
}
</style>
</head>
<body>
<div class="modal">
<div class="modal-inner">
<div class="modal-head">
<div class="title">这是标题</div>
<div class="close-btn">
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="AppPush" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="aaa" transform="translate(-315.000000, -123.000000)">
<g id="bbb" transform="translate(315.000000, 123.000000)">
<path
d="M19.7355871,10.2465191 C20.072232,10.583164 20.072232,11.1289733 19.7355871,11.4656182 L16.2100354,14.9900354 L19.7327572,18.5129305 C20.069603,18.8497763 20.069603,19.3959113 19.7327572,19.7327572 C19.3959113,20.069603 18.8497763,20.069603 18.5129305,19.7327572 L14.9900354,16.2100354 L11.4656182,19.7355871 C11.1289733,20.072232 10.583164,20.072232 10.2465191,19.7355871 C9.90987416,19.3989422 9.90987416,18.8531329 10.2465191,18.516488 L13.7710354,14.9910354 L10.249349,11.4691757 C9.91250317,11.1323298 9.91250317,10.5861948 10.249349,10.249349 C10.5861948,9.91250317 11.1323298,9.91250317 11.4691757,10.249349 L14.9910354,13.7710354 L18.516488,10.2465191 C18.8531329,9.90987416 19.3989422,9.90987416 19.7355871,10.2465191 Z"
id="ccc" fill="#000"></path>
</g>
</g>
</g>
</svg>
</div>
</div>
<div class="modal-content">
<img src="https://res.engagelab.net/oversea/push/inappmessage/chapin-image.png" />
<div class="modal-btns">
<button id="url">Open the URL</button>
<button id="deeplink">Open Deeplink</button>
<button id="permission">Push Permission Prompt</button>
<button id="close">close</button>
</div>
</div>
</div>
</div>
<script>
document.querySelector("#url").addEventListener("click", (event) => {
MTPushSdk.openUrl(event, "https://www.engagelab.com");
});
document.querySelector("#deeplink").addEventListener("click", (event) => {
MTPushSdk.openDeeplink(event, "twitter://`");
});
document.querySelector("#permission").addEventListener("click", (event) => {
MTPushSdk.askPushPermission(event);
});
document.querySelector("#close").addEventListener("click", (event) => {
MTPushSdk.close(event);
});
document.querySelector(".close-btn").addEventListener("click", (event) => {
MTPushSdk.close(event);
});
</script>
</body>
</html>
此代码块在浮窗中显示
WebPush
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>engagelab example</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden !important;
}
.modal .modal-bg {
background: rgba(15, 20, 29, 0.4);
position: fixed;
inset: 0;
}
.modal .modal-inner {
position: fixed;
bottom: 16px;
right: 16px;
width: 300px;
background: #ffffff;
border-radius: 8px;
padding: 16px;
z-index: 10;
}
.modal .modal-head {
display: flex;
position: relative;
}
.modal .modal-head svg {
position: absolute;
top: -6px;
right: -6px;
cursor: pointer;
}
.modal .modal-head .name {
color: #253044;
font-weight: 500;
}
.modal .modal-head .position {
color: rgba(37, 48, 68, 0.52);
font-size: 12px;
}
.modal .modal-head .avatar {
width: 36px;
height: 36px;
border-radius: 50%;
left: 16px;
top: 16px;
}
.modal .modal-head img {
width: 100%;
height: 100%;
}
.modal .info {
margin-left: 6px;
}
.modal .modal-content {
margin-top: 20px;
color: rgba(37, 48, 68, 0.84);
font-size: 12px;
}
.modal .modal-footer {
margin-top: 42px;
display: flex;
}
.modal .modal-footer a {
width: 14px;
height: 14px;
margin-right: 16px;
cursor: pointer;
}
.modal .facebook {
background: url("https://res.engagelab.net/oversea/push/inappmessage/facebook.png")
no-repeat;
background-size: 100% 100%;
}
.modal .facebook:hover {
background: url("https://res.engagelab.net/oversea/push/inappmessage/facebook-hover.png")
no-repeat;
background-size: 100% 100%;
}
.modal .linkedIn {
background: url("https://res.engagelab.net/oversea/push/inappmessage/linkedIn.png")
no-repeat;
background-size: 100% 100%;
}
.modal .linkedIn:hover {
background: url("https://res.engagelab.net/oversea/push/inappmessage/linkedIn-hover.png")
no-repeat;
background-size: 100% 100%;
}
.modal .instagram {
background: url("https://res.engagelab.net/oversea/push/inappmessage/instagram.png")
no-repeat;
background-size: 100% 100%;
}
.modal .instagram:hover {
background: url("https://res.engagelab.net/oversea/push/inappmessage/instagram-hover.png")
no-repeat;
background-size: 100% 100%;
}
.modal .youtube {
background: url("https://res.engagelab.net/oversea/push/inappmessage/youtube.png")
no-repeat;
background-size: 100% 100%;
}
.modal .youtube:hover {
background: url("https://res.engagelab.net/oversea/push/inappmessage/youtube-hover.png")
no-repeat;
background-size: 100% 100%;
}
.modal .twitter {
background: url("https://res.engagelab.net/oversea/push/inappmessage/twitter.png")
no-repeat;
background-size: 100% 100%;
}
.modal .twitter:hover {
background: url("https://res.engagelab.net/oversea/push/inappmessage/twitter-hover.png")
no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="modal">
<div class="modal-bg"></div>
<div class="modal-inner">
<div class="modal-head">
<div class="avatar">
<img
src="https://res.engagelab.net/oversea/push/inappmessage/avatar.png"
/>
</div>
<div class="info">
<div class="name">Davis</div>
<div class="position">Customer Service Specialist</div>
</div>
<svg
width="30px"
height="30px"
viewBox="0 0 30 30"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="close-btn"
>
<path
d="M19.7355871,10.2465191 C20.072232,10.583164 20.072232,11.1289733 19.7355871,11.4656182 L16.2100354,14.9900354 L19.7327572,18.5129305 C20.069603,18.8497763 20.069603,19.3959113 19.7327572,19.7327572 C19.3959113,20.069603 18.8497763,20.069603 18.5129305,19.7327572 L14.9900354,16.2100354 L11.4656182,19.7355871 C11.1289733,20.072232 10.583164,20.072232 10.2465191,19.7355871 C9.90987416,19.3989422 9.90987416,18.8531329 10.2465191,18.516488 L13.7710354,14.9910354 L10.249349,11.4691757 C9.91250317,11.1323298 9.91250317,10.5861948 10.249349,10.249349 C10.5861948,9.91250317 11.1323298,9.91250317 11.4691757,10.249349 L14.9910354,13.7710354 L18.516488,10.2465191 C18.8531329,9.90987416 19.3989422,9.90987416 19.7355871,10.2465191 Z"
id="ccc"
fill="#253044ad"
></path>
</svg>
</div>
<div class="modal-content">
Hello, if you need any assistance during use.please feel free to
contact me. Thanks !
</div>
<div class="modal-footer">
<a href="" class="facebook"></a>
<a href="" class="linkedIn"></a>
<a href="" class="instagram"></a>
<a href="" class="youtube"></a>
<a href="" class="twitter"></a>
</div>
</div>
</div>
<script>
document.querySelector("#close-btn").addEventListener("click", () => {
MTPushSdk.close();
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>engagelab example</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden !important;
}
.modal .modal-bg {
background: rgba(15, 20, 29, 0.4);
position: fixed;
inset: 0;
}
.modal .modal-inner {
position: fixed;
bottom: 16px;
right: 16px;
width: 300px;
background: #ffffff;
border-radius: 8px;
padding: 16px;
z-index: 10;
}
.modal .modal-head {
display: flex;
position: relative;
}
.modal .modal-head svg {
position: absolute;
top: -6px;
right: -6px;
cursor: pointer;
}
.modal .modal-head .name {
color: #253044;
font-weight: 500;
}
.modal .modal-head .position {
color: rgba(37, 48, 68, 0.52);
font-size: 12px;
}
.modal .modal-head .avatar {
width: 36px;
height: 36px;
border-radius: 50%;
left: 16px;
top: 16px;
}
.modal .modal-head img {
width: 100%;
height: 100%;
}
.modal .info {
margin-left: 6px;
}
.modal .modal-content {
margin-top: 20px;
color: rgba(37, 48, 68, 0.84);
font-size: 12px;
}
.modal .modal-footer {
margin-top: 42px;
display: flex;
}
.modal .modal-footer a {
width: 14px;
height: 14px;
margin-right: 16px;
cursor: pointer;
}
.modal .facebook {
background: url("https://res.engagelab.net/oversea/push/inappmessage/facebook.png")
no-repeat;
background-size: 100% 100%;
}
.modal .facebook:hover {
background: url("https://res.engagelab.net/oversea/push/inappmessage/facebook-hover.png")
no-repeat;
background-size: 100% 100%;
}
.modal .linkedIn {
background: url("https://res.engagelab.net/oversea/push/inappmessage/linkedIn.png")
no-repeat;
background-size: 100% 100%;
}
.modal .linkedIn:hover {
background: url("https://res.engagelab.net/oversea/push/inappmessage/linkedIn-hover.png")
no-repeat;
background-size: 100% 100%;
}
.modal .instagram {
background: url("https://res.engagelab.net/oversea/push/inappmessage/instagram.png")
no-repeat;
background-size: 100% 100%;
}
.modal .instagram:hover {
background: url("https://res.engagelab.net/oversea/push/inappmessage/instagram-hover.png")
no-repeat;
background-size: 100% 100%;
}
.modal .youtube {
background: url("https://res.engagelab.net/oversea/push/inappmessage/youtube.png")
no-repeat;
background-size: 100% 100%;
}
.modal .youtube:hover {
background: url("https://res.engagelab.net/oversea/push/inappmessage/youtube-hover.png")
no-repeat;
background-size: 100% 100%;
}
.modal .twitter {
background: url("https://res.engagelab.net/oversea/push/inappmessage/twitter.png")
no-repeat;
background-size: 100% 100%;
}
.modal .twitter:hover {
background: url("https://res.engagelab.net/oversea/push/inappmessage/twitter-hover.png")
no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="modal">
<div class="modal-bg"></div>
<div class="modal-inner">
<div class="modal-head">
<div class="avatar">
<img
src="https://res.engagelab.net/oversea/push/inappmessage/avatar.png"
/>
</div>
<div class="info">
<div class="name">Davis</div>
<div class="position">Customer Service Specialist</div>
</div>
<svg
width="30px"
height="30px"
viewBox="0 0 30 30"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="close-btn"
>
<path
d="M19.7355871,10.2465191 C20.072232,10.583164 20.072232,11.1289733 19.7355871,11.4656182 L16.2100354,14.9900354 L19.7327572,18.5129305 C20.069603,18.8497763 20.069603,19.3959113 19.7327572,19.7327572 C19.3959113,20.069603 18.8497763,20.069603 18.5129305,19.7327572 L14.9900354,16.2100354 L11.4656182,19.7355871 C11.1289733,20.072232 10.583164,20.072232 10.2465191,19.7355871 C9.90987416,19.3989422 9.90987416,18.8531329 10.2465191,18.516488 L13.7710354,14.9910354 L10.249349,11.4691757 C9.91250317,11.1323298 9.91250317,10.5861948 10.249349,10.249349 C10.5861948,9.91250317 11.1323298,9.91250317 11.4691757,10.249349 L14.9910354,13.7710354 L18.516488,10.2465191 C18.8531329,9.90987416 19.3989422,9.90987416 19.7355871,10.2465191 Z"
id="ccc"
fill="#253044ad"
></path>
</svg>
</div>
<div class="modal-content">
Hello, if you need any assistance during use.please feel free to
contact me. Thanks !
</div>
<div class="modal-footer">
<a href="" class="facebook"></a>
<a href="" class="linkedIn"></a>
<a href="" class="instagram"></a>
<a href="" class="youtube"></a>
<a href="" class="twitter"></a>
</div>
</div>
</div>
<script>
document.querySelector("#close-btn").addEventListener("click", () => {
MTPushSdk.close();
});
</script>
</body>
</html>
此代码块在浮窗中显示
常见问题
旧版本如何发送应用内消息
对于旧版本的应用程序,无法发送应用内消息。要发送应用内消息,需要确保使用以下最低版本要求:
- webpushSDK: 2.2.0
- Android: 4.5.0
- iOS: 4.5.0
确保您的应用程序已升级到这些最低版本,然后即可发送应用内消息。
为什么我写了 HTML 但是没收到消息？
要成功发送应用内消息,除了确保您的应用程序版本已升级外,还需要确保您编写的 HTML 内容没有任何代码错误。请仔细检查 HTML 代码,确保语法和格式正确无误。
为什么只能填网络图片,能提供上传图片的功能吗？
目前我们的系统只支持填写网络图片的链接,暂不支持上传图片的功能。
