Skip to content

Commit bcce78f

Browse files
Koji23Koji23
authored
Merge pull request #1 from OneSignalDevelopers/sms-email-form
Create sms email form html template
2 parents 448db92 + dfe8938 commit bcce78f

File tree

4 files changed

+313
-1
lines changed

4 files changed

+313
-1
lines changed

‎README.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,10 @@
11
# iam html templates
2-
HTML templates for in-app messaging
2+
HTML templates for in-app messaging
3+
4+
## In-app Messaging Templates
5+
* [Leads (SMS + Email)](./sms_email_form/README.md)
6+
* [Survey (Ranking 1-5)](#/README.md)
7+
* [Carousel](#/README.md)
8+
* [Responsive](#/README.md)
9+
* [Promo Wheel](#/README.md)
10+

‎sms_email_form/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# SMS + Email Form Template
2+
3+
This HTML template will let you request email addresses and phone numbers from users and create new SMS and Email players out of them. You will need to add your Onesignal App ID into this template at the appropriate place.
4+
5+
###### SMS Email form on Android
6+
![Screenshot](assets/sms_email_form.png)
7+
8+
## Safe Area (notch) Detection
9+
Certain mobile devices may have safe areas where operating system icons or a camera notch might exist. Our Onesignal SDK detects these areas and exposes them to the iam's HTML document via `safe-area-inset-*` CSS variables :point_down:
10+
11+
https://github.com/OneSignalDevelopers/iam-html-templates/blob/00e30f0240e22f2e72ae807ac9274c3d0ab97bc8/sms_email_form/index.html#L21-L31
12+
13+
## E.164-formatted Phone Numbers
14+
Our REST API requires [E.164-formatted phone numbers](https://support.twilio.com/hc/en-us/articles/223183008-Formatting-International-Phone-Numbers). To make this easier we are using the [intl-tel-input](https://github.com/jackocnr/intl-tel-input) library.

‎sms_email_form/assets/sms_email_form.png‎

161 KB
Loading

‎sms_email_form/index.html‎

Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Onesignal In-App Message</title>
8+
<!-- Google Fonts -->
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&family=Raleway:wght@400;700&display=swap"
13+
rel="stylesheet"
14+
/>
15+
<!-- CSS Reset -->
16+
<link
17+
href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
18+
rel="stylesheet"
19+
/>
20+
<style>
21+
body {
22+
margin: 0;
23+
padding-top: var(--safe-area-inset-top);
24+
padding-right: var(--safe-area-inset-right);
25+
padding-bottom: calc(var(--safe-area-inset-bottom) + 20px);
26+
padding-left: var(--safe-area-inset-left);
27+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
28+
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
29+
display: flex;
30+
align-items: center;
31+
}
32+
33+
.center-modal {
34+
position: relative;
35+
background: #fff;
36+
margin: 18px;
37+
padding: 24px;
38+
padding-top: calc((131px / 2) + 24px);
39+
border-radius: 8px;
40+
height: min-content;
41+
width: 100%;
42+
box-shadow: rgb(0 0 0 / 30%) 0px 0px 12.5px,
43+
rgb(0 0 0 / 15%) 0px 0px 2.5px;
44+
}
45+
46+
.center-modal .close-button {
47+
position: absolute;
48+
top: 0;
49+
right: 0;
50+
background: rgba(0, 0, 0, 0);
51+
border: none;
52+
z-index: 1;
53+
display: flex;
54+
justify-content: center;
55+
flex-direction: column;
56+
align-items: center;
57+
/* Tip: Make your close-button relatively large so it's easy to click */
58+
min-width: 48px;
59+
min-height: 48px;
60+
}
61+
62+
h1 {
63+
font-family: "Raleway", sans-serif;
64+
font-weight: 700;
65+
font-size: 24px;
66+
line-height: 28px;
67+
color: #051b2c;
68+
margin-bottom: 8px;
69+
}
70+
71+
div,
72+
label {
73+
font-size: 16px;
74+
line-height: 19px;
75+
color: #424d57;
76+
box-sizing: border-box;
77+
}
78+
79+
form {
80+
margin-top: 24px;
81+
box-sizing: border-box;
82+
}
83+
84+
fieldset {
85+
margin: 12px 0;
86+
box-sizing: border-box;
87+
}
88+
89+
input {
90+
box-sizing: border-box;
91+
}
92+
93+
input[type="email"],
94+
input[type="tel"] {
95+
border: 1px solid #cbd1d7;
96+
border-radius: 4px;
97+
height: 36px;
98+
width: 100%;
99+
padding: 8px 12px;
100+
margin-top: 4px;
101+
}
102+
103+
/* .iti class name is added to the phone number input by intl-tel-input */
104+
.iti {
105+
width: 100%;
106+
}
107+
108+
input[type="submit"] {
109+
padding: 8px 12px;
110+
border-radius: 4px;
111+
width: 100%;
112+
border: none;
113+
background: #d0478a;
114+
color: #fff;
115+
height: 48px;
116+
font-size: 16px;
117+
line-height: 19px;
118+
}
119+
120+
@media screen and (min-width: 480px) {
121+
.center-modal {
122+
height: 80%;
123+
}
124+
}
125+
126+
.ticket-icon-circle {
127+
height: 131px;
128+
width: 131px;
129+
left: 3697px;
130+
top: 692px;
131+
border-radius: 100px;
132+
background: linear-gradient(180deg, #ffa940 0%, #ce438c 100%);
133+
display: flex;
134+
justify-content: center;
135+
align-items: center;
136+
position: absolute;
137+
z-index: 999;
138+
top: calc((-131px) / 2);
139+
left: calc(50% - 131px / 2);
140+
}
141+
</style>
142+
<!--
143+
intl-tel-input
144+
for more information see https://www.twilio.com/blog/international-phone-number-input-html-javascript
145+
-->
146+
<link
147+
rel="stylesheet"
148+
href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"
149+
/>
150+
<script
151+
src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"
152+
async
153+
></script>
154+
</head>
155+
<body>
156+
<div class="center-modal">
157+
<div class="close-button" data-onesignal-unique-label="close-button">
158+
<svg
159+
width="10"
160+
height="10"
161+
preserveAspectRatio="none"
162+
viewBox="0 0 8 8"
163+
fill="none"
164+
xmlns="http://www.w3.org/2000/svg"
165+
>
166+
<path
167+
d="M7.80309 1.14768C8.06564 0.885137 8.06564 0.459453 7.80309 0.196909C7.54055 -0.0656362 7.11486 -0.0656362 6.85232 0.196909L4 3.04923L1.14768 0.196909C0.885137 -0.0656362 0.459453 -0.0656362 0.196909 0.196909C-0.0656362 0.459453 -0.0656362 0.885137 0.196909 1.14768L3.04923 4L0.196909 6.85232C-0.0656362 7.11486 -0.0656362 7.54055 0.196909 7.80309C0.459453 8.06564 0.885137 8.06564 1.14768 7.80309L4 4.95077L6.85232 7.80309C7.11486 8.06564 7.54055 8.06564 7.80309 7.80309C8.06564 7.54055 8.06564 7.11486 7.80309 6.85232L4.95077 4L7.80309 1.14768Z"
168+
fill="#111111"
169+
/>
170+
</svg>
171+
</div>
172+
<div class="ticket-icon-circle">
173+
<svg
174+
width="75"
175+
height="49"
176+
viewBox="0 0 75 49"
177+
fill="none"
178+
xmlns="http://www.w3.org/2000/svg"
179+
>
180+
<path
181+
d="M71.5832 20.0266C72.2706 19.8863 72.8883 19.5128 73.332 18.9693C73.7756 18.4259 74.0178 17.7458 74.0177 17.0443V4.71956C74.0177 3.50892 73.5368 2.34787 72.6807 1.49182C71.8247 0.635769 70.6636 0.154846 69.453 0.154846H5.54701C4.33638 0.154846 3.17532 0.635769 2.31927 1.49182C1.46322 2.34787 0.9823 3.50892 0.9823 4.71956V17.0443C0.982157 17.7458 1.2244 18.4259 1.66804 18.9693C2.11167 19.5128 2.72945 19.8863 3.41681 20.0266C4.4487 20.2361 5.37642 20.7959 6.04278 21.6112C6.70914 22.4265 7.07316 23.447 7.07316 24.5C7.07316 25.5529 6.70914 26.5735 6.04278 27.3888C5.37642 28.204 4.4487 28.7639 3.41681 28.9734C2.72945 29.1137 2.11167 29.4872 1.66804 30.0306C1.2244 30.5741 0.982157 31.2541 0.9823 31.9557V44.2804C0.9823 45.491 1.46322 46.6521 2.31927 47.5081C3.17532 48.3642 4.33638 48.8451 5.54701 48.8451H69.453C70.6636 48.8451 71.8247 48.3642 72.6807 47.5081C73.5368 46.6521 74.0177 45.491 74.0177 44.2804V31.9557C74.0178 31.2541 73.7756 30.5741 73.332 30.0306C72.8883 29.4872 72.2706 29.1137 71.5832 28.9734C70.5513 28.7639 69.6236 28.204 68.9572 27.3888C68.2909 26.5735 67.9268 25.5529 67.9268 24.5C67.9268 23.447 68.2909 22.4265 68.9572 21.6112C69.6236 20.7959 70.5513 20.2361 71.5832 20.0266ZM16.9588 43.5196C16.5074 43.5196 16.0661 43.3858 15.6908 43.135C15.3155 42.8842 15.0229 42.5277 14.8502 42.1107C14.6774 41.6936 14.6322 41.2347 14.7203 40.792C14.8084 40.3493 15.0257 39.9426 15.3449 39.6234C15.6641 39.3042 16.0708 39.0868 16.5135 38.9988C16.9563 38.9107 17.4152 38.9559 17.8322 39.1286C18.2493 39.3014 18.6057 39.5939 18.8565 39.9692C19.1073 40.3446 19.2411 40.7858 19.2411 41.2373C19.2411 41.8426 19.0007 42.4231 18.5727 42.8511C18.1446 43.2792 17.5641 43.5196 16.9588 43.5196ZM16.9588 32.3604C16.5074 32.3604 16.0661 32.2266 15.6908 31.9758C15.3155 31.725 15.0229 31.3685 14.8502 30.9515C14.6774 30.5344 14.6322 30.0755 14.7203 29.6328C14.8084 29.1901 15.0257 28.7834 15.3449 28.4642C15.6641 28.145 16.0708 27.9276 16.5135 27.8396C16.9563 27.7515 17.4152 27.7967 17.8322 27.9694C18.2493 28.1422 18.6057 28.4347 18.8565 28.81C19.1073 29.1854 19.2411 29.6266 19.2411 30.0781C19.2411 30.6834 19.0007 31.2639 18.5727 31.6919C18.1446 32.1199 17.5641 32.3604 16.9588 32.3604ZM16.9588 21.2043C16.5074 21.2043 16.0661 21.0704 15.6908 20.8196C15.3155 20.5688 15.0229 20.2124 14.8502 19.7953C14.6774 19.3783 14.6322 18.9194 14.7203 18.4766C14.8084 18.0339 15.0257 17.6272 15.3449 17.308C15.6641 16.9888 16.0708 16.7715 16.5135 16.6834C16.9563 16.5953 17.4152 16.6405 17.8322 16.8133C18.2493 16.986 18.6057 17.2786 18.8565 17.6539C19.1073 18.0292 19.2411 18.4705 19.2411 18.9219C19.2411 19.5272 19.0007 20.1077 18.5727 20.5358C18.1446 20.9638 17.5641 21.2043 16.9588 21.2043ZM16.9588 10.0451C16.5074 10.0451 16.0661 9.9112 15.6908 9.66041C15.3155 9.40962 15.0229 9.05317 14.8502 8.63612C14.6774 8.21907 14.6322 7.76017 14.7203 7.31743C14.8084 6.8747 15.0257 6.46802 15.3449 6.14883C15.6641 5.82964 16.0708 5.61226 16.5135 5.5242C16.9563 5.43613 17.4152 5.48133 17.8322 5.65408C18.2493 5.82682 18.6057 6.11936 18.8565 6.49469C19.1073 6.87002 19.2411 7.31129 19.2411 7.7627C19.2411 8.36802 19.0007 8.94854 18.5727 9.37657C18.1446 9.80459 17.5641 10.0451 16.9588 10.0451ZM52.7157 37.4333C51.6624 37.4333 50.6328 37.121 49.757 36.5358C48.8812 35.9506 48.1987 35.1189 47.7956 34.1458C47.3925 33.1727 47.2871 32.1019 47.4925 31.0689C47.698 30.0358 48.2052 29.0869 48.95 28.3421C49.6948 27.5973 50.6437 27.0901 51.6768 26.8847C52.7098 26.6792 53.7806 26.7846 54.7537 27.1877C55.7268 27.5908 56.5585 28.2734 57.1437 29.1491C57.7289 30.0249 58.0412 31.0545 58.0412 32.1078C58.0404 33.52 57.4791 34.8741 56.4805 35.8726C55.482 36.8712 54.1279 37.4325 52.7157 37.4333ZM57.2804 14.6098H29.8921C29.2868 14.6098 28.7063 14.3693 28.2783 13.9413C27.8503 13.5133 27.6098 12.9327 27.6098 12.3274C27.6098 11.7221 27.8503 11.1416 28.2783 10.7135C28.7063 10.2855 29.2868 10.0451 29.8921 10.0451H57.2804C57.8857 10.0451 58.4663 10.2855 58.8943 10.7135C59.3223 11.1416 59.5628 11.7221 59.5628 12.3274C59.5628 12.9327 59.3223 13.5133 58.8943 13.9413C58.4663 14.3693 57.8857 14.6098 57.2804 14.6098Z"
182+
fill="white"
183+
/>
184+
</svg>
185+
</div>
186+
<h1>Don't miss out</h1>
187+
<div>
188+
We’d like to send promo codes to your phone and upcoming events direct
189+
to your inbox.
190+
</div>
191+
<!-- Replace action url with any api endpoint that can receive the form data -->
192+
<form class="player-form">
193+
<fieldset>
194+
<label for="email-address">Email</label><br />
195+
<input type="email" name="email-address" />
196+
</fieldset>
197+
<fieldset>
198+
<label for="phone-number">Phone</label><br />
199+
<!-- id=phone is necessary for intl-tel-input plugin -->
200+
<input type="tel" name="phone-number" id="phone" />
201+
</fieldset>
202+
<fieldset>
203+
<input type="checkbox" name="text-opt-in" />
204+
<label for="text-opt-in">Opt-in text here</label><br />
205+
</fieldset>
206+
<input
207+
type="submit"
208+
value="Submit"
209+
data-onesignal-unique-label="submit-button"
210+
/>
211+
</form>
212+
</div>
213+
<script>
214+
var ONESIGNAL_PLAYER_API_URL = "https://onesignal.com/api/v1/players";
215+
var ONESIGNAL_APP_ID = "00000000-0000-0000-0000-000000000000"; // Replace you own app-id here
216+
// See documetation on creating a new player:
217+
// https://documentation.onesignal.com/reference/add-a-device
218+
function createEmailPlayer(emailAddress) {
219+
var emailOptions = {
220+
method: "POST",
221+
headers: {
222+
Accept: "application/json",
223+
"Content-Type": "application/json",
224+
},
225+
body: JSON.stringify({
226+
app_id: ONESIGNAL_APP_ID,
227+
device_type: 11,
228+
identifier: emailAddress,
229+
}),
230+
};
231+
fetch(ONESIGNAL_PLAYER_API_URL, emailOptions)
232+
.then((response) => response.json())
233+
.then((response) => console.log(response))
234+
.catch((err) => console.error(err));
235+
}
236+
function createSmsPlayer(phoneNumber) {
237+
var smsOptions = {
238+
method: "POST",
239+
headers: {
240+
Accept: "application/json",
241+
"Content-Type": "application/json",
242+
},
243+
body: JSON.stringify({
244+
app_id: ONESIGNAL_APP_ID,
245+
device_type: 14,
246+
identifier: phoneNumber,
247+
}),
248+
};
249+
fetch(ONESIGNAL_PLAYER_API_URL, smsOptions)
250+
.then((response) => response.json())
251+
.then((response) => console.log(response))
252+
.catch((err) => console.error(err));
253+
}
254+
255+
window.addEventListener("load", (event) => {
256+
document
257+
.querySelector(".close-button")
258+
.addEventListener("click", function (e) {
259+
OneSignalIamApi.close(e);
260+
});
261+
262+
const phoneInputField = document.querySelector("#phone");
263+
const phoneInput = window.intlTelInput(phoneInputField, {
264+
utilsScript:
265+
"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
266+
});
267+
268+
document
269+
.querySelector(".player-form")
270+
.addEventListener("submit", function (e) {
271+
e.preventDefault();
272+
var emailAddress = e.target["email-address"].value;
273+
var phoneNumber = phoneInput.getNumber();
274+
275+
if (emailAddress) {
276+
createEmailPlayer(emailAddress);
277+
}
278+
279+
if (phoneNumber) {
280+
createSmsPlayer(phoneNumber);
281+
}
282+
OneSignalIamApi.close(e);
283+
return false;
284+
});
285+
286+
// Your code here
287+
});
288+
</script>
289+
</body>
290+
</html>

0 commit comments

Comments
 (0)