How to Install Last-Minute Openings Floating Widget & Pop-Up

You will be provided Pop-Up and Floating Widget HTML files that include your unique code.

For Non-CMS Powered Sites

*Note: if your site does not have a global header/footer file, you will need to add the code snippets to each page individually.


POP-UP

1. Locate the global header/footer file.


2. Open your provided Pop-up HTML file in a text editor
(i.e. businessname-popup.html) [If you need a code editor, here is a great free option: http://brackets.io/]

3. PLACE BEFORE CLOSING </head> TAG in your global header/footer file. (This is an example only, do not use the code below, only use the code snippet from your provided file.)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link href="https://octopi.com/popup-demo/business-name/pop-style.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" />


4. Locate your home page file (i.e. index.html)

5. PLACE BEFORE CLOSING </head> TAG in your home page file. (This is an example only, do not use the code below, only use the code snippet from your provided file.)

<style>#lastMinute{display: none;}</style>
<a id="popuplink" href="#inline" style="display:none;"></a>
<div id="inline" style="display:none;text-align:center;width: 450px; margin: 0 auto;">
<a href="javascript:;" onclick="jQuery.fancybox.close();"><img src="https://octopi.com/demo/close.png" class="close-ic"></a>
<img class="logo" src="https://octopi.com/popup-demo/business-name/logo.png" atl="logo"/>
<h1 style="margin-top:20px;">LOVE LAST MINUTE SPECIALS?</h1>
<p style="margin-bottom: 0;">Check out our last minute openings now!</p>
<div id="poplastMinute" style="background-color: transparent;">
<div id="poplastMinuteBtn">
<a class="qbutton blue appointmentbutton fadeIn appbtn" style="box-shadow: 2px 5px 10px 2px rgba(0,0,0,0.15);" href="https://webopenings.com/o/101546">Click Here</a>
</div>
</div>
<p style="margin: 0 0 35px; font-size: 11px;"><a href="javascript:;" onclick="jQuery.fancybox.close();" style="color:#ccc;text-decoration:none;">No Thanks</a></p>
</div>


6. PLACE BEFORE CLOSING </body> TAG in your home page file.
(This is an example only, do not use the code below, only use the code snippet from your provided unique file)

<script src="https://octopi.com/popup-demo/business-name/custom.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.js"></script>

FLOATING WIDGET

1. Locate the global header/footer file.

2. Open your provided Floating Widget HTML file in a text editor (i.e. businessname-widget.html) [If you need a code editor, here is a great free option: http://brackets.io/]

3. PLACE BEFORE CLOSING </head> TAG in your global header/footer file. (This is an example only, do not use the code below, only use the code snippet from your provided file.)

<link href="https://octopi.com/widget-demo/business-name/style.css" rel="stylesheet">
<div id="lastMinute">
<div id="lastMinuteBtn">
<div class="sm-col-1">
<h1><b>SEE OUR</b></h1>
<h2>Last Minute<br>Openings!</h2>
</div>
<div class="sm-col-2">
<a class="qbutton blue appointmentbutton fadeIn" style="box-shadow: 2px 5px 10px 2px rgba(0,0,0,0.15); top: 18px; left: 18px;" href="https://webopenings.com/o/101546" target="_blank">Click Here</a>
</div>
</div>
<i class="fa fa-times-circle close-btn" onclick="document.getElementById('lastMinute').style.display = 'none';"></i>
</div>