NOTE
To add Embedded Messaging to your Iterable account, talk to your customer success manager.
This article provides a high-level look at the out-of-the-box embedded message views provided by Iterable's iOS, Android, and Web SDKs.
In this article
Out-of-the-box views vs. custom views
There are two ways to display embedded messages in your apps and on your websites. You can use:
Custom views — Fully custom message views designed by your designers and implemented by your engineers. With custom views, you can build a message UI that perfectly match the look and feel of your app or website. However, since they're completely custom, designing and building custom views can extend your implementation time for embedded messages.
Out-of-the-box views — Pre-created, customizable message displays included with Iterable's iOS, Android, and Web SDKs: cards, banners, and notifications. These components can help you get up and running with embedded messaging, and their styles can be customized in some ways. However, since they're off-the-shelf components, they may not match the interface of your app or website as well as a custom view.
Out-of-the-box view specifications
Iterable's iOS, Android, and Web SDKs provide three kinds of out-of-the-box views: cards, banners, and notifications.
NOTES
- Message dimensions shown below are only examples. Developers can modify the size of an out-of-the-box message display as needed when adding it to a layout.
- Before activating an embedded message campaign, always test it on multiple devices and screen sizes to ensure it displays as expected.
Cards
Cards have:
Header image - Displayed using aspect fill (which means that portions of the image may be cropped). The size of this image depends on the amount of space you allocate to the embedded message view in the layout of your app or website.
Title text - On iOS and Android, up to two lines of title text, truncated with an ellipsis. On the web, cards by default can grow vertically to accommodate the provided title text.
Body text - On iOS and Android, up to two lines of body text, truncated with an ellipsis. On the web, cards by default can grow vertically to accommodate the provided body text.
Buttons - Two buttons, one button, or no buttons.
On iOS and Android, when placing a card in your app's layout, fully specify its size. On these platforms, cards do not grow to accommodate longer content, and minimum dimensions are:
- Width: 150 pt / dp
- Height: 300 pt / dp
For more information, read Customization options and Fonts.
Banners
Banners have:
-
Corner image - Displayed using aspect fill. Depending on the size of your message and the size of your image, portions of the image may be cropped.
- Image size on iOS: 100x100 pt
- Image size on Android: 80x80 dp
- Image size on the web: 70x70 px
Title text - On iOS and Android, up to two lines of title text, truncated with an ellipsis. On the web, banners by default can grow vertically to accommodate the provided title text.
Body text - On iOS and Android, up to two lines of body text, truncated with an ellipsis. On the web, banners by default can grow vertically to accommodate the provided body text.
Buttons - Two buttons, one button, or no buttons.
On iOS and Android, when placing a banner in your app's layout, fully specify its size. On these platforms, banners do not grow to accommodate longer content, and minimum dimensions are:
- Width: 250 pt / dp
- Height: 180 pt / dp
For more information, read Customization options and Fonts.
Notifications
Notifications have:
No image.
Title text - On iOS and Android, up to two lines of title text, truncated with an ellipsis. On the web, notifications by default can grow vertically to accommodate the provided title text.
Body text - On iOS and Android, up to two lines of body text, truncated with an ellipsis. On the web, notifications by default can grow vertically to accommodate the provided body text.
Buttons - Two buttons, one button, or no buttons.
On iOS and Android, when placing a notification in your app's layout, fully specify its size. On these platforms, notifications do not grow to accommodate longer content, and minimum notification dimensions are:
- Width: 150 pt / dp
- Height: 150 pt / dp
For more information, read Customization options and Fonts.
Customization options
You can customize the following traits of an out-of-the-box message views:
- Background color
- Border color
- Border width
- Border corner radius
- Primary button background color
- Primary button text color
- Secondary button background color
- Secondary button text color
- Title text color
- Body text color
Fonts
Title text:
- iOS: System font, bold, 16 pt
- Android: System font, bold, 16 sp
- Web: Website default font, bold, 20 px
Body text:
- iOS: System font, 14 pt
- Android: System font, 14 sp
- Web: Website default font, 17 px
Button text:
- iOS: System font, 15 pt
- Android: System font, 14 sp
- Web: Depends on website styles, bold, 16 px
Want to learn more?
For developer documentation about Embedded Messaging, including information about custom styles for out-of-the-box views, see: