optkit contents

optkit-contents

<!-- Phone -->

<div id="response">
    <pre>Enjoy your coupon.</pre>
</div>

<form>
<div class="popup" style="position:relative; z-index:1; font-size:1.2em; width:320px; height:405px; border:4px solid #7f8faf; background:#FFF;">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="input-group text-center">
                <div class="subhead" style="line-height:1.1em;margin:34px 0 10px;font-size:24px;color:#7f8faf">Get $15 Off Your 1<sup style="font-size:14px">st</sup>&nbsp;Online Booking</div>

                <p style="font-size:16px">An awesome coupon delivered right to your inbox</p>
                <input class="form-control input-lg emailAddress" id="couponEmailAddress" maxlength="50" placeholder="Your email address" style="display:inline-block;width:230px" type="email">
                <input class="form-control input-lg postalCode" id="couponZip" maxlength="5" placeholder="Zip code" style="display:inline-block;width:230px;margin-top:7px">
                <br>
                <button class="btn btn-lg btn-jumbo btn-success" id="couponRequestSubmit" style="margin-top:20px" type="submit">Submit</button>

                <p style="margin-top:15px;font-size:13px"><a href="javascript:;" class="close-modal" style="border-bottom:0">no thanks, I can live without it</a>
                </p>
            </div>
        </div>
    </div>
</div>
</form>

<script>
$('.close-modal').on('click', function(){ 
    $(".optkit_popup_wrapper").hide();
}); 

function CouponRequest(emailAddress, zip, referrer) {
    this.emailAddress = emailAddress;
    this.postalCode = zip;
    this.referrerURL = referrer;
    this.utm = {
        utmSource: 'trigmail',
        utmMedium: 'email',
        utmCampaign: 'hibar_welcome'
    }
}

$('body').on('click', '#couponRequestSubmit', function(){ 
  $.ajax({
	    url: 'https://ita311208.pagekite.me/api/v1/marketing/email-coupon',
	    dataType: 'json',
	    type: 'post',
	    contentType: 'application/json',
	    data: JSON.stringify({
	        "email": "$('#couponEmailAddress').val()",
	        "zip": $('#couponZip').val()
	    }),
	    processData: false,
	    success: function(data, textStatus, jQxhr) {
	        $('#response pre').html(JSON.stringify(data));
	    },
	    error: function(jqXhr, textStatus, errorThrown) {
	        console.log(errorThrown);
	    }
	});
 }


</script>


<style>
.ok_layout_popup {
top: 10%;
}
div.optkit_close {
	left: 460px;
	top: 20px;
	z-index: 99;
}
</style>

<!-- Tablet -->
<div class="popup" data-campaign="highbar_welcome" data-medium="email" data-source="trigmail" data-url="/marketing/email-coupon" style="position:relative; z-index:1; font-size:1.2em; width:470px; height:340px; border:4px solid #7f8faf; background:#FFF;">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="input-group text-center">
                <div class="subhead" style="line-height:1.1em;margin:34px 0 10px;font-size:34px;color:#7f8faf">Get $15 Off Your 1<sup style="font-size:19px">st</sup>&nbsp;Online Booking</div>

                <p style="font-size:16px">An awesome coupon delivered right to your inbox</p>
                <input class="form-control input-lg emailAddress" id="couponEmailAddress" maxlength="50" placeholder="Your email address" style="display:inline-block;width:230px" type="email">
                <input class="form-control input-lg postalCode" id="couponZip" maxlength="5" placeholder="Zip code" style="display:inline-block;width:105px;margin-left:7px">
                <br>
                <button class="btn btn-lg btn-jumbo btn-success" id="couponRequestSubmit" style="margin-top:20px" type="submit">Submit</button>

                <p style="margin-top:15px;font-size:13px"><a href="javascript:;" class="close-modal" style="border-bottom:0">no thanks, I can live without it</a>
                </p>
            </div>
        </div>
    </div>
</div>

<style>
.ok_layout_popup {
	top: 25%;
	left: 45%;
}
div.optkit_close {
	left: 460px;
	top: 20px;
	z-index: 99;
}
</style>

<!-- Desktop -->
<div class="popup" data-campaign="highbar_welcome" data-medium="email" data-source="trigmail" data-url="/marketing/email-coupon" style="position:relative; z-index:1; font-size:1.2em; width:470px; height:340px; border:4px solid #7f8faf; background:#FFF;">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="input-group text-center">
                <div class="subhead" style="line-height:1.1em;margin:34px 0 10px;font-size:34px;color:#7f8faf">Get $15 Off Your 1<sup style="font-size:19px">st</sup>&nbsp;Online Booking</div>

                <p style="font-size:16px">An awesome coupon delivered right to your inbox</p>
                <input class="form-control input-lg emailAddress input-valid" id="couponEmailAddress" maxlength="50" placeholder="Your email address" style="display:inline-block;width:230px" type="email"><label for="couponEmailAddress" class="input-error" style="display: none;"></label>
                <input class="form-control input-lg postalCode" id="couponZip" maxlength="5" placeholder="Zip code" style="display:inline-block;width:105px;margin-left:7px">
                <br>
                <button class="btn btn-lg btn-jumbo btn-success" id="couponRequestSubmit" style="margin-top:20px" type="submit">Submit</button>

                <p style="margin-top:15px;font-size:13px"><a href="javascript:;" class="close-modal" style="border-bottom:0">no thanks, I can live without it</a>
                </p>
            </div>
        </div>
    </div>
</div>

<style>
div.optkit_close {
	left: 460px;
	top: 20px;
	z-index: 99;
}
</style>