-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
533 lines (513 loc) · 19 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/index.css" />
<link rel="stylesheet" href="styles/index-2.css" />
<link rel="stylesheet" href="styles/footer.css">
<link rel="stylesheet" href="styles/tourNav.css">
<title>Help Desk Software | Customer Support Software</title>
</head>
<body>
<header>
<div class = "navbar">
<nav>
<div id = "nav-disp">
<ul>
<li><img id = "logo-img" src="https://assets.www.happyfox.com/v2/images/site-nav/topbar-logo-black.svg" alt="happyfox"></li>
<li><a href = "index.html">Home</a></li>
<li><a href = ".//Demo/demo.html">Demo</a></li>
<li><a href = "./happt fox clone/Pricing/index.html">Pricing</a></li>
<li><a href = "./helpdeskpg.html">Helpdesk</a></li>
<li><a href = "./Helpdesk integration/helpdesk-integration.html">Helpdesk Integration</a></li>
</ul>
<ul>
<button id = "login" type = "button"><a href="signin.html">Login</a></button>
</ul>
</div>
</nav>
</div>
</header>
<div id="parent">
<div id="section_one">
<div id="heading_container">
<h1 id="header">Get More Done with a Modern Support Stack</h1>
<p id="tagline">
Deliver outstanding support and achieve new goals with HappyFox.
</p>
<div id="input_container_main">
<div id="input_container_child">
<input
type="email"
id="email_input"
placeholder="Enter your work email"
/>
<button onclick="goToDemo()" id="submit_email">GET A DEMO</button>
</div>
<p id="terms">
<a href=""></a>
</p>
</div>
</div>
</div>
<div id="section_two">
<div id="iframe_container"></div>
</div>
<div id="section_three">
<div id="takeAtour">
<img
id="award_img"
src="./Images/pcmag-new-2021.svg"
alt="award_picture"
/>
<h2 id="award_text">Best Help Desk Software for 6 years in a row.</h2>
<p id="TakeATour_tagline">
All-in-one
<a href="" id="helpDesk_link"> help desk ticketing system </a>
that provides faster and better support for your customers.
</p>
<div id="take_a_tour_link_container">
<a href="./tour.html">Take a tour</a>
</div>
</div>
</div>
</div>
<div id="middle_section">
<div id="brand_logo_container">
<div id="text_container">
<p>Trusted by Industry-Leading Companies</p>
</div>
<div id="Brand_logo_container">
<img src="./Images/owler-logo.png" alt="owler_logo" />
<img src="./Images/whirlpool.svg" alt="whirlpool_logo" />
<img src="./Images/jabra.svg" alt="jabra_logo" />
<img src="./Images/leap-frog.svg" alt="leapFrog_logo" />
<img src="./Images/harbour.svg" alt="harbourAir_logo" />
</div>
</div>
</div>
<div id="customer_support_section">
<div id="customer_support">
<div id="sectionOne_customer_support">
<h3 id="support_heading_one">Provide Exceptional</h3>
<h4 id="support_heading_two">Customer Support. Everyday.</h4>
<div>
<p class="general_description">
Meet HappyFox, a practical help desk and customer support software
solution. Reduce chaos and bring order to your support process
with a robust support ticket system, self-service knowledge base
and community forums.
</p>
</div>
</div>
<div id="sectionTwo_customer_support">
<div id="sliding_link_container">
<div>
<button id="pageOne">Keep everything together</button>
</div>
<div>
<button id="pageTwo">Stay in Control</button>
</div>
<div>
<button id="pageThree">Get things done, fast</button>
</div>
</div>
<!-- slider box -->
<div id="slider_container">
<div class="slider_box" id="box1">
<div class="image_box">
<img
src="./Images/keep_everything.svg"
alt="keep_everything_together"
/>
</div>
<div class="text_box">
<h5>
“We consider HappyFox a one-stop shop for help desk software
to support our global customer network”
</h5>
<p>Martin Hartvigsen</p>
<p>Director, Global Technical Support at Jabra GN</p>
</div>
</div>
<div class="slider_box" id="box1">
<div class="image_box">
<img src="./Images/stay_control.svg" alt="stay_control" />
</div>
<div class="text_box">
<h5>
“We LOVE HappyFox. It has changed our work lives. Support
requests no longer fall through the cracks and get lost in an
email or some random spreadsheet.”
</h5>
<p>Bill Bates</p>
<p>Director of Technology - Pinewood Private School</p>
</div>
</div>
<div class="slider_box" id="box1">
<div class="image_box">
<img
src="./Images/things_fast.svg"
alt="Get things done, fast"
/>
</div>
<div class="text_box">
<h5>
“With 95% of the support tickets being responded to within 2
hours. Our customers are impressed!”
</h5>
<p>James Powell</p>
<p>Director & IT Business Consultant - FatCat IT</p>
</div>
</div>
</div>
</div>
<!-- buttons container -->
<div id="sectionThree_customer_support">
<div id="stories_button">
<button>View all customer stories</button>
<button onclick="goToDemo()">Get a Demo</button>
</div>
</div>
</div>
</div>
<div id="roi_section">
<div id="roi_container">
<h3>Align your goals.</h3>
<h4>Improve your ROI</h4>
<div id="features">
<div class="feature_list">
<div class="icon">
<img src="./Images/handle-icon.svg" alt="handle icon" />
</div>
<div class="text">
<h5>Handle all inbound requests in one ticketing system</h5>
<p>
Convert email, phone, chat and web requests into tickets and
keep them organized.
</p>
</div>
</div>
<div class="feature_list">
<div class="icon">
<img src="./Images/outsource-icon.svg" alt="handle icon" />
</div>
<div class="text">
<h5>Ease your day with a smart help desk software</h5>
<p>
Outsource complex and redundant workflows to a powerful smart
rules engine.
</p>
</div>
</div>
<div class="feature_list">
<div class="icon">
<img src="./Images/analyse-icon.svg" alt="handle icon" />
</div>
<div class="text">
<h5>Analyse help desk metrics & create solid actions</h5>
<p>
Analyse help desk metrics & create solid actions A ticketing
system that can crunch your support process data.
</p>
</div>
</div>
<div class="feature_list">
<div class="icon">
<img src="./Images//setting-icon.svg" alt="handle icon" />
</div>
<div class="text">
<h5>Tailor your support ticket system in all forms</h5>
<p>
Create your own custom fields, workflows & personalize the
support experience.
</p>
</div>
</div>
</div>
<div id="roi_btn">
<button onclick="goTotour()">View all features</button>
<button onclick="goToDemo()">Get a Demo</button>
</div>
</div>
</div>
<div id="software_list_container">
<div id="software_grid">
<h3>Help Desk Software for today's</h3>
<h4>fast-changing global businesses</h4>
<div id="software_grid_container">
<div id="for_border1" class="software_list">
<div class="icon">
<img src="./Images/support-icon.svg" alt="handle icon" />
</div>
<div class="text">
<h5>
For customer support
<img
src="./Images/external-link-icon.svg"
alt="external link logo"
/>
</h5>
<p>
A customer support tool that helps redefine your customer
service and ensure customer loyalty.
</p>
</div>
</div>
<div id="for_border2" class="software_list">
<div class="icon">
<img src="./Images/opration-icon.svg" alt="handle icon" />
</div>
<div class="text">
<h5>
For IT operations
<img
src="./Images/external-link-icon.svg"
alt="external link logo"
/>
</h5>
<p>
Customer support tool that helps IT and ITES companies deliver
outstanding support.
</p>
</div>
</div>
<div id="for_border3" class="software_list">
<div class="icon">
<img src="./Images/discuss-icon.svg" alt="handle icon" />
</div>
<div class="text">
<h5>
For HR & Marketing
<img
src="./Images/external-link-icon.svg"
alt="external link logo"
/>
</h5>
<p>
Track and manage issues from your customers and provide speedy
resolutions.
</p>
</div>
</div>
<div id="for_border4" class="software_list">
<div class="icon">
<img src="./Images/team-icon.svg" alt="handle icon" />
</div>
<div class="text">
<h5>
For all teams
<img
src="./Images/external-link-icon.svg"
alt="external link logo"
/>
</h5>
<p>
All-in-one help desk ticketing system that provides faster and
better support for your customers.
</p>
</div>
</div>
</div>
<div id="demo_btn">
<button onclick="goToDemo()">Get a Demo</button>
</div>
</div>
</div>
<div id="favourite_apps_container">
<div id="favourite_apps_grid">
<h3>A happy roof that can accommodate</h3>
<h4>all your favorite business apps.</h4>
<div id="favourite_apps_grid_container">
<div class="apps_list">
<img src="./Images/google-icon.svg" alt="google-logo" />
</div>
<div class="apps_list">
<img src="./Images/salesforce-icon.svg" alt="salesforce-icon" />
</div>
<div class="apps_list">
<img src="./Images/app3-icon.svg" alt="jira logo" />
</div>
<div class="apps_list">
<img src="./Images/ring-icon.svg" alt="ring-icon" />
</div>
<div class="apps_list">
<img src="./Images/fb-icon.svg" alt="fb-icon" />
</div>
<div class="apps_list">
<img src="./Images/twitter-icon.svg" alt="twitter-icon" />
</div>
<div class="apps_list">
<img src="./Images/magento-icon.svg" alt="magento-icon" />
</div>
<div class="apps_list">
<img src="./Images/ms-dynamics-icon.svg" alt="ms-dynamics-icon" />
</div>
<div class="apps_list">
<img src="./Images/github-icon.svg" alt="github-icon" />
</div>
<div class="apps_list">
<img src="./Images/shopify-icon.svg" alt="shopify-icon" />
</div>
</div>
<div id="sectionThree_customer_support">
<div id="stories_button">
<button onclick="goToIntegration()">View all integrations</button>
<button onclick="goToDemo()">Get a Demo</button>
</div>
</div>
</div>
</div>
<div id="company_review_section">
<div id="comapny_review_container">
<div id="company_review_heading">
<h3>Thousands of great companies call</h3>
<h4>HappyFox a great friend</h4>
</div>
<div id="company_review_list">
<div id="review_container">
<div class="review">
<p>
“With HappyFox we have a specialized partner, whose vast
customer portfolio across multiple industries, sees and knows
the next “big thing” in customer support, and integrates this
into a compact and cost-effective solution, saving considerable
effort, time and cost for us. In short, it allows us to focus on
happy customers – the rest we leave to HappyFox.”
</p>
<div class="name_logo_container">
<div class="name">
<p>Martin Hartvigsen</p>
<p>Director, Global Technical Support</p>
</div>
<div class="logo">
<img src="./Images/jabra.svg" alt="jabra logo" />
</div>
</div>
</div>
<div class="review">
<p>
“With HappyFox, I finally feel that I can trust the data I’m
able to export from the system. We implemented the solution for
email tracking but are now leveraging it to track incoming
invoices as well. If a business is facing similar problems to
ours in terms of tracking incoming emails or a high number of
incoming emails from the same customers or suppliers, in my
opinion HappyFox really is the best solution to resolve this.
With HappyFox, you really are able to track everything that is
coming in, and analyze the data in real-time.”
</p>
<div class="name_logo_container">
<div class="name">
<p>Pankaj Kumar</p>
<p>
Manager, Accounts Payable Whirlpool Global Finance Center
</p>
</div>
<div class="logo">
<img src="./Images/whirlpool.svg" alt="whirlpool logo" />
</div>
</div>
</div>
<div class="review">
<p>
“So far we have Facilities and Security using this system. There
is nothing I do not use in HappyFox and our team likes the app,
the reports, the smart rules, and the tags. We enter tickets and
complete them daily and HappyFox has improved our average number
of tickets completed per month. My customers (Health Center
Staff) have all responded very positively to the change; they
love that they can see all the tickets for their site and
comment on whether they’re still needed.”
</p>
<div class="name_logo_container">
<div class="name">
<p>Karin Stopforth</p>
<p>Facilities Administrator</p>
</div>
<div class="logo">
<img src="./Images/planned-parenthood.png" alt="jabra logo" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="foot_of_page"></footer>
</body>
</html>
<script type="module">
import video from "./components/iframe.js";
import { termsFunction } from "./components/iframe.js";
let iframeBox = document.getElementById("iframe_container");
let terms_text = document.getElementById("terms");
let email_input = document.getElementById("email_input");
let img = document.createElement("img");
img.setAttribute("id", "youtube_image");
img.src = "./Images/version_2_cover_new.jpg";
iframeBox.append(img);
let play_video = () => {
document.getElementById("iframe_container").innerHTML = video();
};
let onloadFunction = () => {
terms_text.innerHTML = termsFunction();
};
img.addEventListener("click", play_video);
email_input.addEventListener("keydown", onloadFunction);
</script>
<script>
let btn1 = document.getElementById("pageOne");
let btn2 = document.getElementById("pageTwo");
let btn3 = document.getElementById("pageThree");
// customer support slider automatic
let val = 0;
showDivs();
function showDivs() {
let total_slides = document.getElementsByClassName("slider_box");
for (let i = 0; i < total_slides.length; i++) {
total_slides[i].style.display = "none";
}
val++;
if (val > total_slides.length) {
val = 1;
}
total_slides[val - 1].style.display = "block";
setTimeout(showDivs, 4000);
}
// review slider
let val2 = 0;
reviewShow();
function reviewShow() {
let total_slides = document.getElementsByClassName("review");
for (let i = 0; i < total_slides.length; i++) {
total_slides[i].style.display = "none";
}
val2++;
if (val2 > total_slides.length) {
val2 = 1;
}
total_slides[val2 - 1].style.display = "block";
setTimeout(reviewShow, 4000);
}
// link to integration page
let goToIntegration = () => {
window.location.href = "./Helpdesk integration/helpdesk-integration.html";
};
// link to demo page
let goToDemo=()=>{
window.location.href="./Demo/demo.html";
}
// link to tour page
let goTotour=()=>{
window.location.href="./tour.html"
}
</script>
<script type="module">
import footerSection from "./components/footer.js";
// document.querySelector("footer").innerHTML = footerSection();
document.getElementById("foot_of_page").innerHTML= footerSection();
</script>
<script src="./name.js"></script>