App Promotion Test

by Hugo Carneiro

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="app-launch-holder">
  <div class="promotion-app-wrapper">
    <h3>Help me tell people about my app</h3>
    <div class="promotion-panel">
      <div class="promotion-panel-image">
        <img src="https://fliplet.com/wp-content/uploads/2021/05/promote-icon-publish.png">
      </div>
      <div class="promotion-panel-wrapper">
        <div class="promotion-section">
          <div class="promotion-section-title">I want to promote my app for:</div>
          <div class="button-wrapper">
            <div class="btn btn-default testing-template" data-context="test">
              Testing
            </div>
            <div class="btn btn-default launching-template" data-context="launch">
              Launch
            </div>
            <div class="btn btn-default updating-template" data-context="update">
              Update
            </div>
          </div>
        </div>
        <div class="promotion-section">
          <div class="promotion-section-description">
            <p>This content can be used to promote your app on:</p>
            <div class="promotion-method-wrapper">
              <div class="promotion-method">
                <p>Email</p>
                <div class="logos-wrapper">
                  <div class="logo-holder">
                    <img...

CSS

body {
  font-family: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857;
  color: #333;
  background-color: #f8f6f7;
}

.fa-times-thin:before {
  content: "\D7";
}

.btn-default,
.btn-default.focus,
.btn-default:focus {
  padding: 9px 12px;
  font-size: 14px;
  color: #474974;
  background-color: #eae9ec;
  transition: none;
  border-color: #eae9ec;
  outline: none;
}

.btn-default:active,
.btn-default:hover:active,
.btn-default:active:focus{
  color: #474974;
  background-color: #bebac4;
  border-color: #bebac4;
  outline: none;
}

.btn-default:hover {
  color: #474974;
  background-color: #d0ced4;
  border-color: #d0ced4;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: #00abd1;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: inherit;
  font-weight: 700;
  line-height: 1.1;
  color: #474974;
}

h1,
h2,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h3 {
  font-size: 24px;
}

.app-launch-holder {
  padding: 0 15px 100px;
}

@media only screen and (min-width: 640px) {
  .app-launch-holder {
    max-width: 1000px;
    width: 80%;
    margin: 0 auto;
  }
}

.promotion-app-wrapper {
  margin-bottom: 40px;
}

.app-launch-holder h3 {
  margin-bottom: 32px;
}

.promotion-panel {
  padding-bottom: 50px;
  display: flex;
  flex-flow: row wrap;
}

.promotion-panel .promotion-panel-image {
  width: 100px;
  min-width: 100px;
  height: 100px;
  margin-right: 20px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #eae9ec;
}

.promotion-section-title {
  font-size: 1.4em;
  color: #333;
  margin-bottom: 10px;
}

.promotion-section-description p {
  font-size: 1.15em;
}

.promotion-section {
  margin-bottom: 30px;
}

.promotion-section:last-child {
  margin-bottom: 0;
}

.promotion-section .button-wrapper {
  display: flex;
}


.button-wrapper .btn {
  margin: 0 5px 5px 0;
}

.promotion-method-wrapper {
  display: flex;
}

.promotion-method-wrapper .promotion-method {
 ...

JavaScript

// Variables
window.dataLayer = [];
var currentOrganization = window.flOrganizations || [{
  name: 'My Organization',
  region: 'eu'
}];
var hashOrganizationName = currentOrganization[0].name.toLowerCase().replace(/\s/g, '');
var currentApp = window.flUserApp || {
  id: 20666,
  name: 'Report 2021',
  slug: 'fliplet-my-new-app'
};
var hashAppName = currentApp.name.toLowerCase().replace(/\s/g, '');
var screeshotStyles = 'max-width:180px;padding:5px;';
var API_URL = {
  eu: 'https://api.fliplet.com',
  us: 'https://us.api.fliplet.com'
};
var mobileScreensURLs = [];
var tabletScreensURLs = []
var selectedType;
var typeMapping = [{
    name: 'test',
    template: {
      heading: 'Promote your app for testing',
      subject: 'Request for feedback on ' + currentApp.name + ' app',
      content: '<p>Hi</p><p>I would like to invite you to help test our new ' + currentApp.name + ' app.</p><p>This app offers the following key features:</p><ol><li><strong><em>Adjust this list to suit your app</em></strong></li><li>List of people/products/services with powerful search, filter and bookmark</li><li>Interactive quiz about ...</li><li>Reference information about ...</li><li>App available for smartphones, tablets and web app available for computers</li><li>...</li><li>...</li><li>...</li></ol><p><strong><u>How do you test the app on Apple or Android devices?</u></strong></p><p class="screenshots-holder-phone"></p><p>I will invite you to access the app via Fliplet. Once I have done that you will receive an email including your username and password.</p><p>To test the app on Apple iOS or Google Android device:</p><ol><li>Install the Fliplet Viewer app from the <a href="https://apps.apple.com/app/apple-store/id1491961819?pt=913727&ct=promoteapptesting&mt=8" target="_blank">Apple App Store</a> or <a href="https://play.google.com/store/apps/details?id=com.fliplet&referrer=utm_source%3Dpromoteapptesting%26utm_campaign%3Ddownloadfv" target="_blank">Google Play</a></li><li>Load Fliplet...