AppPush
WebPush
WhatsApp
Email
SMS
OTP
In-App Message HTML Editing Guide
Last updated：2024-08-14
If you are a beginner in HTML, we recommend using our pre-defined message types. If you are proficient in HTML, you can fully customize your HTML, supporting various features and allowing complete user control over layout and interaction (some of the latest HTML5 and CSS3 features depend on the user's browser version).
Inside the HTML, you can accomplish:
- Layout: Complex interfaces and various responsive layouts
- Media: Images, videos, animations, and other forms of media
- Third-party resources: Link to CSS and JavaScript on CDNs
- Fonts: Add any fonts to match your theme
You can even use a single codebase to adapt to WebPush and AppPush as long as you design a responsive layout.
Requirements
- WebpushSDK: 2.2.0+
- Android SDK: 4.5.0+
- iOS SDK: 4.5.0+
API Documentation
AppPush
// Close the popup
MTPushSdk.close()
// Open a specified URL
MTPushSdk.openUrl(event, 'https://www.engagelab.com')
// Open a deeplink
MTPushSdk.openDeeplink(event, 'twitter://')
// Open the notification permission request popup
MTPushSdk.askPushPermission()
// Close the popup
MTPushSdk.close()
// Open a specified URL
MTPushSdk.openUrl(event, 'https://www.engagelab.com')
// Open a deeplink
MTPushSdk.openDeeplink(event, 'twitter://')
// Open the notification permission request popup
MTPushSdk.askPushPermission()
This code block in the floating window
WebPush
// Close the popup
MTPushSdk.close()
// Close the popup
MTPushSdk.close()
This code block in the floating window
Examples
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">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 an URL</button>
<button id="deeplink">Open Deeplink</button>
<button id="permission">Push Permission Prompt</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">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 an URL</button>
<button id="deeplink">Open Deeplink</button>
<button id="permission">Push Permission Prompt</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>
This code block in the floating window
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>
This code block in the floating window
Common Questions
How to send in-app messages in older versions?
For older versions of the application, it is not possible to send in-app messages. To send in-app messages, you need to ensure the use of the following minimum version requirements:
- webpushSDK: 2.2.0
- Android: 4.5.0
- iOS: 4.5.0
Make sure your application has been upgraded to these minimum versions, then you can send in-app messages.
Why didn't I receive any messages after I wrote HTML?
To successfully send in-app messages, in addition to ensuring your application version has been upgraded, you also need to make sure the HTML content you wrote has no code errors. Please carefully check the HTML code to ensure the syntax and format are correct.
Why can I only fill in network images, can you provide an image upload feature?
Currently, our system only supports filling in the links of network images and does not support the image upload feature.
