You are here

Home » API reference » Website Popups, Email Popup, Exit-Intent Popup, and Contact Forms – Poptin 8

main-template.html.twig in Website Popups, Email Popup, Exit-Intent Popup, and Contact Forms – Poptin 8 

	{% if test_var == 'yes' %}
		{% set regclass = '' %}
		{% set dashclass = 'hidediv' %}
	{% else %}
		{% set regclass = 'hidediv' %}
		{% set dashclass = '' %}
	{% endif %}
<script> var csrf='{{ csrftoken }}';</script>
<input id="baseurl" type="hidden" value="{{ base_url }}" /><div class="poptin-overlay" style="display: none;"></div><div id="poptin_main">
		<div class="poptinLogo"><img src="{{ module_img_dir }}poptinlogo.png" alt="" > </div>
		<!--/logo-->
		<div class="poptin_forms poptin_registration {{ regclass }}">
		  <div class="pforms_wrap register_form">
			<div class="pforms_wrap_inner">
				<div class="pforms_head">
				   <ul>
					  <li>
						 <h3>Sign up for free</h3>
					  </li>
					  <li><a href="#" id="login_form">Already have an account?</a></li>
				   </ul>
				</div>
				<!--/pforms_head-->
				<div class="form_box">
				   <form method="post" id="popin_signup">
					  <input type="text" id="popin_email" class="input_box" name="email" placeholder="Enter your email">
					  <div class="bottom_form">
						 <input type="submit" value="Sign Up"  class="ppsubmit">
					  </div>
				   </form>
				</div>
			 </div>
			 <!--/pforms_wrap_inner-->        
		  </div>
			<!--/register_form-->
			<div class="pforms_wrap login_form" style="display:none;">
			 <div class="pforms_wrap_inner">
				<div class="pforms_head">
				   <ul>
					  <li>
						 <h3>Enter your user ID</h3>
					  </li>
					  <li><a href="#" id="register_form">Sign up for free</a></li>
				   </ul>
				</div>
				<!--/pforms_head-->
				<div class="form_box">
				   <form method="post" id="popin_id_register">
					  <input type="text" class="input_box" id="pop_up_id" placeholder="Enter your User ID" />
					  <div class="bottom_form">
						 <a class="wheremyid " href="javascript:void(0)" data-toggle="modal" >Where is my user ID? </a>
						 <input type="submit" value="Connect" class="pplogin" />                                        
					  </div>
				   </form>
				</div>
			 </div>			 
			 <!--/pforms_wrap_inner-->        
		  </div>
		  <!--/register_form-->
		</div>
		<div class="poptin_logged {{ dashclass }}">
		  <div class="poptin_logged_box">
			 <h2>You're all set!</h2>
			 <div class="tinyborder"></div>
			 <span class="everythinglooks">Click on the button below<br>to manage your poptins</span>
			 <img src="{{ module_img_dir }}vicon.png" alt="">
			 <a href="{{ generateloginlink }}" target="_blank"  class="ppcontrolpanel goto_dashboard_button_pp_updatable with_token">Go to Dashboard</a>
			 <a href="javascript:void(0)" class="pplogout">Deactivate Poptin</a>
		  </div>
		  <!--/poptin_logged_box-->
	   </div>	
		<!--/poptin_forms-->
	   <div class="poptin_content {{ sh_status }} poptin_registration">
		  <h2>Create your first poptin with ease</h2>
		  <div class="tinyborder"></div>
		  <div class="pvideo_box">
			 <div class="pvideo_box_in">                        <div style="width:100%;height:100%;width: 905px; height: 509px; float: none; clear: both; margin: 2px auto;">              <embed src="https://www.youtube.com/v/R_B8L3abt7Q?version=3&amp;hl=en_US&amp;rel=0&amp;showinfo=0" wmode="transparent" type="application/x-shockwave-flash" width="100%" height="100%" allowfullscreen="true" title="Adobe Flash Player">            </div>
			 </div>
			 <!--/pvideo_box_in--->
		  </div>
		  <!--/pvideo_box-->
	   </div>
	   <!--/poptin_content-->
	   <div class="poptin_content whychoose_sec {{ sh_status }}  poptin_registration">
		  <h2>Here's What Poptin Can Do For You</h2>
		  <div class="tinyborder"></div>
		  <div class="pcontent_in">
			 <div class="whychoose_list">
				<ul>
				   <li>
					  <div class="box boxEnv">
						 <div class="boxIcon"><img src="{{ module_img_dir }}envelope.png" alt="" /></div>
						 <h4>Get more email subscribers</h4>
					  </div>
				   </li>
				   <li>
					  <div class="box boxLeads">
						 <div class="boxIcon"><img src="{{ module_img_dir }}fanel.png" alt="" /></div>
						 <h4>Get more leads and sales</h4>
					  </div>
				   </li>
				   <li>
					  <div class="box boxCart">
						 <div class="boxIcon"><img src="{{ module_img_dir }}wheel.png" alt="" /></div>
						 <h4>Reduce shopping cart abandonment</h4>
					  </div>
				   </li>
				   <li>
					  <div class="box boxHeart">
						 <div class="boxIcon"><img src="{{ module_img_dir }}heart.png" alt="" /></div>
						 <h4>Increase visitors' engagement</h4>
					  </div>
				   </li>
				</ul>
			 </div>
			 <!--/whychoose_list-->    
		  </div>
		  <!--/pcontent_in-->            	
	   </div>
	   <!--/poptin_content-->
	   <div class="poptin_content digital_marketers {{ sh_status }} poptin_registration">
		  <h2>Digital Marketers ♥ Poptin</h2>
		  <div class="tinyborder"></div>
		  <div class="pcontent_in">
			 <div class="cfedbak_list">
				<ul>
				   <li>
					  <div class="box client1">
						 <div class="box_head">
							<img src="{{ module_img_dir }}profile1.png" alt=""  />
						 </div>
						 <!--head-->
						 <div class="clientboxtext">
							<h4>Michael Kamleitner</h4>
							<h6>CEO, Walls.io</h6>
							<p>Getting started with poptin was a breeze – we've implemented the widget and connected it to our newsletter within minutes. Our conversion rate skyrocketed! </p>
						 </div>
					  </div>
				   </li>
				   <li>
					  <div class="box client2">
						 <div class="box_head">
							<img src="{{ module_img_dir }}profile2.png" alt=""  />
						 </div>
						 <!--head-->
						 <div class="clientboxtext">
							<h4>Deepak Shukla</h4>
							<h6>CEO, Purr Traffic</h6>
							<p>Been v.impressed with Poptin and the team behind it so far. Great responses times from support. The roadmap looks great. I highly recommend.  </p>
						 </div>
					  </div>
				   </li>
				   <li>
					  <div class="box client3">
						 <div class="box_head">
							<img src="{{ module_img_dir }}profile3.png" alt=""  />
						 </div>
						 <!--head-->
						 <div class="clientboxtext">
							<h4>Michael Voiskoun</h4>
							<h6>Marketing manager, Engie</h6>
							<p>It's super easy to use, doesn't require any prior coding skill. The team at Poptin is really helpful, providing great support, and adding always more features!  </p>
						 </div>
					  </div>
				   </li>
				</ul>
			 </div>
			 <!--/whychoose_list-->    
		  </div>
		  <!--/pcontent_in-->            	
	   </div>
	   <!--/poptin_content-->
	    <div class="poptin_content clients_feedback">
		  <h2>Let us know what you think <img class="emoji" src="{{ module_img_dir }}1f642.png" alt=""  /></h2>
		  <div class="tinyborder"></div>
		  <div class="reviewbox">
			 <div class="reviewtitle">If Poptin already helped you to grow your business, please click on the button below and leave a positive review <img class="emoji" src="{{ module_img_dir }}1f642.png" alt=""  /></div>
			 <div class="reviewstars"><img src="{{ module_img_dir }}stars.png" alt=""  /></div>
			 <div class="reviewlink"><a href="https://www.drupal.org/project/poptin" target="_blank">Write a Review</a></div>
		  </div>
		  <!--/reviewbox-->            	
	   </div>
	   <!--/poptin_content-->
	   <div class="poptin_footer">
		  <div class="poptin_footer_img">
			 <img class="normal_img parrot" src="{{ module_img_dir }}parrot.png" alt=""  />
			 <img class="hover_img parrot" src="{{ module_img_dir }}parrot.gif" alt=""  />
		  </div>
		  <h6>Visit us at <a href="https://www.poptin.com/?utm_source=drupal8" target="_blank">poptin.com</a></h6>
	   </div>
	   <div class="modal fade whereis_myid hidediv " tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
		  <div class="modal-dialog modal-lg" role="document">
			 <div class="modal-content ">
				<h4>Where is my user ID?</h4>
				<div class="myid_list">
				   <div class="row">
					  <div class="col-sm-4">
						 <div class="id_box">
							<div class="id_box_img"><img src="{{ module_img_dir }}where-is-my-id-01.png" alt=""  /></div>
							<p><strong>1.</strong> Go to your dashboard, in the top bar click on "Settings"</p>
						 </div>
						 <!--/id_box-->
					  </div>
					  <!--/col-4-->
					  <div class="col-sm-4">
						 <div class="id_box">
							<div class="id_box_img"><img src="{{ module_img_dir }}where-is-my-id-02.png" alt=""  /></div>
							<p><strong>2.</strong> Click on Profile </p>
						 </div>
						 <!--/id_box-->
					  </div>
					  <!--/col-4-->
					  <div class="col-sm-4">
						 <div class="id_box">
							<div class="id_box_img"><img src="{{ module_img_dir }}where-is-my-id-03.png" alt=""  /></div>
							<p><strong>3.</strong> Copy your user ID </p>
						 </div>
						 <!--/id_box-->
					  </div>
					  <!--/col-4-->
				   </div>
				</div>
				<!--/myid_list-->
				<div class="popup_down">
				   <div class="poptup_button"><a href="javascript:void(0)" class="close_where" data-dismiss="modal" aria-label="Close">Close</a></div>
				</div>
			 </div>
		  </div>
	   </div>
	   <!--/whereis_myid-->
	    <div class="modal fade lookfamiliar hidediv" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
		  <div class="modal-dialog modal-sm" role="document">
			 <div class="modal-content">
				<img class="poptin-parrot-makingsure-image" src="{{ module_img_dir }}parrot-familiar.png">
				<h4>You look familiar</h4>
				<p>You already have a Poptin account with this email address. </p>
				<div class="popup_down">
				   <div class="poptup_button"><a href="https://app.popt.in/overview" target="_blank">Login</a></div>
				   <a href="javascript:void(0)" class="close_lookfamiliar" data-dismiss="modal" aria-label="Close">I'll stay</a>
				</div>
			 </div>
		  </div>
	   </div> 
	   <!--/lookfamiliar-->
	   <div class="modal fade hidediv oopsiewrongemailid" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
		  <div class="modal-dialog modal-sm" role="document">
			 <div class="modal-content">
				<img class="poptin-parrot-makingsure-image" src="{{ module_img_dir }}parrot-oopsie.png">
				<h4>Oopsie... wrong Email</h4>
				<p>Please enter a valid Email Address.  </p>
				<div class="popup_down">
				   <div class="poptup_button"><a href="javascript:void(0)" class="close_oopsiewrongemailid" data-dismiss="modal" aria-label="Close">Try again</a></div>
				</div>
			 </div>
		  </div>
	   </div>
	   <!--/oopsiewrongid-->
	   <div class="modal fade hidediv oopsiewrongid" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
		  <div class="modal-dialog modal-sm" role="document">
			 <div class="modal-content">
				<img class="poptin-parrot-makingsure-image" src="{{ module_img_dir }}parrot-oopsie.png">
				<h4>Oopsie... wrong ID</h4>
				<p><a href="javascript:void(0)" class="poptin-lightbox-atag where-is-my-id-inside-lb wheremyid" data-toggle="modal">Where is my user ID?</a></p>
				<div class="popup_down">
				   <div class="poptup_button"><a href="javascript:void(0)"  class="close_oopsiewrongid" data-dismiss="modal" aria-label="Close">Try again</a></div>
				</div>
			 </div>
		  </div>
	   </div>
	   <!--/oopsiewrongid-->
	   <div class="modal fade hidediv " id="deactivate_poptin_popup" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
		  <div class="modal-dialog modal-sm" role="document">
			 <div class="modal-content">
				<img class="poptin-parrot-makingsure-image" src="{{ module_img_dir }}parrot-making-sure.png">
				<h4>Just making sure</h4>
				<p>Are you sure you want to <br /> remove Poptin? </p>
				<div class="popup_down">
					<span id="deactivate_url" class="hidediv"> {{ deactivate_url }}</span>
				   <div class="poptup_button"><a href="javascript:void(0)" class="pplogout1" >Yes</a></div>
				   <a href="javascript:void(0)" data-dismiss="modal" aria-label="Close" class="close_confirm">I'll stay</a>
				</div>
			 </div>
		  </div>
	   </div> 	    	 
	   <!--/deactivate_poptin_popup-->
	   <div class="modal hidediv fade byebyeModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
		  <div class="modal-dialog modal-sm" role="document">
			 <div class="modal-content">
				<img class="poptin-parrot-byebye-image" src="{{ module_img_dir }}parrot-bye-bye.png">
				<h4>Bye Bye</h4>
				<p>Poptin snippet has been <br /> removed. See you around. </p>
				<div class="popup_down">
				   <div class="poptup_button"><a href="javascript:void(0)" class="close_bybye" data-dismiss="modal" aria-label="Close">Close</a></div>
				</div>
			 </div>
		  </div>
	   </div>
	   <!--/byebyeModal-->
	</div>
    <div class="swal-overlay swal_d_display swal-overlay--show-modal" tabindex="-1">
      <div class="swal-modal" role="dialog" aria-modal="true">
	    <div class="swal-icon swal-icon--error">
          <div class="swal-icon--error__x-mark">
            <span class="swal-icon--error__line swal-icon--error__line--left"></span>
            <span class="swal-icon--error__line swal-icon--error__line--right"></span>
          </div>
        </div>
        <div class="swal-title">Error</div>
		<div class="swal-text">The email must be a valid email address.</div>
		<div class="swal-footer">
		  <div class="swal-button-container">
            <button class="swal-button swal-button--confirm">OK</button>
            <div class="swal-button__loader">
            </div>
          </div>
        </div>
      </div>
    </div>
1 theme call to main-template.html.twig
PoptinController::check in src/Controller/PoptinController.php
Implements check().

File

templates/main-template.html.twig
View source 
  1. 	{% if test_var == 'yes' %}

  2. 		{% set regclass = '' %}

  3. 		{% set dashclass = 'hidediv' %}

  4. 	{% else %}

  5. 		{% set regclass = 'hidediv' %}

  6. 		{% set dashclass = '' %}

  7. 	{% endif %}

  8. <script> var csrf='{{ csrftoken }}';</script>

  9. <input id="baseurl" type="hidden" value="{{ base_url }}" /><div class="poptin-overlay" style="display: none;"></div><div id="poptin_main">

  10. 		<div class="poptinLogo"><img src="{{ module_img_dir }}poptinlogo.png" alt="" > </div>

  11. 		<!--/logo-->

  12. 		<div class="poptin_forms poptin_registration {{ regclass }}">

  13. 		  <div class="pforms_wrap register_form">

  14. 			<div class="pforms_wrap_inner">

  15. 				<div class="pforms_head">

  16. 				   <ul>

  17. 					  <li>

  18. 						 <h3>Sign up for free</h3>

  19. 					  </li>

  20. 					  <li><a href="#" id="login_form">Already have an account?</a></li>

  21. 				   </ul>

  22. 				</div>

  23. 				<!--/pforms_head-->

  24. 				<div class="form_box">

  25. 				   <form method="post" id="popin_signup">

  26. 					  <input type="text" id="popin_email" class="input_box" name="email" placeholder="Enter your email">

  27. 					  <div class="bottom_form">

  28. 						 <input type="submit" value="Sign Up"  class="ppsubmit">

  29. 					  </div>

  30. 				   </form>

  31. 				</div>

  32. 			 </div>

  33. 			 <!--/pforms_wrap_inner-->        

  34. 		  </div>

  35. 			<!--/register_form-->

  36. 			<div class="pforms_wrap login_form" style="display:none;">

  37. 			 <div class="pforms_wrap_inner">

  38. 				<div class="pforms_head">

  39. 				   <ul>

  40. 					  <li>

  41. 						 <h3>Enter your user ID</h3>

  42. 					  </li>

  43. 					  <li><a href="#" id="register_form">Sign up for free</a></li>

  44. 				   </ul>

  45. 				</div>

  46. 				<!--/pforms_head-->

  47. 				<div class="form_box">

  48. 				   <form method="post" id="popin_id_register">

  49. 					  <input type="text" class="input_box" id="pop_up_id" placeholder="Enter your User ID" />

  50. 					  <div class="bottom_form">

  51. 						 <a class="wheremyid " href="javascript:void(0)" data-toggle="modal" >Where is my user ID? </a>

  52. 						 <input type="submit" value="Connect" class="pplogin" />                                        

  53. 					  </div>

  54. 				   </form>

  55. 				</div>

  56. 			 </div>			 

  57. 			 <!--/pforms_wrap_inner-->        

  58. 		  </div>

  59. 		  <!--/register_form-->

  60. 		</div>

  61. 		<div class="poptin_logged {{ dashclass }}">

  62. 		  <div class="poptin_logged_box">

  63. 			 <h2>You're all set!</h2>

  64. 			 <div class="tinyborder"></div>

  65. 			 <span class="everythinglooks">Click on the button below<br>to manage your poptins</span>

  66. 			 <img src="{{ module_img_dir }}vicon.png" alt="">

  67. 			 <a href="{{ generateloginlink }}" target="_blank"  class="ppcontrolpanel goto_dashboard_button_pp_updatable with_token">Go to Dashboard</a>

  68. 			 <a href="javascript:void(0)" class="pplogout">Deactivate Poptin</a>

  69. 		  </div>

  70. 		  <!--/poptin_logged_box-->

  71. 	   </div>	

  72. 		<!--/poptin_forms-->

  73. 	   <div class="poptin_content {{ sh_status }} poptin_registration">

  74. 		  <h2>Create your first poptin with ease</h2>

  75. 		  <div class="tinyborder"></div>

  76. 		  <div class="pvideo_box">

  77. 			 <div class="pvideo_box_in">                        <div style="width:100%;height:100%;width: 905px; height: 509px; float: none; clear: both; margin: 2px auto;">              <embed src="https://www.youtube.com/v/R_B8L3abt7Q?version=3&amp;hl=en_US&amp;rel=0&amp;showinfo=0" wmode="transparent" type="application/x-shockwave-flash" width="100%" height="100%" allowfullscreen="true" title="Adobe Flash Player">            </div>

  78. 			 </div>

  79. 			 <!--/pvideo_box_in--->

  80. 		  </div>

  81. 		  <!--/pvideo_box-->

  82. 	   </div>

  83. 	   <!--/poptin_content-->

  84. 	   <div class="poptin_content whychoose_sec {{ sh_status }}  poptin_registration">

  85. 		  <h2>Here's What Poptin Can Do For You</h2>

  86. 		  <div class="tinyborder"></div>

  87. 		  <div class="pcontent_in">

  88. 			 <div class="whychoose_list">

  89. 				<ul>

  90. 				   <li>

  91. 					  <div class="box boxEnv">

  92. 						 <div class="boxIcon"><img src="{{ module_img_dir }}envelope.png" alt="" /></div>

  93. 						 <h4>Get more email subscribers</h4>

  94. 					  </div>

  95. 				   </li>

  96. 				   <li>

  97. 					  <div class="box boxLeads">

  98. 						 <div class="boxIcon"><img src="{{ module_img_dir }}fanel.png" alt="" /></div>

  99. 						 <h4>Get more leads and sales</h4>

  100. 					  </div>

  101. 				   </li>

  102. 				   <li>

  103. 					  <div class="box boxCart">

  104. 						 <div class="boxIcon"><img src="{{ module_img_dir }}wheel.png" alt="" /></div>

  105. 						 <h4>Reduce shopping cart abandonment</h4>

  106. 					  </div>

  107. 				   </li>

  108. 				   <li>

  109. 					  <div class="box boxHeart">

  110. 						 <div class="boxIcon"><img src="{{ module_img_dir }}heart.png" alt="" /></div>

  111. 						 <h4>Increase visitors' engagement</h4>

  112. 					  </div>

  113. 				   </li>

  114. 				</ul>

  115. 			 </div>

  116. 			 <!--/whychoose_list-->    

  117. 		  </div>

  118. 		  <!--/pcontent_in-->            	

  119. 	   </div>

  120. 	   <!--/poptin_content-->

  121. 	   <div class="poptin_content digital_marketers {{ sh_status }} poptin_registration">

  122. 		  <h2>Digital Marketers ♥ Poptin</h2>

  123. 		  <div class="tinyborder"></div>

  124. 		  <div class="pcontent_in">

  125. 			 <div class="cfedbak_list">

  126. 				<ul>

  127. 				   <li>

  128. 					  <div class="box client1">

  129. 						 <div class="box_head">

  130. 							<img src="{{ module_img_dir }}profile1.png" alt=""  />

  131. 						 </div>

  132. 						 <!--head-->

  133. 						 <div class="clientboxtext">

  134. 							<h4>Michael Kamleitner</h4>

  135. 							<h6>CEO, Walls.io</h6>

  136. 							<p>Getting started with poptin was a breeze – we've implemented the widget and connected it to our newsletter within minutes. Our conversion rate skyrocketed! </p>

  137. 						 </div>

  138. 					  </div>

  139. 				   </li>

  140. 				   <li>

  141. 					  <div class="box client2">

  142. 						 <div class="box_head">

  143. 							<img src="{{ module_img_dir }}profile2.png" alt=""  />

  144. 						 </div>

  145. 						 <!--head-->

  146. 						 <div class="clientboxtext">

  147. 							<h4>Deepak Shukla</h4>

  148. 							<h6>CEO, Purr Traffic</h6>

  149. 							<p>Been v.impressed with Poptin and the team behind it so far. Great responses times from support. The roadmap looks great. I highly recommend.  </p>

  150. 						 </div>

  151. 					  </div>

  152. 				   </li>

  153. 				   <li>

  154. 					  <div class="box client3">

  155. 						 <div class="box_head">

  156. 							<img src="{{ module_img_dir }}profile3.png" alt=""  />

  157. 						 </div>

  158. 						 <!--head-->

  159. 						 <div class="clientboxtext">

  160. 							<h4>Michael Voiskoun</h4>

  161. 							<h6>Marketing manager, Engie</h6>

  162. 							<p>It's super easy to use, doesn't require any prior coding skill. The team at Poptin is really helpful, providing great support, and adding always more features!  </p>

  163. 						 </div>

  164. 					  </div>

  165. 				   </li>

  166. 				</ul>

  167. 			 </div>

  168. 			 <!--/whychoose_list-->    

  169. 		  </div>

  170. 		  <!--/pcontent_in-->            	

  171. 	   </div>

  172. 	   <!--/poptin_content-->

  173. 	    <div class="poptin_content clients_feedback">

  174. 		  <h2>Let us know what you think <img class="emoji" src="{{ module_img_dir }}1f642.png" alt=""  /></h2>

  175. 		  <div class="tinyborder"></div>

  176. 		  <div class="reviewbox">

  177. 			 <div class="reviewtitle">If Poptin already helped you to grow your business, please click on the button below and leave a positive review <img class="emoji" src="{{ module_img_dir }}1f642.png" alt=""  /></div>

  178. 			 <div class="reviewstars"><img src="{{ module_img_dir }}stars.png" alt=""  /></div>

  179. 			 <div class="reviewlink"><a href="https://www.drupal.org/project/poptin" target="_blank">Write a Review</a></div>

  180. 		  </div>

  181. 		  <!--/reviewbox-->            	

  182. 	   </div>

  183. 	   <!--/poptin_content-->

  184. 	   <div class="poptin_footer">

  185. 		  <div class="poptin_footer_img">

  186. 			 <img class="normal_img parrot" src="{{ module_img_dir }}parrot.png" alt=""  />

  187. 			 <img class="hover_img parrot" src="{{ module_img_dir }}parrot.gif" alt=""  />

  188. 		  </div>

  189. 		  <h6>Visit us at <a href="https://www.poptin.com/?utm_source=drupal8" target="_blank">poptin.com</a></h6>

  190. 	   </div>

  191. 	   <div class="modal fade whereis_myid hidediv " tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">

  192. 		  <div class="modal-dialog modal-lg" role="document">

  193. 			 <div class="modal-content ">

  194. 				<h4>Where is my user ID?</h4>

  195. 				<div class="myid_list">

  196. 				   <div class="row">

  197. 					  <div class="col-sm-4">

  198. 						 <div class="id_box">

  199. 							<div class="id_box_img"><img src="{{ module_img_dir }}where-is-my-id-01.png" alt=""  /></div>

  200. 							<p><strong>1.</strong> Go to your dashboard, in the top bar click on "Settings"</p>

  201. 						 </div>

  202. 						 <!--/id_box-->

  203. 					  </div>

  204. 					  <!--/col-4-->

  205. 					  <div class="col-sm-4">

  206. 						 <div class="id_box">

  207. 							<div class="id_box_img"><img src="{{ module_img_dir }}where-is-my-id-02.png" alt=""  /></div>

  208. 							<p><strong>2.</strong> Click on Profile </p>

  209. 						 </div>

  210. 						 <!--/id_box-->

  211. 					  </div>

  212. 					  <!--/col-4-->

  213. 					  <div class="col-sm-4">

  214. 						 <div class="id_box">

  215. 							<div class="id_box_img"><img src="{{ module_img_dir }}where-is-my-id-03.png" alt=""  /></div>

  216. 							<p><strong>3.</strong> Copy your user ID </p>

  217. 						 </div>

  218. 						 <!--/id_box-->

  219. 					  </div>

  220. 					  <!--/col-4-->

  221. 				   </div>

  222. 				</div>

  223. 				<!--/myid_list-->

  224. 				<div class="popup_down">

  225. 				   <div class="poptup_button"><a href="javascript:void(0)" class="close_where" data-dismiss="modal" aria-label="Close">Close</a></div>

  226. 				</div>

  227. 			 </div>

  228. 		  </div>

  229. 	   </div>

  230. 	   <!--/whereis_myid-->

  231. 	    <div class="modal fade lookfamiliar hidediv" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">

  232. 		  <div class="modal-dialog modal-sm" role="document">

  233. 			 <div class="modal-content">

  234. 				<img class="poptin-parrot-makingsure-image" src="{{ module_img_dir }}parrot-familiar.png">

  235. 				<h4>You look familiar</h4>

  236. 				<p>You already have a Poptin account with this email address. </p>

  237. 				<div class="popup_down">

  238. 				   <div class="poptup_button"><a href="https://app.popt.in/overview" target="_blank">Login</a></div>

  239. 				   <a href="javascript:void(0)" class="close_lookfamiliar" data-dismiss="modal" aria-label="Close">I'll stay</a>

  240. 				</div>

  241. 			 </div>

  242. 		  </div>

  243. 	   </div> 

  244. 	   <!--/lookfamiliar-->

  245. 	   <div class="modal fade hidediv oopsiewrongemailid" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">

  246. 		  <div class="modal-dialog modal-sm" role="document">

  247. 			 <div class="modal-content">

  248. 				<img class="poptin-parrot-makingsure-image" src="{{ module_img_dir }}parrot-oopsie.png">

  249. 				<h4>Oopsie... wrong Email</h4>

  250. 				<p>Please enter a valid Email Address.  </p>

  251. 				<div class="popup_down">

  252. 				   <div class="poptup_button"><a href="javascript:void(0)" class="close_oopsiewrongemailid" data-dismiss="modal" aria-label="Close">Try again</a></div>

  253. 				</div>

  254. 			 </div>

  255. 		  </div>

  256. 	   </div>

  257. 	   <!--/oopsiewrongid-->

  258. 	   <div class="modal fade hidediv oopsiewrongid" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">

  259. 		  <div class="modal-dialog modal-sm" role="document">

  260. 			 <div class="modal-content">

  261. 				<img class="poptin-parrot-makingsure-image" src="{{ module_img_dir }}parrot-oopsie.png">

  262. 				<h4>Oopsie... wrong ID</h4>

  263. 				<p><a href="javascript:void(0)" class="poptin-lightbox-atag where-is-my-id-inside-lb wheremyid" data-toggle="modal">Where is my user ID?</a></p>

  264. 				<div class="popup_down">

  265. 				   <div class="poptup_button"><a href="javascript:void(0)"  class="close_oopsiewrongid" data-dismiss="modal" aria-label="Close">Try again</a></div>

  266. 				</div>

  267. 			 </div>

  268. 		  </div>

  269. 	   </div>

  270. 	   <!--/oopsiewrongid-->

  271. 	   <div class="modal fade hidediv " id="deactivate_poptin_popup" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">

  272. 		  <div class="modal-dialog modal-sm" role="document">

  273. 			 <div class="modal-content">

  274. 				<img class="poptin-parrot-makingsure-image" src="{{ module_img_dir }}parrot-making-sure.png">

  275. 				<h4>Just making sure</h4>

  276. 				<p>Are you sure you want to <br /> remove Poptin? </p>

  277. 				<div class="popup_down">

  278. 					<span id="deactivate_url" class="hidediv"> {{ deactivate_url }}</span>

  279. 				   <div class="poptup_button"><a href="javascript:void(0)" class="pplogout1" >Yes</a></div>

  280. 				   <a href="javascript:void(0)" data-dismiss="modal" aria-label="Close" class="close_confirm">I'll stay</a>

  281. 				</div>

  282. 			 </div>

  283. 		  </div>

  284. 	   </div> 	    	 

  285. 	   <!--/deactivate_poptin_popup-->

  286. 	   <div class="modal hidediv fade byebyeModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">

  287. 		  <div class="modal-dialog modal-sm" role="document">

  288. 			 <div class="modal-content">

  289. 				<img class="poptin-parrot-byebye-image" src="{{ module_img_dir }}parrot-bye-bye.png">

  290. 				<h4>Bye Bye</h4>

  291. 				<p>Poptin snippet has been <br /> removed. See you around. </p>

  292. 				<div class="popup_down">

  293. 				   <div class="poptup_button"><a href="javascript:void(0)" class="close_bybye" data-dismiss="modal" aria-label="Close">Close</a></div>

  294. 				</div>

  295. 			 </div>

  296. 		  </div>

  297. 	   </div>

  298. 	   <!--/byebyeModal-->

  299. 	</div>

  300.     <div class="swal-overlay swal_d_display swal-overlay--show-modal" tabindex="-1">

  301.       <div class="swal-modal" role="dialog" aria-modal="true">

  302. 	    <div class="swal-icon swal-icon--error">

  303.           <div class="swal-icon--error__x-mark">

  304.             <span class="swal-icon--error__line swal-icon--error__line--left"></span>

  305.             <span class="swal-icon--error__line swal-icon--error__line--right"></span>

  306.           </div>

  307.         </div>

  308.         <div class="swal-title">Error</div>

  309. 		<div class="swal-text">The email must be a valid email address.</div>

  310. 		<div class="swal-footer">

  311. 		  <div class="swal-button-container">

  312.             <button class="swal-button swal-button--confirm">OK</button>

  313.             <div class="swal-button__loader">

  314.             </div>

  315.           </div>

  316.         </div>

  317.       </div>

  318.     </div>