Skip to content

Instantly share code, notes, and snippets.

@raujohn
Created January 19, 2016 20:45
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save raujohn/6e4e931cada3c7a495f4 to your computer and use it in GitHub Desktop.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dynamic CTAs Demo</title>b
<link href="//cdn.muicss.com/mui-0.2.10/css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="//cdn.muicss.com/mui-0.2.10/js/mui.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body style="background:#eee;">
<div class="mui-container">
<h1 >SharpSpring Dynamic CTA Demo</h1>
<p style="margin-bottom:15px;"><a href="https://www.accelweb.ca">By Accel Web Marketing</a></p>
<div class="mui-row">
<div class="mui-col-md-8">
<div class="mui-panel">
<h2 style="color:#bbb; padding-top:0; margin-top:0;">Here is some web page</h2>
<p style="color:#bbb;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque porttitor neque, a vestibulum justo. Praesent eu laoreet metus, sed ultricies risus. Sed a finibus justo. Nam tempus ante non facilisis consequat. Maecenas et aliquet ante. Nulla facilisi. Donec tempor, libero ut ultricies lacinia, dolor risus aliquam elit, ac fermentum magna risus eget est. Donec eget felis eros. Suspendisse aliquet varius ante in euismod. Vivamus cursus semper mattis.</p>
<p style="color:#bbb;">Mauris varius eros nec porttitor condimentum. Aenean nulla purus, molestie vitae nulla sit amet, accumsan consequat risus. Curabitur eu elit pretium, interdum ligula sit amet, tristique elit. Nullam lobortis, odio et ultricies hendrerit, libero nisi commodo sapien, commodo scelerisque dolor velit quis justo. Nunc eros eros, luctus id libero sed, eleifend vehicula ligula. Pellentesque a nunc in augue placerat interdum eu in elit. Vestibulum nec orci non mauris malesuada sodales. Donec pellentesque sem diam, porta suscipit dolor mollis et.</p>
<!-- ALL CTA BUTTONS - These are hidden and then shown once the Dynamic CTA JavaScript is ran -->
<div class="dynamic-cta" style="margin:25px 0 20px; text-align:center;">
<!-- GENERIC ANONYMOUS VISITOR CTA -->
<a href="#" id="cta-anonymous-visitor" onclick="javascript:return false;" style="display:none;"><button class="mui-btn mui-btn--primary">Free Guide: How To Reduce Your Admin Costs By 18% With Accounting Software</button></a>
<!-- LEAD/INDUSTRY CTAs -->
<a href="#" id="cta-lead-ProfessionalServices" onclick="javascript:return false;" style="display:none;"><button class="mui-btn mui-btn--danger">Stop wasting time in Excel - Start your free trial today!</button></a>
<a href="#" id="cta-lead-Manufacturing" onclick="javascript:return false;" style="display:none;"><button class="mui-btn mui-btn--danger">Lower costs by automating inventory management - Free Trial</button></a>
<a href="#" id="cta-lead-Healthcare" onclick="javascript:return false;" style="display:none;"><button class="mui-btn mui-btn--danger">Some Lead/Healthcare CTA</button></a>
<!-- FREE TRIAL USERS CTAs -->
<a href="#" id="cta-trial-ProfessionalServices" onclick="javascript:return false;" style="display:none;"><button class="mui-btn mui-btn--accent">Webinar: [SOFTWARE NAME] - 5 Best Practices for Professionals</button></a>
<a href="#" id="cta-trial-Manufacturing" onclick="javascript:return false;" style="display:none;"><button class="mui-btn mui-btn--accent">Webinar: How to use [SOFTWARE NAME] to Lower Production Cycle Time by 20%</button></a>
<a href="#" id="cta-trial-Healthcare" onclick="javascript:return false;" style="display:none;"><button class="mui-btn mui-btn--accent">Some Free Trial/Healthcare CTA</button></a>
</div>
<p style="color:#bbb;">Quisque a velit vitae dolor bibendum fermentum sed sed odio. Phasellus vitae cursus enim. Suspendisse dignissim magna nisi, sit amet luctus arcu fermentum ac. Aliquam in rutrum tellus. Sed mattis arcu neque, ac rutrum est tristique sed. Donec feugiat scelerisque tellus, at tempus augue scelerisque placerat. Nulla facilisi. Curabitur dapibus lorem eget neque aliquam, sollicitudin dignissim orci ultricies. Quisque pharetra nisl luctus aliquam luctus.</p>
<p style="color:#bbb;">Curabitur nisl augue, ultricies nec erat in, euismod mollis odio. Etiam finibus nisi et velit tincidunt, at feugiat ex dignissim. Suspendisse ac lorem ut tellus vestibulum pharetra. Nunc pulvinar sagittis justo in iaculis. Nunc in massa sit amet mi consequat dictum. Ut finibus tortor at suscipit dignissim. Aenean venenatis sem et erat rhoncus, et aliquam tortor porta. Morbi sit amet lectus et risus rutrum varius eget vel sem. Ut sit amet porttitor purus, eget sollicitudin magna. Vivamus non tortor eu ante tempor eleifend. Curabitur luctus aliquet arcu, vel venenatis turpis convallis eu. Maecenas mi ligula, tempus sit amet ligula vitae, lobortis tincidunt ligula. Pellentesque posuere libero in est pulvinar dapibus. Praesent consectetur finibus posuere. Pellentesque quis sem sed quam pellentesque condimentum. Morbi sapien mi, pretium ut nisl eu, luctus sagittis magna.</p>
</div>
</div>
<div class="mui-col-md-4">
<div class="mui-panel">
<div id="anonymous-visitor-message" style="display:none;">
<p>You are an <strong>Anonymous Visitor</strong>.</p>
<p>Fill out the form below to become a Lead and see a Dynamic CTA.</p>
</div>
<div id="lead-message" style="display:none;">
<p>You are a <strong>Lead</strong> in the <strong class="industry-label"></strong> industry.</p>
<p>Switch industries using the form below to see a different industry-specific CTA.</p>
</div>
<!-- SharpSpring Form for Dynamic CTA Demo Form -->
<script type="text/javascript">
var ss_form = {'account': '********', 'formID': '********'};
ss_form.width = '100%';
ss_form.height = '1000';
ss_form.domain = 'app-********.marketingautomation.services';
</script>
<script type="text/javascript" src="https://koi-********.marketingautomation.services/client/form.js?ver=1.1.1"></script>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment