Articles in this section

Image Carousels in In-App Messages

Within Iterable's in-app message template editor, you can create in-app carousels.

Carousel

Table of contents

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 Bee Free editor and export it to HTML for upload.

Notes

You must use full screen view to render this in-app 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 />
          &nbsp;
          <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:

Developer documentation:

Related articles

Comments

0 comments

Article is closed for comments.