Add sms email form readme

Koji23 · Koji23 · commit 3c2b03b4a6ae · 2022-07-06T13:10:53.000-07:00
diff --git a/sms_email_form/README.md b/sms_email_form/README.md
@@ -0,0 +1,14 @@
+# SMS + Email Form Template
+
+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.
+
+###### SMS Email form on Android
+![Screenshot](assets/sms_email_form.png)
+
+## Safe Area (notch) Detection
+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:
+
+https://github.com/OneSignalDevelopers/iam-html-templates/blob/00e30f0240e22f2e72ae807ac9274c3d0ab97bc8/sms_email_form/index.html#L21-L31
+
+## E.164-formatted Phone Numbers
+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.
diff --git a/sms_email_form/assets/sms_email_form.png b/sms_email_form/assets/sms_email_form.png
diff --git a/sms_email_form/index.html b/sms_email_form/index.html
@@ -17,15 +17,6 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
       rel="stylesheet"
     />
-    <!--
-    intl-tel-input
-    for more information see https://www.twilio.com/blog/international-phone-number-input-html-javascript
-    -->
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"
-    />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
     <style>
       body {
         margin: 0;
@@ -148,6 +139,18 @@
         left: calc(50% - 131px / 2);
       }
     </style>
+    <!--
+      intl-tel-input
+      for more information see https://www.twilio.com/blog/international-phone-number-input-html-javascript
+    -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"
+    />
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"
+      async
+    ></script>
   </head>
   <body>
     <div class="center-modal">
@@ -208,6 +211,8 @@ <h1>Don't miss out</h1>
       </form>
     </div>
     <script>
+      var ONESIGNAL_PLAYER_API_URL = "https://onesignal.com/api/v1/players";
+      var ONESIGNAL_APP_ID = "00000000-0000-0000-0000-000000000000"; // Replace you own app-id here
       // See documetation on creating a new player:
       // https://documentation.onesignal.com/reference/add-a-device
       function createEmailPlayer(emailAddress) {
@@ -218,31 +223,30 @@ <h1>Don't miss out</h1>
             "Content-Type": "application/json",
           },
           body: JSON.stringify({
-            app_id: "00000000-0000-0000-0000-000000000000", // Replace you own app-id here
+            app_id: ONESIGNAL_APP_ID,
             device_type: 11,
             identifier: emailAddress,
           }),
         };
-        fetch("https://onesignal.com/api/v1/players", emailOptions)
+        fetch(ONESIGNAL_PLAYER_API_URL, emailOptions)
           .then((response) => response.json())
           .then((response) => console.log(response))
           .catch((err) => console.error(err));
       }
       function createSmsPlayer(phoneNumber) {
-        debugger;
         var smsOptions = {
           method: "POST",
           headers: {
             Accept: "application/json",
             "Content-Type": "application/json",
           },
           body: JSON.stringify({
-            app_id: "00000000-0000-0000-0000-000000000000", // Replace you own app-id here
+            app_id: ONESIGNAL_APP_ID,
             device_type: 14,
             identifier: phoneNumber,
           }),
         };
-        fetch("https://onesignal.com/api/v1/players", smsOptions)
+        fetch(ONESIGNAL_PLAYER_API_URL, smsOptions)
           .then((response) => response.json())
           .then((response) => console.log(response))
           .catch((err) => console.error(err));
@@ -279,7 +283,7 @@ <h1>Don't miss out</h1>
             return false;
           });
 
-          // Your code here
+        // Your code here
       });
     </script>
   </body>
