PluginProbe
Icegram Engage – Popups, Optins, CTAs & Lead Generation / 3.1.34
Icegram Engage – Popups, Optins, CTAs & Lead Generation v3.1.34
3.1.5 3.1.6 3.1.7 3.1.8 3.1.9 3.1.34 3.1.35 3.1.36 3.1.37 3.1.38 3.1.39 3.1.4 3.1.40 3.1.41 3.1.42 3.1.43 trunk 1.1 1.1.1 1.1.2 1.10 1.10.1 1.10.10 1.10.11 1.10.12 All 180 releases
icegram / lite / gallery.php

gallery.php in Icegram Engage – Popups, Optins, CTAs & Lead Generation 3.1.34, at lite/gallery.php

967 lines 37.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <style type="text/css">
2 .ig-gallery-wrap .theme-browser .theme{
3 border-radius: 5px;
4 border: none;
5 margin-bottom: 5%;
6 box-shadow: 1px 3px 10px 0 rgba(0,0,0,0.15);
7 }
8 .ig-gallery-wrap .theme-browser .theme:hover{
9 box-shadow: 1px 3px 10px 0 rgba(0,0,0,0.2);
10 }
11 .ig-gallery-wrap.wrap > h2:first-child{
12 padding-left: 0 !important;
13 }
14 .ig-gallery-wrap .theme-browser .theme .theme-screenshot{
15 border-radius: 5px;
16 }
17 .ig-gallery-wrap .theme-browser .theme .theme-screenshot img{
18 height: 100%;
19 }
20 .ig-gallery-wrap .theme-browser .theme .theme-installed{
21 width: 2em;
22 padding: 0;
23 height: 2em;
24 }
25 .ig-gallery-wrap .theme-browser .theme .theme-installed:before{
26 font-size: 30px;
27 top:-2px;
28 left:-4px;
29 }
30 .expanded .wp-full-overlay-footer.ig-get-pro-footer{
31 position: fixed;
32 bottom: 60px;
33 left: 0;
34 height: 24px;
35 background: #dcdcdc;
36 text-align: center;
37 padding-top: 0.2em;
38 border-top: 1px dashed #ddd;
39 /*border-bottom: 1px dashed #ddd;*/
40 }
41 .expanded .wp-full-overlay-footer.ig-get-pro-footer span{
42 /*color: #900101;*/
43 }
44 .wp-full-overlay-connect{
45 background-color: #fff;
46 width: 100%;
47 height: 100%;
48 }
49
50 /* New CSS*/
51 .igg-sidebar {
52 float: left;
53 width: 12.9%;
54 margin: 0 2% 0 0;
55 border-right: 1px solid #d2d2d2;
56 }
57 .igg-content {
58 float: left;
59 width: 85%;
60 }
61 .igg-sidebar .category > h2{
62 /*margin-bottom: 0.5em;*/
63 margin-top: 0.5em;
64 margin-right: 0.5em;
65 margin-bottom: 0;
66 padding: 0.5em;
67 cursor: pointer;
68 transition: all 0.1s;
69 border-radius: 3px;
70 /*background-color: #e0e0e0;*/
71 color: #909090;
72 font-size: 1.15em;
73 }
74
75 /*.igg-sidebar .category > h2:hover{
76 background-color: orange;
77 color: #ffffff;
78 }*/
79
80 .igg-sidebar .category > ul{
81 /*margin-left: 1em;*/
82 padding-bottom: 0.5em;
83 margin-right: 1em;
84 margin-top:0.5em;
85 /*margin-bottom:1em;*/
86 cursor: pointer;
87 border-bottom: 1px solid #dedede;
88 }
89
90 .igg-sidebar .category > ul > li {
91 padding: 0.25em 1em;
92 margin: 0;
93 border-radius: 2px;
94 transition: all 0.1s;
95 }
96 .igg-sidebar .category > ul > li:hover, .igg-sidebar .category > ul > li.active {
97 background-color: #5f3af1;
98 color: white;
99 }
100
101 .igg-content .theme {
102 border: 7px solid white !important;
103 }
104
105 .igg-content .theme .title {
106 white-space: nowrap;
107 overflow: hidden;
108 text-overflow: ellipsis;
109 max-width: 75%;
110 color: #b7b7b7;
111 /*font-weight:200;*/
112 font-size: 0.85em;
113 }
114
115 .pills {
116 padding: 0.3em 0.6em;
117 background-color: #c5c5c5;
118 color: #ffffff;
119 font-size:1em;
120 }
121 .sq.pills {
122 border-radius: 3px;
123 }
124 .pills.sm{
125 font-size: 0.75em;
126 }
127 .pills.md{
128 font-size: 1em;
129 }
130 .pills.lg{
131 font-size: 1.3em;
132 padding: 0.4em 0.75em;
133 }
134 .pills.upc{
135 text-transform: uppercase;
136 }
137 .pills.cap{
138 text-transform: capitalize;
139 }
140
141 .btn {
142 padding: 0.75em 1em;
143 color: #ffffff;
144 border-radius: 3px;
145 text-decoration: none;
146 }
147 .btn:hover {
148 color: #ffffff;
149 background-color
150 }
151
152 .btn.purple {
153 background-color: hsl(244, 70%, 60%);
154 }
155 .btn.purple:hover {
156 background-color: hsl(244, 70%, 45%);
157
158 }
159 .btn.green {
160 background-color: hsl(169, 79%, 40%);;
161 }
162 .btn.green:hover {
163 background-color: hsl(169, 79%, 25%);;
164 }
165
166 .igg-content .theme .pills.free,
167 .igg-content .theme .pills.plus {
168 display: none;
169 }
170
171 .igg-content .theme .pills.pro {
172 background-color: #16b99a;
173 }
174
175 .igg-content .theme .pills.max {
176 background-color: #5f3af1;
177 }
178
179 .igg-content .theme .locked {
180 color: #e4951b;
181 }
182
183 .igg-content .theme .unlocked {
184 color: #bdbdbd;
185 }
186
187 .ig-gallery-wrap .float-left {
188 float: left;
189 }
190 .ig-gallery-wrap .float-right {
191 float: right;
192 }
193
194 .ig-gallery-wrap .theme-browser {
195 clear:both;
196 }
197 .ig-gallery-wrap .theme-browser .themes{
198 clear:both;
199 }
200
201 .igg-content .filter-header {
202 color: #888888;
203 margin: 0 0 2em 0;
204 /* display: none; */
205 border-bottom: 1px solid #e6e6e6;
206 padding-bottom: 1em;
207 }
208 .igg-content .filter-header .meta {
209 font-size: 1em;
210 color: #bbbbbb;
211 /*margin-top: 1em;
212 padding-top: 0.5em;*/
213 display: inline-block;
214 }
215
216 /*.igg-content .category-title-def,*/
217 .igg-content .category-type,
218 .igg-content .category-title{
219 background-color: #cacaca;
220 cursor:pointer;
221 }
222 .igg-content .filter-header .dashicons-arrow-right {``
223 color: #cacaca;
224 }
225
226 .igg-content .sub-category-title {
227 background-color: #7971f1;
228 cursor:pointer;
229 }
230
231 .igg-preview-sidebar .wp-full-overlay-sidebar-content .theme-screenshot {
232 padding: 0.5em;
233 border-radius: 3px;
234 border: 1px solid #e4e4e4;
235 margin-bottom: 0 !important;
236 }
237 .igg-preview-sidebar .wp-full-overlay-sidebar-content .theme-description {
238 float: none;
239 margin-top: 0.25em;
240 margin-bottom: 0.5em;
241 border-bottom: 1px solid #e6e6e6;
242 padding-bottom: 0.5em;
243 }
244 .igg-preview-sidebar .wp-full-overlay-sidebar-content .theme-name {
245 line-height: 18px;
246 margin-bottom: 0.25em;
247 }
248 .igg-preview-sidebar .wp-full-overlay-sidebar-content .theme-info {
249 display: unset;
250 }
251 .igg-preview-sidebar .wp-full-overlay-header .theme-install {
252 float: right;
253 line-height: 10px;
254 margin:8px 10px 0 0;
255 }
256 .igg-preview-sidebar .wp-full-overlay-sidebar-content .theme-by a {
257 text-decoration: none;
258 color: #2a25de;
259 font-style: italic;
260 }
261
262 .igg-preview-sidebar .wp-full-overlay-sidebar-content .tags {
263 margin: 1em 0;
264 }
265 .igg-preview-sidebar .wp-full-overlay-sidebar-content .tags .plan {
266 background-color: #7971f1;
267 }
268
269 .igg-preview-sidebar .wp-full-overlay-sidebar-content .tags .category {
270 background-color: #16b99a;
271 }
272
273 .igg-preview-sidebar .wp-full-overlay-sidebar-content .tags .meta {
274 margin-top:0.5em;
275 font-size: 0.95em;
276 }
277 .igg-preview-sidebar .wp-full-overlay-sidebar-content .tags .meta .icon {
278 color: #d0d0d0;
279 }
280 .igg-preview-sidebar .wp-full-overlay-sidebar-content .tags .meta .lbl {
281 color: #9a9a9a;
282 font-style: italic;
283 }
284 .igg-sidebar .search-form #wp-filter-search-input{
285 width:13em;
286 /*float: left;*/
287 /*display: inline;*/
288 /*border-bottom: 1px solid #ddd;*/
289 }
290 [type="checkbox"]:checked + .ig-select-campaign-type, [type="checkbox"]:checked + .ig-sub-selection-goal,[type="radio"]:checked + .ig-select-trial-template {
291 transition-property: all;
292 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
293 transition-duration: 100ms;
294 transform: scale(1.02);
295 background-color: rgba(249, 250, 251, 1);
296 border-width: 1.75px;
297 border-color: rgba(229, 231, 235, 1);
298 }
299
300 [type="radio"]:checked + .ig-select-trial-template {
301 border-width: 2px;
302 box-shadow:0.5px 1px 3px #696969;
303 }
304
305 [type="checkbox"]:not(:checked) + .ig-sub-selection-goal:hover, [type="checkbox"]:not(:checked) + .ig-select-campaign-type:hover, [type="radio"]:not(:checked) + .ig-select-trial-template:hover {
306 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
307 border-color: #ebf5ff;
308 border-color: rgba(235, 245, 255, 1);
309 }
310
311 [type="checkbox"]:checked + .single-goal {
312 background-color: rgba(213, 245, 246, 1);
313 }
314
315 .select2-container{
316 margin: 0 2px 0 2px;
317 }
318
319 @media only screen and (min-width: 1200px) {
320 .select2-container{
321 width: 36.5% !important;
322 }
323 }
324 @media only screen and (min-width: 1300px) {
325 .select2-container{
326 width: 37.75% !important;
327 margin: 0 2px 0 2px;
328 }
329 }
330
331 .select2-search__field{
332 width: 100% !important;
333 }
334
335 .select2-selection__rendered{
336 height:2.35rem;
337 }
338
339 .campaign_filters .select2-selection{
340 border: 1px solid #837e7e;
341 }
342 .campaign_filters .select2-container--default .select2-selection--multiple .select2-selection__choice {
343 margin-bottom: 0;
344 margin-top: 4px;
345 }
346
347 .campaign_filters .select2-container .select2-search--inline {
348 margin-bottom: 0;
349 }
350
351 .campaign_filters .select2-container:not(.select2-container--focus) .select2-search--inline:not(:only-child) {
352 display: none;
353 }
354
355 .campaign_filters .select2-container .select2-search--inline .select2-search__field {
356 margin-top: 0;
357 min-height: 20px;
358 height: 24px;
359 }
360
361 .campaign_filters .select2-container .select2-selection--multiple {
362 min-height: 30px;
363 }
364
365 .ig-sub-selection-goal {
366 height: 12rem !important;
367 }
368
369 </style>
370
371 <div class="wrap ig-gallery-wrap">
372 <div class="wp-clearfix">
373 <?php
374 global $icegram;
375
376 $campaign_types = array(
377 'popup' => array(
378 'term-id' => 25,
379 'category' => 'message-type',
380 'type' => 'popup',
381 'plan' => 'free',
382 'title' => __('Popup', 'icegram'),
383 'img-path' => 'lite/assets/images/sketch-popup-158X127.png',
384 ),
385 'action-bar' => array(
386 'term-id' => 23,
387 'category' => 'message-type',
388 'type' => 'action-bar',
389 'plan' => 'free',
390 'title' => __('Action Bar', 'icegram'),
391 'img-path' => 'lite/assets/images/action-bar-158X127.png',
392 ),
393 'toast' => array(
394 'term-id' => 34,
395 'category' => 'message-type',
396 'type' => 'toast',
397 'plan' => 'free',
398 'title' => __('Toast', 'icegram'),
399 'img-path' => 'lite/assets/images/sketch-toast-notification-158X127.png',
400 ),
401 'messenger' => array(
402 'term-id' => 24,
403 'category' => 'message-type',
404 'type' => 'messenger',
405 'plan' => 'free',
406 'title' => __('Messenger', 'icegram'),
407 'img-path' => 'lite/assets/images/sketch-messenger-158X127.png',
408 ),
409 'inline' => array(
410 'term-id' => 31,
411 'category' => 'message-type',
412 'type' => 'inline',
413 'plan' => 'pro',
414 'title' => __('Inline', 'icegram'),
415 'img-path' => 'lite/assets/images/sketch-inline-158X127.png',
416 ),
417 'badges' => array(
418 'term-id' => 35,
419 'category' => 'message-type',
420 'type' => 'badge',
421 'plan' => 'pro',
422 'title' => __('Badges', 'icegram'),
423 'img-path' => 'lite/assets/images/badges-158X127.png',
424 ),
425 'overlay' => array(
426 'term-id' => 39,
427 'category' => 'message-type',
428 'type' => 'overlay',
429 'plan' => 'max',
430 'title' => __('Overlay', 'icegram'),
431 'img-path' => 'lite/assets/images/sketch-overlay-158X127.png',
432 ),
433 'sticky' => array(
434 'term-id' => 37,
435 'category' => 'message-type',
436 'type' => 'sticky',
437 'plan' => 'pro',
438 'title' => __('Sticky', 'icegram'),
439 'img-path' => 'lite/assets/images/sketch-stickies-158X127.png',
440 ),
441 'ribbon' => array(
442 'term-id' => 36,
443 'category' => 'message-type',
444 'type' => 'ribbon',
445 'plan' => 'pro',
446 'title' => __('Ribbon', 'icegram'),
447 'img-path' => 'lite/assets/images/sketch-ribbons-158X127.png',
448 ),
449 'tab' => array(
450 'term-id' => 41,
451 'category' => 'message-type',
452 'type' => 'tab',
453 'plan' => 'max',
454 'title' => __( 'Tab', 'icegram'),
455 'img-path' => 'lite/assets/images/sketch-tab-158X127.png',
456 ),
457 'sidebar' => array(
458 'term-id' => 40,
459 'category' => 'message-type',
460 'type' => 'sidebar',
461 'plan' => 'max',
462 'title' => __('Sidebar', 'icegram'),
463 'img-path' => 'lite/assets/images/sketch-sidebar-158X127.png',
464 ),
465 );
466
467 $campaign_types = apply_filters( 'ig_get_widget_message_types' , $campaign_types );
468
469 $onboarding_campaign_goal = array(
470 'newsletter' => array(
471 'term-id' => 55,
472 'category' => 'use-case',
473 'title' => __('Grow audience', 'icegram'),
474 'desc' => __('Build your lists with newsletter subscription opt-ins', 'icegram'),
475 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />/svg>',
476 'checked' => true,
477 ),
478 'guide-visitors' => array(
479 'term-id' => 63,
480 'category' => 'use-case',
481 'title' => __('Guide visitors', 'icegram'),
482 'desc' => __('Call to actions to nudge people to visit a page or link', 'icegram'),
483 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" /></svg>',
484 ),
485 'lead-magnet' => array(
486 'term-id' => 57,
487 'category' => 'use-case',
488 'title' => __('Giveaway downloadable resources', 'icegram'),
489 'desc' => __('Have a lead magnet? Deliver it when people sign up to your list', 'icegram'),
490 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>',
491 ),
492 'announcement' => array(
493 'term-id' => 62,
494 'category' => 'use-case',
495 'title' => __('Make announcements', 'icegram'),
496 'desc' => __('Show important information or news to visitors', 'icegram'),
497 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" /></svg>',
498 ),
499 'drive-sales' => array(
500 'term-id' => 56,
501 'category' => 'use-case',
502 'title' => __('Grow revenue', 'icegram'),
503 'desc' => __('Make special offers, show coupons and reduce cart abandonment', 'icegram'),
504 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" /></svg>',
505 ),
506 'callback' => array(
507 'term-id' => 60,
508 'category' => 'use-case',
509 'title' => __('Get inbound leads', 'icegram'),
510 'desc' => __('Show phone call back, text SMS or mail contact information easily', 'icegram'),
511 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>',
512 ),
513 'social' => array(
514 'term-id' => 30,
515 'category' => 'use-case',
516 'title' => __('Increase social media followers', 'icegram'),
517 'desc' => __('Show elegant social media icons to gain followers', 'icegram'),
518 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>',
519 ),
520 'yes-no' => array(
521 'term-id' => 44,
522 'category' => 'use-case',
523 'title' => __('Collect feedback', 'icegram'),
524 'desc' => __('Run a mini survey with Yes/No campaign and drive people to act', 'icegram'),
525 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" /></svg>',
526 ),
527 'scratch' => array(
528 'term-id' => 51,
529 'category' => 'use-case',
530 'title' => __('Build your own', 'icegram'),
531 'desc' => __('Start with a blank template and customize it your way', 'icegram'),
532 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>',
533 'allow-multiple-goal' => "no",
534 ),
535 );
536
537 $campaign_goal = array_merge( array(
538 'lock_content' => array(
539 'term-id' => 65,
540 'category' => 'use-case',
541 'title' => __('Lock your content', 'icegram'),
542 ),
543 ), $onboarding_campaign_goal);
544
545 $show_onboarding = $icegram->show_campaign_creation_guide();
546
547 if ( $show_onboarding ) {
548
549 // Import data if not done already
550 if ( false === get_option( 'icegram_sample_data_imported' ) ) {
551 $icegram->import_sample_data( $icegram->get_sample_data() );
552 }
553 ?>
554
555 <div class="select-item icegram_tw">
556 <div class="mx-auto mt-6 sm:mt-5 ig-logo">
557 <img src="<?php echo esc_url( IG_PLUGIN_URL . 'lite/assets/images/icegram_logo.svg' ); ?>" class="mx-auto h-6 border-0" alt="Icegram" />
558 </div>
559
560 <div id="slider-wrapper" class="font-sans">
561 <div id="slider">
562 <div class="ig-onboarding-campaign-goal" style="">
563 <section class="mx-auto my-6 sm:my-7">
564 <div class="w-full h-full overflow-hidden bg-white lg:flex md:rounded-lg md:shadow-xl md:mx-auto lg:max-w-3xl xl:max-w-4xl">
565 <div class="flex-1 ">
566 <div class="p-5 md:px-8 md:py-5">
567 <h3 class="text-center mb-1 text-2xl font-bold leading-snug text-gray-800">
568 <?php echo esc_html__( 'Goal for this campaign', 'icegram' ); ?>
569 </h3>
570 <p class="text-center title-font text-base text-gray-800 mb-3"><?php echo esc_html__( 'What should this campaign help you achieve? Please select a primary goal or more', 'icegram' ); ?></p>
571 <div class="select-item py-2">
572 <div class="inline-block p-2 overflow-hidden text-left align-bottom sm:w-full">
573 <div class="container px-5 py-2 mx-auto ig-section-sub">
574 <div class="flex flex-wrap -m-4">
575 <?php
576 foreach ($onboarding_campaign_goal as $goal) {
577 $bg_css = isset( $goal['allow-multiple-goal'] ) && 'no' === $goal['allow-multiple-goal'] ? 'bg-teal-50 single-goal' : '';
578 ?>
579 <div class="xl:w-1/3 md:w-1/2 p-4 h-full ig-select-sub ">
580 <label class="cursor-pointer hover:shadow-lg hover:border-transparent">
581 <input type="checkbox" name="ig-campaign-goal" class="absolute w-0 h-0 opacity-0" category="usecase" usecase="<?php echo esc_attr( $goal['term-id'] ) ?>" value="<?php echo esc_html( $goal['title'] ) ?>" <?php echo isset( $goal['checked'] ) ? 'checked' : '' ?> allow-multiple-goal="<?php echo isset( $goal['allow-multiple-goal'] ) ? esc_html( $goal['allow-multiple-goal'] ) : 'yes' ?>" >
582
583 <div class="border border-gray-200 p-4 rounded-lg ig-sub-selection-goal <?php echo esc_html($bg_css) ?>">
584 <p>
585 <svg id="usecase_<?php echo esc_attr( $goal['term-id'] ) ?>" class="selected_goals hidden float-right h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
586 <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
587 </svg>
588 </p>
589 <div class="w-8 h-8 inline-flex items-center justify-center rounded-full bg-purple-100 text-purple-500 mb-4">
590 <?php echo $goal['icon'];
591 ?>
592 </div>
593 <p class="text-lg text-gray-900 font-medium title-font inline break-words relative bottom-1"><?php echo esc_html( $goal['title'] ) ?></p>
594 <p class="leading-relaxed text-base"><?php echo esc_html( $goal['desc'] ) ?></p>
595 </div>
596 </label>
597 </div>
598 <?php
599 }
600 ?>
601 </div>
602 </div>
603 </div>
604
605 </div>
606 </div>
607 <div class="px-4 py-3 text-right bg-gray-50 md:px-8 -mt-5">
608 <button
609 type="button" id="ig-select-goal" class="relative inline-flex items-center px-2 py-1 text-base font-medium leading-5 text-white bg-indigo-800 border border-transparent rounded-md hover:bg-indigo-600 focus:outline-none focus:shadow-outline">
610 <?php echo esc_html__( 'Continue →', 'icegram' ); ?>
611 </button>
612 </div>
613 </div>
614 </section>
615 </div>
616 <div class="ig-onboarding-campaign-type" style="display: none">
617 <section class="mx-auto my-6 sm:my-7">
618 <div class="w-full h-full overflow-hidden bg-white lg:flex md:rounded-lg md:shadow-xl md:mx-auto lg:max-w-3xl xl:max-w-4xl">
619 <div class="flex-1">
620 <div class="p-5 md:px-8 md:py-5">
621 <h3 class=" text-center mb-2 text-2xl font-bold leading-snug text-gray-800 sm:text-3xl">
622 <?php echo esc_html__( 'Message placement', 'icegram' ); ?>
623 </h3>
624 <p class="px-5 text-center title-font text-base text-gray-800 mb-3"><?php echo esc_html__( 'What message types would you like to use in this campaign? Select all that you like - or just continue without selecting if you’re not sure.', 'icegram' ); ?></p>
625 <div class="select-item py-2">
626 <div class="inline-block p-2 overflow-hidden text-left align-bottom sm:w-full">
627 <div class="container px-5 py-2 mx-auto">
628 <ul role="list" class="grid gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8">
629 <?php
630 foreach ($campaign_types as $campaign_type) {
631 ?>
632 <li class="relative cursor-pointer radio-select ig-selection-section" >
633 <label class="inline items-center cursor-pointer">
634 <input type="checkbox" name="ig-campaign-type" class="absolute w-0 h-0 opacity-0" category="message-type" message-type="<?php echo esc_attr( $campaign_type['term-id']) ?>" value="<?php echo esc_html( $campaign_type['title'] ) ?>">
635 <div class="ig-select-campaign-type text-center border border-gray-100 rounded-lg px-4 py-2">
636 <p class="h-6">
637 <svg id="message-type_<?php echo esc_attr( $campaign_type['term-id'] ) ?>" class="hidden float-right h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
638 <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
639 </svg>
640 </p>
641 <div class="group w-full aspect-w-10 aspect-h-7 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-gray-100 focus-within:ring-indigo-500 overflow-hidden">
642
643 <img src="<?php echo esc_url( IG_PLUGIN_URL . $campaign_type['img-path'] ); ?>" alt="" class="w-full pointer-events-none">
644
645 </div>
646 <?php
647 if( ( $icegram->is_pro() && ! $icegram->is_max() && 'max' === $campaign_type['plan'] ) || ( ! $icegram->is_premium() && in_array( $campaign_type['plan'], array('max', 'pro') ) ) ) {
648
649 ?>
650 <span class="float-right border border-blue rounded py-0.5 px-2 bg-blue-700 text-white -ml-12 -mr-1"><?php echo esc_html( ucfirst( $campaign_type['plan'] ) ); ?></span>
651 <?php
652 }
653 ?>
654 <span class="text-center block text-sm font-medium text-gray-900 truncate pointer-events-none"><?php echo esc_html( $campaign_type['title']) ?></span>
655 </div>
656 </label>
657 </li>
658 <?php
659 }
660 ?>
661 </ul>
662 </div>
663 </div>
664 </div>
665
666 </div>
667 <div class="px-4 py-3 text-right bg-gray-50 md:px-8">
668 <button type="button" id="ig-message-type" class="ig-message-type-select relative inline-flex items-center px-3 py-1 text-base font-medium leading-5 text-white bg-indigo-800 border border-transparent rounded-md hover:bg-indigo-600 focus:outline-none focus:shadow-outline">
669 <?php echo esc_html__( 'Continue →', 'icegram' ); ?>
670 </button>
671 </div>
672 </div>
673 </div>
674 </section>
675 </div>
676 <?php
677 $current_user = wp_get_current_user();
678 $customer_email = $current_user->user_email;
679 if( ! $icegram->is_premium() && ! get_option('ig_opted_trial') ){
680 ?>
681 <div class="ig-onboarding-campaign-trial" style="display: none">
682 <section class="mx-auto my-6 sm:my-7">
683 <div class="w-full h-full overflow-hidden bg-white lg:flex md:rounded-lg md:shadow-xl md:mx-auto lg:max-w-3xl xl:max-w-4xl">
684 <form method="get" name="ig_trial_subscription" id="ig-subscription-form">
685 <div class="flex-1">
686 <div class="p-5 md:px-8 md:py-5">
687 <h3 class="text-center mb-1 text-2xl font-bold leading-snug text-gray-800">
688 <?php echo esc_html__( 'Start your trial today!', 'icegram' ); ?>
689 </h3>
690 <p class="text-center title-font text-base text-gray-800 mb-3"><?php echo sprintf( esc_html__( 'Get 14 days trial and try %s premium Icegram template for free: No obligation!', 'icegram'), '<strong>one</strong>' ); ?></p>
691 <div class="select-item px-5 py-2 title-font text-gray-700 mb-3">
692 <p class="text-base font-medium mt-5 mb-2"><?php echo esc_html__('Sign up for free trial, pick a template and click on unlock', 'icegram') ?>
693
694 </p>
695
696 <input type="hidden" id="sign-up-list" name="list" value="afab885c7e85"/>
697 <input type="hidden" id="sign-up-form-source" name="form-source" value=""/>
698 <input class="ltr form-input py-1" type="text" name="ig_trial_name" id="ig-sign-up-name" placeholder="Name"/>
699 <input class="regular-text ltr form-input py-1 ml-1" type="text" name="ig_trial_email" id="ig-sign-up-email" placeholder="Email" value="<?php echo $customer_email ?>"/>
700
701 <br><br>
702 <div class="select-item py-2 ig-trial-templates">
703 <div class="inline-block py-2 text-left align-bottom sm:w-full">
704 <p class="text-base font-medium mt-2 mb-1"><?php echo esc_html__('Choose a template','icegram') ?></p>
705 <div class="container py-2 mx-auto">
706 <ul role="list" class="grid gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-3 xl:gap-x-6">
707 <?php
708 $templates = json_decode( $ig_gallery_items, true );
709 foreach ($templates as $template => $data) {
710 if( 99 == $data['plan'] ) {
711 ?>
712 <li class="relative cursor-pointer">
713 <label class="inline items-center cursor-pointer">
714 <input type="radio" name="ig-select-trial-template" class="absolute w-0 h-0 opacity-0" data-campaign-id="<?php echo $data['campaign_id'] ?>" data-gallery-item="<?php echo $data['slug'] ?>">
715 <div class="ig-select-trial-template text-center border border-gray-100 rounded-lg">
716 <img src="<?php echo $data['image']['guid']; ?>" alt="" class="rounded-lg w-full">
717
718 </div>
719 </label>
720 </li>
721 <?php
722 }
723 }
724 ?>
725 </ul>
726 </div>
727 </div>
728 </div>
729 </div>
730 </div>
731 <div class="px-4 py-3 text-right bg-gray-50 md:px-8 -mt-5">
732 <a href="#" id="ig-onboarding-gallery" class="px-4 hover:underline text-gray-400"><?php echo esc_html__( 'Skip Trial', 'icegram' ); ?></a>
733 <a id="ig-trial-optin" href="?action=fetch_messages&campaign_id=&gallery_item=&ig_trial=1" class=" p-1.5 mb-1 px-3 py-1 text-base font-medium leading-5 text-white bg-indigo-800 border border-transparent rounded-md hover:bg-indigo-600 focus:outline-none focus:shadow-outline theme-install">
734 <?php echo esc_html__( 'Unlock this template →', 'icegram' ); ?>
735 <svg style="display: none;" class="ig-spinner inline-block animate-spin mx-1 mb-1 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
736 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
737 <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
738 </svg>
739
740 </a>
741 </div>
742 </div>
743 </form>
744 </div>
745 </section>
746 </div>
747 <?php
748 }
749 ?>
750 </div>
751 </div>
752 </div>
753 <?php
754 }
755 ?>
756 <!-- Sidebar - quick filtering and searching -->
757 <div class="description" style="padding-bottom:2em; <?php echo ( $show_onboarding ) ? 'display: none' : '' ?>">
758 <h2 style="font-size:17px;font-weight: 500">
759 <?php echo ( $show_onboarding ) ? esc_html__('Choose a design', 'icegram') : esc_html__( 'Icegram Engage design templates', 'icegram' ) ?>
760
761 </h2>
762 <div style="padding-bottom:3px;font-size:14px">
763
764 </div>
765 <div style="font-size:14px">
766 <?php
767 if ( $show_onboarding ) {
768 echo esc_html__('Here\'s some gallery templates filtered out for you. Simply ', 'icegram');
769 } else {
770 echo sprintf(
771 esc_html__('Filter out the templates based on %1$s and %2$s and then simply', 'icegram'),
772 '<strong>' . esc_html__('your goals', 'icegram') . '</strong>',
773 '<strong>' . esc_html__('message type', 'icegram') . '</strong>'
774 );
775 }
776 echo sprintf(
777 esc_html__(' click to %s and the campaign will automatically appear in your Icegram Engage dashboard. No coding or special skills required.', 'icegram'),
778 '<strong>' . esc_html__('Use This', 'icegram') . '</strong>'
779 );
780 ?>
781 </div>
782
783 </div>
784 <div class="igg-sidebar" style="display:none">
785 <form class="search-form"></form>
786 <div class="meta"></div>
787 <div class="category reset">
788 <ul><li class="category-type" category="reset">Reset</li></ul>
789 </div>
790 <?php
791 foreach ($cat_list as $category) {
792 $not_have_sub_cat = (empty($category['list'])) ? 'not_have_sub_cat' : '';
793 ?>
794 <div class="category <?php echo $category['slug']?> <?php echo $not_have_sub_cat?>" category="<?php echo $category['slug']?>" <?php echo $category['slug']?>="<?php echo $category['term_id']?>" >
795 <h2><?php _e($category['name'], 'icegram')?></h2>
796 <ul>
797 <?php
798 if(!empty($category['list'])){
799 foreach ($category['list'] as $sub_cat) {
800 ?>
801 <li class="category-type" category="<?php echo $category['slug']?>" <?php echo $category['slug']?>="<?php echo $sub_cat['term_id']?>" ><?php _e($sub_cat['name'], 'icegram')?></li>
802 <?php
803 }
804 }
805 ?>
806 </ul>
807 </div>
808 <?php
809 }
810
811 ?>
812 </div>
813
814 <div class="igg-filters campaign_filters align-right icegram_tw" style="<?php echo ( $show_onboarding ) ? 'display: none' : '' ?>">
815 <div class="inline-block ml-6 w-11/12 inline mb-2 campaign-goal">
816 <select class="gallery_campaign_goal select2-hidden-accessible overflow-hidden" multiple="multiple" name="gallery_campaign_goal" tabindex="-1" aria-hidden="true" placeholder="Select goal">
817 <option value=""><?php echo esc_html__( 'Any campaign', 'icegram' ); ?></option>
818 <?php
819 foreach ($campaign_goal as $goal) { ?>
820 <option class="goal_options" category="<?php echo esc_attr( $goal['category'] ) ?>" use-case="<?php echo esc_attr( $goal['term-id'] ) ?>" value="<?php echo esc_attr( $goal['title'] ) ?>"><?php echo esc_html( $goal['title']); ?></option>
821 <?php }
822 ?>
823 </select>
824 <select class="gallery_message_type select2-hidden-accessible" multiple="" name="gallery_message_type" tabindex="-1" aria-hidden="true" placeholder="Select message type">
825 <?php
826 foreach ($campaign_types as $campaign_type) { ?>
827 <option class="message_type_options" category="<?php echo esc_attr( $campaign_type['category'] ) ?>" message-type="<?php echo esc_attr( $campaign_type['term-id'] ) ?>" value="<?php echo esc_attr( $campaign_type['title'] ) ?>"><?php echo esc_html( $campaign_type['title']); ?></option>
828 <?php }
829 ?>
830 </select>
831
832 <div class="inline-block mx-1 mt-4">
833 <p class="gallery_filters cursor-pointer relative inline-flex text-sm items-center -mt-2 mx-1.5 px-3 py-1 font-medium leading-5 text-white bg-indigo-800 border border-transparent rounded-md hover:bg-indigo-600 focus:outline-none focus:shadow-outline"><?php echo esc_html__('Filter Templates', 'icegram'); ?></p>
834 </div>
835 <div class="category inline-block mx-1 mt-3">
836 <p class="ig-reset-button category-type inline cursor-pointer border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white transition duration-150 ease-in-out px-3 py-1" category="reset"><?php echo esc_html__('Show All', 'icegram'); ?></p>
837 </div>
838 </div>
839
840 </div>
841 <hr style="margin:1.5rem 0;">
842 <div class="igg-content" style="width: 100%; <?php echo ( $show_onboarding ) ? 'display: none' : '' ?>">
843
844 <div class="theme-browser">
845 <div class="themes wp-clearfix"></div>
846 </div>
847 </div>
848
849
850 </div>
851 <div class="theme-install-overlay wp-full-overlay expanded"></div>
852 <!-- <div class="theme-overlay"></div> -->
853 </div><!-- .wrap -->
854 <script id="tmpl-theme" type="text/template">
855 <# if ( data.image ) { #>
856 <div class="theme-screenshot">
857 <div class="wp-clearfix">
858 <img src="{{ data.image.guid }}" alt="" />
859 </div>
860 </div>
861 <# } else { #>
862 <div class="theme-screenshot blank"></div>
863 <# } #>
864 <span class="more-details" id="{{ data.id }}-action"><?php _e( 'Preview' ); ?></span>
865 <div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.id }}}' ); ?></div>
866 <div class="theme-id-container">
867 <div class="theme-name wp-clearfix">
868 <!-- <span>Active:</span> -->
869
870 <!-- Theme title or description.. -->
871 <# if( data.title.rendered ) { #>
872 <span class="float-left title" title="{{ data.title.rendered }}">{{ data.title.rendered }}</span>
873 <# } #>
874
875 <!-- For logos and labels-->
876 <div class="float-right">
877 <!-- logo -->
878
879 <!-- label -->
880 <# if( data.plan_name ) { #>
881 <span class="sq pills sm cap {{data.plan_name}}" title="{{ data.plan_name }}">{{ data.plan_name }}</span>
882 <# } #>
883 </div>
884 </div>
885 </div>
886 </script>
887 <!-- TODO:: Remove it if not required -->
888
889 <script id="tmpl-theme-preview" type="text/template">
890 <div class="wp-full-overlay-sidebar igg-preview-sidebar">
891 <div class="wp-full-overlay-header">
892 <a href="#" class="close-full-overlay"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></a>
893 <a href="#" class="previous-theme"><span class="screen-reader-text"><?php _ex( 'Previous', 'Button label for a theme' ); ?></span></a>
894 <a href="#" class="next-theme"><span class="screen-reader-text"><?php _ex( 'Next', 'Button label for a theme' ); ?></span></a>
895 <a href="?action=fetch_messages&campaign_id={{data.campaign_id}}&gallery_item={{data.slug}}" class="btn purple theme-install" style="display:none"><?php _e( 'Use This', 'icegram' ); ?></a>
896 <a href="https://www.icegram.com/pricing/?utm_source=ig_inapp&utm_medium=ig_gallery&utm_campaign=get_pro" target="_blank" class="ig-get-pro btn green" style="display:none;">
897 <# if(data.plan === '3') { #>
898 <span><?php _e("Get The Max Plan", 'icegram') ?></span>
899 <# } else if(data.plan === '2') { #>
900 <span><?php _e("Get The Pro Plan", 'icegram') ?></span>
901 <# } #>
902 </a>
903 </div>
904 <div class="wp-full-overlay-sidebar-content">
905 <div class="install-theme-info">
906 <h3 class="theme-name">{{ data.title.rendered }}</h3>
907 <span class="theme-by">
908 <a href="https://www.icegram.com/" target="_blank"><?php printf( __( '- By %s' ), 'Icegram Engage' ); ?></a>
909 </span>
910
911 <img class="theme-screenshot" src="{{ data.image.guid }}" alt="">
912
913 <div class="theme-details">
914 <div class="theme-description">{{ data.description }}</div>
915 <div class="tags">
916 <!-- plan-name -->
917 <# if(data.plan_name) { #>
918 <span class="sq pills sm cap plan">{{data.plan_name}}</span>
919 <# } #>
920 <!-- categories -->
921
922 <# _.each(data.category_names,function(cname){ #>
923 <# if(cname != 'no category') { #>
924 <span class="sq pills sm cap category">{{cname}}</span>
925 <# } #>
926 <# }) #>
927 </div>
928 <!-- <div class="theme-info">Liked this template? <br/>Here's how you can customize it further </div> -->
929 <div class="theme-info" style="padding:0.2em;height:auto;">
930 <p style="border-top: 1px solid #f3f3f3;padding: 1em 0;margin:0.5em 0;"><?php _e( 'Would you like to personalize this template to fit your brand?', 'icegram' );?></p>
931 <div>
932 <a href="https://www.icegram.com/documentation/customize-icegrams-gallery-templates/?utm_source=ig_gallery&utm_medium=ig_inapp_promo&utm_campaign=ig_custom_css" target="_blank" class="" style="margin-top:0.4em;"><?php _e( 'Personalize It Now' , 'icegram'); ?></a>
933 </div>
934 </div>
935 </div>
936 </div>
937 </div>
938 <div class="wp-full-overlay-footer ig-get-pro ig-get-pro-footer " style="display:none">
939 <# if(data.plan === '3') { #>
940 <span><?php _e("This template is available in the 'Max Plan'", 'icegram') ?></span>
941 <# } else if(data.plan === '2') { #>
942 <span><?php _e("This template is available in the 'Pro Plan'", 'icegram') ?></span>
943 <# } #>
944 </div>
945 <div class="wp-full-overlay-footer">
946 <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
947 <span class="collapse-sidebar-arrow"></span>
948 <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
949 </button>
950 </div>
951 </div>
952 <div class="wp-full-overlay-main">
953 <iframe src="{{ data.link }}?utm_source=ig_inapp&utm_campaign=ig_gallery&utm_medium={{data.campaign_id}}" title="<?php esc_attr_e( 'Preview' ); ?>" />
954 </div>
955 </script>
956
957 <script type="text/javascript">
958 jQuery(document).ready(function() {
959
960 jQuery('.category-type').on('click', function() {
961 jQuery('.category-type').removeClass('active');
962 jQuery(this).addClass('active');
963 });
964
965 });
966
967 </script>