-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
223 lines (207 loc) · 12.5 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
---
layout: landing
title: Customer Engagement for SaaS - Engage
description: Engage, support and manage customers via email, SMS, push notifications, live chat and more.
og_img: https://engage.so/images/dash.png
---
<header class="center pa3 mt3">
<div class="tc">
<h1 class="">All-in-one Customer Engagement and Automation Tool for SaaS</h1>
<h2 class="f4 lh-copy normal">Send personalized messages, create automated message workflows, and support customers via email, SMS, push notifications, website banners, live chat, and more.</h2>
<div class="tc mv4">
<a href="https://app.engage.so/auth/signup" class="button big">Get Started for free →</a>
</div>
</div>
</header>
<div class="pa4-l pa3 hero">
<a href="#" class="db relative play-demo hover-shrink">
<img src="/images/walkthrough.png" class="db center w-80-l w-100 round-shadow" alt="View a walkthrough">
<img src="/images/icons/play.svg" class="absolute shrink-el" style="left:calc(50% - 75px);top:40%">
</a>
</div>
<div class="modal-wrp dn">
<div class="modal"></div>
<div class="modal-body flex items-center w-100" role="alertdialog">
<div class="center w-80 w-800">
<div class="embed-container">
<iframe src="https://www.youtube-nocookie.com/embed/Cd_c6hmW5LI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="fixed top-1 right-1" title="Close demo video" style="z-index:3;"><a href="" class="close-modal"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></a></div>
</div>
<section class="ph6-l pa4 tc">
<div class="flex flex-wrap justify-center items-center">
<div class="ph3 pv2">
<img src="images/brands/indie-campers.svg" loading="lazy" height="24" alt="Indiecampers Logo"/>
</div>
<div class="ph3 pv2">
<img src="/images/brands/beyond-social-media.svg" loading="lazy" height="24" alt="Beyond Social Media logo" />
</div>
<div class="ph3 pv2">
<img src="/images/brands/boon.svg" loading="lazy" height="24" alt="Boon logo" class="boon" />
</div>
<div class="ph3 pv2">
<img src="/images/brands/vcplatform.png" loading="lazy" height="24" alt="VC Platform logo" />
</div>
<div class="ph3 pv2">
<img src="/images/brands/ticketgateway.png" loading="lazy" height="24" alt="Ticketgateway logo" />
</div>
<div class="ph3 pv2">
<img src="/images/brands/accrue.svg" loading="lazy" height="24" alt="Accrue logo" />
</div>
<div class="ph3 pv2">
<img src="/images/brands/reliance-hmo-large.svg" loading="lazy" height="24" alt="RelianceHMO logo" />
</div>
</div>
</section>
<section class="ph6-l ph4 pv5 border-top">
<div class="wrp">
<div class="w-50-l center tc">
<h2 class="clashgrotesk fw5 f2 ma0">Automate your engagement for Onboarding, Conversion and Retention.</h2>
</div>
<div class="grid grid-three-l mt4">
<div class="mt2 pa3">
<div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="mr1" width="24" height="24" fill="#2080F7" viewBox="0 0 256 256"><path d="M237.66,18.34a8,8,0,0,0-11.32,0l-52.4,52.41-5.37-5.38a32.05,32.05,0,0,0-45.26,0L100,88.69l-6.34-6.35A8,8,0,0,0,82.34,93.66L88.69,100,65.37,123.31a32,32,0,0,0,0,45.26l5.38,5.37-52.41,52.4a8,8,0,0,0,11.32,11.32l52.4-52.41,5.37,5.38a32,32,0,0,0,45.26,0L156,167.31l6.34,6.35a8,8,0,0,0,11.32-11.32L167.31,156l23.32-23.31a32,32,0,0,0,0-45.26l-5.38-5.37,52.41-52.4A8,8,0,0,0,237.66,18.34Zm-116.29,161a16,16,0,0,1-22.62,0L76.69,157.25a16,16,0,0,1,0-22.62L100,111.31,144.69,156Zm57.94-57.94L156,144.69,111.31,100l23.32-23.31a16,16,0,0,1,22.62,0l22.06,22A16,16,0,0,1,179.31,121.37ZM88.57,35A8,8,0,0,1,103.43,29l8,20A8,8,0,0,1,96.57,55ZM24.57,93A8,8,0,0,1,35,88.57l20,8A8,8,0,0,1,49,111.43l-20-8A8,8,0,0,1,24.57,93ZM231.43,163a8,8,0,0,1-10.4,4.46l-20-8A8,8,0,1,1,207,144.57l20,8A8,8,0,0,1,231.43,163Zm-64,58.06A8,8,0,0,1,152.57,227l-8-20A8,8,0,0,1,159.43,201Z"></path></svg> <h3 class="ma0 measure-narrow">Connect</h3></div>
<div class="pt2 lh-copy">Connect user data with services like PostHog, Twilio Segment, Make, RudderStack, Stripe, and more. Use our APIs and SDKs to track attributes and events wherever your customers are.</div>
</div>
<div class="mt2 pa3">
<div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#F04438" class="mr1" fill="#000000" viewBox="0 0 256 256"><path d="M136,112H48a8,8,0,0,0-8,8v88a8,8,0,0,0,8,8h88a8,8,0,0,0,8-8V120A8,8,0,0,0,136,112Zm-8,88H56V128h72Zm88-16v16a16,16,0,0,1-16,16H176a8,8,0,0,1,0-16h24V184a8,8,0,0,1,16,0Zm0-72v32a8,8,0,0,1-16,0V112a8,8,0,0,1,16,0Zm0-56V72a8,8,0,0,1-16,0V56H184a8,8,0,0,1,0-16h16A16,16,0,0,1,216,56Zm-64-8a8,8,0,0,1-8,8H112a8,8,0,0,1,0-16h32A8,8,0,0,1,152,48ZM40,80V56A16,16,0,0,1,56,40H72a8,8,0,0,1,0,16H56V80a8,8,0,0,1-16,0Z"></path></svg> <h3 class=" ma0 measure-narrow">Nurture</h3></div>
<div class="pt2 lh-copy">Get a detailed overview of user attributes and see their journey through your application. Create dynamic segments based on their attributes, events they perform or did not perform, campaigns, and more.</div>
</div>
<div class="mt2 pa3">
<div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="mr1" width="24" height="24" fill="#6F34E7" viewBox="0 0 256 256"><path d="M227.32,28.68a16,16,0,0,0-15.66-4.08l-.15,0L19.57,82.84a16,16,0,0,0-2.49,29.8L102,154l41.3,84.87A15.86,15.86,0,0,0,157.74,248q.69,0,1.38-.06a15.88,15.88,0,0,0,14-11.51l58.2-191.94c0-.05,0-.1,0-.15A16,16,0,0,0,227.32,28.68ZM157.83,231.85l-.05.14,0-.07-40.06-82.3,48-48a8,8,0,0,0-11.31-11.31l-48,48L24.08,98.25l-.07,0,.14,0L216,40Z"></path></svg> <h3 class=" ma0 measure-narrow">Engage</h3></div>
<div class="pt2 lh-copy">Put your engagement on autopilot. Trigger dynamic workflows to send targeted customer engagement for onboarding, activation, and retention.</div>
</div>
</div>
</div>
</section>
<section class="ph6-l ph4 pb5">
<div class="wrp">
<div class="flex flex-wrap items-center">
<div class="w-30-l w-100 pr4-l">
<div class="mt4">
<div class="label label-blue">Segmentation</div>
<h2 class="clashgrotesk fw5 f2 ma0">Best-in-class Customer Segmentation.</h2>
</div>
<div class="mv4 lh-copy">Automatically group your customers based on their attributes, events and actions using an intuitive segment.</div>
<div class="mv4 lh-copy">Send targeted campaigns to your Segments or use them to trigger dynamic workflows and campaigns across email, SMS and push notifications.</div>
</div>
<div class="w-70-l w-100 mt0-l mt4">
<div class="" style="right:0">
<video class="w-100 round-shadow" autoplay loop muted>
<source src="/images/videos/connect-b.mp4" type="video/mp4" />
</video>
</div>
</div>
</div>
</div>
</section>
<section class="ph6-l ph4 pv5" style="background:#231e32 url(/images/pattern.svg) bottom no-repeat;">
<div class="pv4 ph6-l center w-80 white">
<div class="normal f2 clashgrotesk white">"Another reason we decided to use Engage was the possibility of having an all-in-one customer engagement system where we could send email, SMS, and push notifications to customers without using multiple marketing tools."</div>
<div class="pt3 mb5">— Tolu Olawumi, Head of Marketing, Squareme</div>
</div>
</section>
<section class="ph6-l ph4 pv5 mb5 border-top">
<div class="wrp">
<div class="w-50-l center pv4 tc">
<h2 class="clashgrotesk fw5 f2 ma0">All you need to send the right message at the right time</h2>
</div>
<div class="grid grid-three-l mt4">
<a href="/features/forms-and-pages" class="abox db pa3">
<h3 class="fw5 ma0 measure-narrow">Create Lists, Forms, and Pages</h3>
<div class="pt3 lh-copy">Create Lists to manually group customers. Use Forms and Lead Magnet Landing Pages to easily add subscribers to your Lists.</div>
</a>
<a href="/features/customer-segmentation" class="abox db pa3">
<h3 class="fw5 ma0 measure-narrow">Segment Customers on-the-fly</h3>
<div class="pt3 lh-copy">Create your Segments once and Engage automatically adds and removes customers as necessary.</div>
</a>
<a href="/features/automation" class="abox db pa3">
<h3 class="fw5 ma0 measure-narrow">Create complex engagement workflows</h3>
<div class="pt3 lh-copy">Drip campaigns? We got you. But you can also create complex workflows based on if/else conditions and user data.</div>
</a>
<a href="/features/broadcasts" class="abox db pa3">
<h3 class="fw5 ma0 measure-narrow">Send multi-channel marketing campaigns</h3>
<div class="pt3 lh-copy">Send marketing campaigns through email, SMS, push notifications and in-app messaging.</div>
</a>
<a href="/features/cdp" class="abox db pa3">
<h3 class="fw5 ma0 measure-narrow">Personalize your engagement with customer data</h3>
<div class="pt3 lh-copy">Use customer attributes and event data to personalize content of messages your customers get.</div>
</a>
<a href="/features/automation" class="abox db pa3">
<h3 class="fw5 ma0 measure-narrow">Realtime analytics</h3>
<div class="pt3 lh-copy">See how your customers engage with your campaigns. Track delivery, opens, clicks, failures, and complaints in realtime.</div>
</a>
<a href="/features/live-chat" class="abox db mt2 pa3">
<h3 class="fw5 ma0 measure-narrow">Embed Live Chat on your website</h3>
<div class="pt2 lh-copy">Proactively engage your site visitors in real-time.</div>
</a>
<a href="/features/inbox" class="abox db mt2 pa3">
<h3 class="fw5 ma0 measure-narrow">Create Shared Inboxes</h3>
<div class="pt2 lh-copy">Oversee your team-customer communication from a central inbox.</div>
</a>
<a href="/features/help-center" class="abox db mt2 pa3">
<h3 class="fw5 ma0 measure-narrow">Create your Help Center</h3>
<div class="pt2 lh-copy">Build a resource center that answers customer questions even when you're offline.</div>
</a>
</div>
</div>
</section>
<!-- <section class="ph6-l pa4 pv5 bg-white border-top">
<div class="wrp">
<div class="flex items-center flex-wrap">
<div class="w-50-l w-100 pr6-l">
<h2 class="clashgrotesk fw5 f2 ma0 measure-narrow">Bring in data from your current tool stack</h2>
<div class="pt3 lh-copy">Engage connects with services like PostHog, Twilio Segment, Make, RudderStack, Stripe, Thinkific, and more to let you connect customer data with no-code. We also provide APIs and SDKs to track attributes and events on mobile, web—wherever your customers are.</div>
<div class="mt3 pv2"><a href="/integrations" class="button">See some integrations →</a></div>
</div>
<div class="w-50-l w-100 mt0-l mt4">
<div class="">
<img src="/images/integration.svg" class="" loading="lazy" class="w-100" alt="Engage integrations" title="Sync data from your favourite services" />
</div>
</div>
</div>
</div>
</section> -->
<section class="ph6-l ph4 ">
<div class="wrp">
<div class="box tc pattern-bg pa6-l pa4 cta">
<div class="clashgrotesk f2 text-black fw5 mb4">Ready to improve your customer engagement?</div>
<a href="https://app.engage.so/auth/signup" class="big button alt db">Get started for free →</a>
</div>
</div>
</section>
<script>
const src = 'https://www.youtube.com/embed/Cd_c6hmW5LI'
const modal = document.querySelector('.modal-wrp')
const modalContainer = document.querySelector('.modal')
const close = document.querySelector('.close-modal')
const play = document.querySelector('.play-demo')
const iframe = document.querySelector('iframe')
const keyHandler = (evt) => {
if (evt.key.toLowerCase() === 'escape') {
hideModal()
}
}
const hideModal = () => {
modal.classList.add('dn')
document.removeEventListener('keydown', keyHandler)
iframe.setAttribute('src', src)
}
const showModal = () => {
modal.classList.remove('dn')
document.addEventListener('keydown', keyHandler)
}
play.addEventListener('click', (e) => {
e.preventDefault()
showModal()
})
modal.addEventListener('click', (e) => {
hideModal()
})
close.addEventListener('click', (e) => {
e.preventDefault()
hideModal()
})
</script>