Within Iterable's in-app message template editor, you can create in-app carousels.
In this article
Creating the template
In order to use custom CSS inside of an Iterable in-app, you must create a template via the WYSIWYG editor. If you are very uncomfortable with HTML, then you can build your in-app in the Beefree editor and export it to HTML for upload.
Notes
You must use full screen view to render this in-app carousel.
Adding a carousel
Example code:
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style type="text/css">body { font-family: Arial, sans-serif; } h1{ color:#232323; } h2 { color:#232323; } p { color: #4a4a4a; margin-top:-12px; } /* The Modal (background) */ .modal { display: yes; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ /* padding-top: 10%; padding-bottom: 10%;*/ /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.7); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #ffffff; border: 0; width: 85%; border-radius: 8px; max-width: 320px; /*max-height: calc(100% - 1em);*/ max-height: 90vh; margin: 0 auto; position: relative; animation-duration: 1.5s; animation-name: slide-up; animation-iteration-count: 1 } @media screen and (orientation:portrait) { .modal-content { top: 25%; } @keyframes slide-up { from { top: 100% } to { top: 25% } } } @media screen and (orientation:landscape) { .modal-content { top: 5vh; } @keyframes slide-up { from { top: 100% } to { top: 5vh; } } } .image-container { position: relative; width: 100%; border-top-left-radius: 8px; border-top-right-radius: 8px; } /* The Close Button */ .image-container .close { color: #9f9f9f; position: absolute; right: 12px; top: 12px; font-size: 40px; font-weight: light; background-color: transparent; border:none; text-decoration:none; } .contenttext{ padding-left:7.5%; padding-right:7.5%; padding-top: 0px; text-align: center; } .cta{ width:100%; text-align: center; padding-top: 8px; padding-bottom: 24px; } .cta .btn{ height:40px; background-color: #ed8623; border:0; border-radius: 40px; text-align: center; min-width: 120px; color: #ffffff; font-size: 0.875em; font-family: Arial, sans-serif; } .outside{ margin-top: 24px; font-size:.875em; text-align: center } .outside .dismiss{ color: #ffffff; background-color: transparent; border:none; } .carousel { position: relative; width:200px; border:10px solid white; margin:20px auto 40px auto; box-shadow:0px 0px 40px #000; } .carousel > img { display:none; width:100%; } .carousel > input { position:absolute; left:-9999px; } .carousel > input:checked + label + img { display:block; } .carousel > label, .carousel > input:checked ~ label ~ label ~ label ~ label { display:none; } .carousel > input:checked + label { display:block; left:0; } .carousel > input:checked ~ label ~ label ~ label { display:block; right:0; } .carousel > label { position:absolute; top:0; width:25%; height:100%; visibility:hidden; } .carousel > label:before { content:''; display:block; position:absolute; width:100%; height:100%; visibility:visible; } .carousel > label:after { display:block; position:absolute; top:50%; width:25px; height:25px; line-height:22px; margin:-15px 10px 0 10px; background-color:black; color:white; font-family:'Arial'; font-weight:bold; font-size:18px; text-align:center; visibility:hidden; border:2px solid white; border-radius:20px; box-shadow:0 3px 4px black; } .carousel > label:after { visibility:visible; } .carousel > input:checked + label:after { left:0; content:'\00AB'; } .carousel > input:checked ~ label ~ label ~ label:after { right:0; content:'\00BB'; } </style> </head> <body> <div id="myModal" class="modal"><!-- Modal content --> <div class="modal-content" style="padding-bottom: 10px;"> <div class="image-container"> <br /> <div style="text-align:center"><img alt="BGimage" style="max-width:180px;" width="172" src="https://static.iterable.com/f2111070fa144bf9b92868933306b744/19-08-08-iterable-logo-navy (1).png" /> </div> <a class="close" href="itbl://">×</a> </div> <div class="btn"> <div class="contenttext"> <h1><span style="color:#00185c;">The latest styles!</span> </h1> </div> </div> <div class="carousel"> <input id="image1" type="radio" checked="checked" name="image-selector" /> <label for="image4">View image 4</label> <img alt="" width="200" height="133" src="https://www.dropbox.com/s/6pzu0i8xe5vnuiw/mens-watch-and-ring_925x.jpg?dl=1" /> <input id="image2" type="radio" name="image-selector" /> <label for="image1">View image 1</label> <img alt="" width="200" height="133" src="https://www.dropbox.com/s/6hidqmdjngze1gg/man-using-smartphone_925x.jpg?dl=1" /> <input id="image3" type="radio" name="image-selector" /> <label for="image2">View image 2</label> <img alt="" width="200" src="https://www.dropbox.com/s/sh74vw612sqi3o9/mens-leather-dress-shoes_925x.jpg?dl=1" /> <input id="image4" type="radio" name="image-selector" /> <label for="image3">View image 3</label> <img alt="" width="200" height="133" src="https://www.dropbox.com/s/i3hqrqude82vxqd/white-faced-watch_925x.jpg?dl=1" /> <label for="image4">View image 4</label> <label for="image1">View image 1</label> </div> </div> </div> </body> </html>
Further reading
User guides:
- In-App Messages and Mobile Inbox
- Sending In-App Messages
- Events for In-App Messages and Mobile Inbox
Developer documentation:
- Iterable's iOS SDK
- Iterable's Android SDK
- In-App Messages Overview
- In-App Messages on iOS
- In-App Messages on Android
- Setting up Mobile Inbox on iOS
- Setting up Mobile Inbox on Android
- Customizing Mobile Inbox on iOS
- Customizing Mobile Inbox on Android
- Animating In-App Messages with CSS
- Testing and Troubleshooting In-App Messages
- In-App Messages Without the SDK
- API Overview and Sample Payloads
- API Overview