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">打开 URL</button>
<button id="deeplink">打开 Deeplink</button>
<button id="permission">推送开启推送</button>
<button id="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">打开 URL</button>
<button id="deeplink">打开 Deeplink</button>
<button id="permission">推送开启推送</button>
<button id="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 程式碼,確保語法和格式正確無誤。
為什麼只能填網路圖片,能提供上傳圖片的功能嗎？
目前我們的系統只支援填寫網路圖片的連結,暫不支援上傳圖片的功能。
