Device Display
Default
<e-device-doc></e-device-doc><e-device-doc></e-device-doc>JavaScript
iOS Push
iOS Push on lock screen
<e-device>
<div class="e-device-push is-ios_phone_default is-lockscreen">
<div class="e-device-push__notification is-ios_phone_default is-lockscreen">
<div class="e-device-push__header is-ios_phone_default is-lockscreen">
<img class="e-device-push__icon is-ios_phone_default is-lockscreen" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-ios_phone_default is-lockscreen">
App name
</div>
<div class="e-device-push__timeago is-ios_phone_default is-lockscreen">
now
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-ios_phone_default is-lockscreen has-media" style="background-image: url('https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg');"></div>
<div class="e-device-push__container is-ios_phone_default is-lockscreen">
<div class="e-device-push__headline is-ios_phone_default is-lockscreen">
Headline
</div>
<div class="e-device-push__content is-ios_phone_default is-lockscreen">
Content
</div>
</div>
<div class="e-device-push__more is-ios_phone_default is-lockscreen">
Press for more
</div>
</div>
</div>
</e-device><e-device>
<div class="e-device-push is-ios_phone_default is-lockscreen">
<div class="e-device-push__notification is-ios_phone_default is-lockscreen">
<div class="e-device-push__header is-ios_phone_default is-lockscreen">
<img class="e-device-push__icon is-ios_phone_default is-lockscreen" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-ios_phone_default is-lockscreen">
App name
</div>
<div class="e-device-push__timeago is-ios_phone_default is-lockscreen">
now
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-ios_phone_default is-lockscreen has-media" style="background-image: url('https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg');"></div>
<div class="e-device-push__container is-ios_phone_default is-lockscreen">
<div class="e-device-push__headline is-ios_phone_default is-lockscreen">
Headline
</div>
<div class="e-device-push__content is-ios_phone_default is-lockscreen">
Content
</div>
</div>
<div class="e-device-push__more is-ios_phone_default is-lockscreen">
Press for more
</div>
</div>
</div>
</e-device>JavaScript
App name
now
Headline
Content
Press for more
iOS Push message as banner
<e-device>
<div class="e-device-push is-ios_phone_default is-alert">
<div class="e-device-push__notification is-ios_phone_default is-alert">
<div class="e-device-push__header is-ios_phone_default is-alert">
<img class="e-device-push__icon is-ios_phone_default is-alert" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-ios_phone_default is-alert">
App name
</div>
<div class="e-device-push__timeago is-ios_phone_default is-alert">
now
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-ios_phone_default is-alert has-media" style="background-image: url('https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg');"></div>
<div class="e-device-push__container is-ios_phone_default is-alert">
<div class="e-device-push__headline is-ios_phone_default is-alert">
Headline
</div>
<div class="e-device-push__content is-ios_phone_default is-alert">
Content
</div>
</div>
</div>
</div>
</e-device><e-device>
<div class="e-device-push is-ios_phone_default is-alert">
<div class="e-device-push__notification is-ios_phone_default is-alert">
<div class="e-device-push__header is-ios_phone_default is-alert">
<img class="e-device-push__icon is-ios_phone_default is-alert" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-ios_phone_default is-alert">
App name
</div>
<div class="e-device-push__timeago is-ios_phone_default is-alert">
now
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-ios_phone_default is-alert has-media" style="background-image: url('https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg');"></div>
<div class="e-device-push__container is-ios_phone_default is-alert">
<div class="e-device-push__headline is-ios_phone_default is-alert">
Headline
</div>
<div class="e-device-push__content is-ios_phone_default is-alert">
Content
</div>
</div>
</div>
</div>
</e-device>JavaScript
App name
now
Headline
Content
iOS Push on home screen
<e-device>
<div class="e-device-push is-ios_phone_default has-media is-expanded">
<div class="e-device-push__notification is-ios_phone_default has-media is-expanded">
<div class="e-device-push__header is-ios_phone_default has-media is-expanded">
<img class="e-device-push__icon is-ios_phone_default has-media is-expanded" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-ios_phone_default has-media is-expanded">
App name
</div>
<div class="e-device-push__timeago is-ios_phone_default has-media is-expanded">
now
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-ios_phone_default has-media is-expanded" style="background-image: url('https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg');"></div>
<div class="e-device-push__container is-ios_phone_default has-media is-expanded">
<div class="e-device-push__headline is-ios_phone_default has-media is-expanded">
Headline
</div>
<div class="e-device-push__content is-ios_phone_default has-media is-expanded">
Content
</div>
</div>
<div class="e-device-push__more is-ios_phone_default has-media is-expanded">
Press for more
</div>
<div class="e-device-push__buttons is-ios_phone_default">
<div class="e-device-push__button is-ios_phone_default">
<div class="e-device-push__button_content">
Shop Now
</div>
</div>
<div class="e-device-push__button is-ios_phone_default">
<div class="e-device-push__button_content">
Maybe Later
</div>
</div>
<div class="e-device-push__button is-ios_phone_default">
<div class="e-device-push__button_content">
Reply
</div>
</div>
<div class="e-device-push__button is-ios_phone_default">
<div class="e-device-push__button_content">
Search
</div>
</div>
<div class="e-device-push__button is-ios_phone_default">
<div class="e-device-push__button_content">
Add
</div>
</div>
</div>
</div>
</div>
</e-device><e-device>
<div class="e-device-push is-ios_phone_default has-media is-expanded">
<div class="e-device-push__notification is-ios_phone_default has-media is-expanded">
<div class="e-device-push__header is-ios_phone_default has-media is-expanded">
<img class="e-device-push__icon is-ios_phone_default has-media is-expanded" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-ios_phone_default has-media is-expanded">
App name
</div>
<div class="e-device-push__timeago is-ios_phone_default has-media is-expanded">
now
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-ios_phone_default has-media is-expanded" style="background-image: url('https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg');"></div>
<div class="e-device-push__container is-ios_phone_default has-media is-expanded">
<div class="e-device-push__headline is-ios_phone_default has-media is-expanded">
Headline
</div>
<div class="e-device-push__content is-ios_phone_default has-media is-expanded">
Content
</div>
</div>
<div class="e-device-push__more is-ios_phone_default has-media is-expanded">
Press for more
</div>
<div class="e-device-push__buttons is-ios_phone_default">
<div class="e-device-push__button is-ios_phone_default">
<div class="e-device-push__button_content">
Shop Now
</div>
</div>
<div class="e-device-push__button is-ios_phone_default">
<div class="e-device-push__button_content">
Maybe Later
</div>
</div>
<div class="e-device-push__button is-ios_phone_default">
<div class="e-device-push__button_content">
Reply
</div>
</div>
<div class="e-device-push__button is-ios_phone_default">
<div class="e-device-push__button_content">
Search
</div>
</div>
<div class="e-device-push__button is-ios_phone_default">
<div class="e-device-push__button_content">
Add
</div>
</div>
</div>
</div>
</div>
</e-device>JavaScript
Android Push
Android Push on lock screen
<e-device type="android">
<div class="e-device-push is-android_phone_default is-lockscreen">
<div class="e-device-push__notification is-android_phone_default is-lockscreen">
<div class="e-device-push__header is-android_phone_default is-lockscreen">
<img class="e-device-push__icon is-android_phone_default is-lockscreen" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-android_phone_default is-lockscreen">
App name
</div>
<div class="e-device-push__timeago is-android_phone_default is-lockscreen">
now
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-android_phone_default is-lockscreen has-media" style="background-image: url('https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg');"></div>
<div class="e-device-push__container is-android_phone_default is-lockscreen">
<div class="e-device-push__headline is-android_phone_default is-lockscreen">
Headline
</div>
<div class="e-device-push__content is-android_phone_default is-lockscreen">
Content
</div>
</div>
<div class="e-device-push__more is-android_phone_default is-lockscreen">
Press for more
</div>
<div class="e-device-push__buttons is-android_phone_default">
<div class="e-device-push__button is-android_phone_default">
<div class="e-device-push__button_content">
<div class="e-device-push__button_content">
Shop Now
</div>
</div>
</div>
<div class="e-device-push__button is-android_phone_default">
<div class="e-device-push__button_content">
<div class="e-device-push__button_content">
Maybe Later
</div>
</div>
</div>
<div class="e-device-push__button is-android_phone_default">
<div class="e-device-push__button_content">
<div class="e-device-push__button_content">
Reply
</div>
</div>
</div>
</div>
</div>
</div>
</e-device><e-device type="android">
<div class="e-device-push is-android_phone_default is-lockscreen">
<div class="e-device-push__notification is-android_phone_default is-lockscreen">
<div class="e-device-push__header is-android_phone_default is-lockscreen">
<img class="e-device-push__icon is-android_phone_default is-lockscreen" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-android_phone_default is-lockscreen">
App name
</div>
<div class="e-device-push__timeago is-android_phone_default is-lockscreen">
now
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-android_phone_default is-lockscreen has-media" style="background-image: url('https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg');"></div>
<div class="e-device-push__container is-android_phone_default is-lockscreen">
<div class="e-device-push__headline is-android_phone_default is-lockscreen">
Headline
</div>
<div class="e-device-push__content is-android_phone_default is-lockscreen">
Content
</div>
</div>
<div class="e-device-push__more is-android_phone_default is-lockscreen">
Press for more
</div>
<div class="e-device-push__buttons is-android_phone_default">
<div class="e-device-push__button is-android_phone_default">
<div class="e-device-push__button_content">
<div class="e-device-push__button_content">
Shop Now
</div>
</div>
</div>
<div class="e-device-push__button is-android_phone_default">
<div class="e-device-push__button_content">
<div class="e-device-push__button_content">
Maybe Later
</div>
</div>
</div>
<div class="e-device-push__button is-android_phone_default">
<div class="e-device-push__button_content">
<div class="e-device-push__button_content">
Reply
</div>
</div>
</div>
</div>
</div>
</div>
</e-device>JavaScript
App name
now
Headline
Content
Press for more
Android Push message as banner
<e-device type="android">
<div class="e-device-push is-android_phone_default is-alert">
<div class="e-device-push__notification is-android_phone_default is-alert">
<div class="e-device-push__header is-android_phone_default is-alert">
<img class="e-device-push__icon e-device-push__editable is-android_phone_default is-alert" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-android_phone_default is-alert">
App name
</div>
<div class="e-device-push__timeago is-android_phone_default is-alert">
now
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-android_phone_default is-alert has-media" style="background-image: url('https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg');"></div>
<div class="e-device-push__container is-android_phone_default is-alert">
<div class="e-device-push__headline is-android_phone_default is-alert">
Headline
</div>
<div class="e-device-push__content is-android_phone_default is-alert">
Content
</div>
</div>
</div>
</div>
</e-device><e-device type="android">
<div class="e-device-push is-android_phone_default is-alert">
<div class="e-device-push__notification is-android_phone_default is-alert">
<div class="e-device-push__header is-android_phone_default is-alert">
<img class="e-device-push__icon e-device-push__editable is-android_phone_default is-alert" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-android_phone_default is-alert">
App name
</div>
<div class="e-device-push__timeago is-android_phone_default is-alert">
now
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-android_phone_default is-alert has-media" style="background-image: url('https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg');"></div>
<div class="e-device-push__container is-android_phone_default is-alert">
<div class="e-device-push__headline is-android_phone_default is-alert">
Headline
</div>
<div class="e-device-push__content is-android_phone_default is-alert">
Content
</div>
</div>
</div>
</div>
</e-device>JavaScript
App name
now
Headline
Content
Android Push on home screen
<e-device type="android">
<div class="e-device-push is-android_phone_default is-expanded has-media">
<div class="e-device-push__notification is-android_phone_default is-expanded has-media">
<div class="e-device-push__header is-android_phone_default is-expanded has-media">
<img class="e-device-push__icon e-device-push__editable is-android_phone_default is-expanded has-media" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-android_phone_default is-expanded has-media">
App name
</div>
<div class="e-device-push__timeago is-android_phone_default is-expanded has-media">
now
</div>
</div>
<div class="e-device-push__container is-android_phone_default is-expanded has-media">
<div class="e-device-push__headline">
Headline
</div>
<div class="e-device-push__content is-android_phone_default is-expanded has-media">
Content
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-android_phone_default is-expanded has-media" style="background-image: url("https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg");"></div></div></div>
</e-device><e-device type="android">
<div class="e-device-push is-android_phone_default is-expanded has-media">
<div class="e-device-push__notification is-android_phone_default is-expanded has-media">
<div class="e-device-push__header is-android_phone_default is-expanded has-media">
<img class="e-device-push__icon e-device-push__editable is-android_phone_default is-expanded has-media" src="https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg">
<div class="e-device-push__apptitle is-android_phone_default is-expanded has-media">
App name
</div>
<div class="e-device-push__timeago is-android_phone_default is-expanded has-media">
now
</div>
</div>
<div class="e-device-push__container is-android_phone_default is-expanded has-media">
<div class="e-device-push__headline">
Headline
</div>
<div class="e-device-push__content is-android_phone_default is-expanded has-media">
Content
</div>
</div>
<div class="e-device-push__media e-device-push__editable is-android_phone_default is-expanded has-media" style="background-image: url("https://assets.emarsys.net/ui/static/images/e-device/e-device-push-ios-icon-mail.svg");"></div></div></div>
</e-device>JavaScript
Push with tokeninputs
<e-device>
<e-device-push app-title="Mail" editable>
<e-token-input class="e-device-push__headline" placeholder="From Name" no-style value="From Name <span name="token" type="tokentype" data='{ "z": "1" }'></span>"></e-token-input>
<e-token-input class="e-device-push__headline" placeholder="Title" no-style value="Title Goes <span name="token" type="tokentype" data='{ "z": "1" }'></span> Here"></e-token-input>
<e-token-input class="e-device-push__content is-ios_phone_default is-lockscreen" placeholder="Message" rows="2" no-style value="Pre-header <span name="token" type="tokentype" data='{ "z": "1" }'></span> Goes Here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."></e-token-input>
</e-device-push>
</e-device><e-device>
<e-device-push app-title="Mail" editable>
<e-token-input class="e-device-push__headline" placeholder="From Name" no-style value="From Name <span name="token" type="tokentype" data='{ "z": "1" }'></span>"></e-token-input>
<e-token-input class="e-device-push__headline" placeholder="Title" no-style value="Title Goes <span name="token" type="tokentype" data='{ "z": "1" }'></span> Here"></e-token-input>
<e-token-input class="e-device-push__content is-ios_phone_default is-lockscreen" placeholder="Message" rows="2" no-style value="Pre-header <span name="token" type="tokentype" data='{ "z": "1" }'></span> Goes Here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."></e-token-input>
</e-device-push>
</e-device>JavaScript
Message list with tokeninput
<e-device>
<e-device-content type="messagelist" editable>
<e-token-input class="e-device-content__fromname" placeholder="From" no-style value="From Name <span name="token" type="tokentype" data='{ "z": "1" }'></span>"></e-token-input>
<e-token-input class="e-device-content__subject" placeholder="Title" no-style value="Title Goes <span name="token" type="tokentype" data='{ "z": "1" }'></span> Here"></e-token-input>
<e-token-input class="e-device-content__preheader" placeholder="Message" no-style rows="2" value="Pre-header <span name="token" type="tokentype" data='{ "z": "1" }'></span> Goes Here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."></e-token-input>
</e-device-content>
</e-device><e-device>
<e-device-content type="messagelist" editable>
<e-token-input class="e-device-content__fromname" placeholder="From" no-style value="From Name <span name="token" type="tokentype" data='{ "z": "1" }'></span>"></e-token-input>
<e-token-input class="e-device-content__subject" placeholder="Title" no-style value="Title Goes <span name="token" type="tokentype" data='{ "z": "1" }'></span> Here"></e-token-input>
<e-token-input class="e-device-content__preheader" placeholder="Message" no-style rows="2" value="Pre-header <span name="token" type="tokentype" data='{ "z": "1" }'></span> Goes Here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."></e-token-input>
</e-device-content>
</e-device>JavaScript
SMS
<e-device>
<div class="e-device-sms">
<input class="e-device-sms__fromname e-device-sms__fromname-editable" placeholder="Enter from name" type="text">
<div class="e-device-sms__content">
<div class="e-device-sms__message">
Lorem Ipsum
</div>
<div class="e-device-sms__counter">
0/160 GSM
</div>
</div>
</div>
</e-device><e-device>
<div class="e-device-sms">
<input class="e-device-sms__fromname e-device-sms__fromname-editable" placeholder="Enter from name" type="text">
<div class="e-device-sms__content">
<div class="e-device-sms__message">
Lorem Ipsum
</div>
<div class="e-device-sms__counter">
0/160 GSM
</div>
</div>
</div>
</e-device>JavaScript
0/160 GSM
e-device API Reference
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| width | Sets the width of the device (keeps aspect ratio) | number | ||
| height | Sets the height of the device (keeps aspect ratio) | number | ||
| type | Sets the type of the device (iphone and computer for now) | string |
e-device-content API Reference
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| type | Sets the type of the content (message list of lockscreen for now) | string | ||
| from-name | Sets from name field, single line | string | ||
| subject | Sets subject field | string | ||
| preheader | Sets preheader field | string |
e-device-push API Reference
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| type | Sets the type of the push: lockscreen, alert, noc | string | lockscreen | |
| device | Sets the device of the push: ios-phone-default, android-phone-default | string | ios-phone-default | |
| icon | Sets push icon image | url as string | ||
| app-title | Sets push app name | string | ||
| headline | Sets push headline | string | ||
| subtitle | Sets push subtitle | string | ||
| content | Sets push content | string | ||
| expanded | Sets expanded state for push | boolean | false |