added a couple simple examples so this repo isn't empty

Feniksss · Oct 9, 2015 · 01f258c · 01f258c
1 parent 5081529
commit 01f258c
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 0 deletions.
diff --git a/basic.html b/basic.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
+  <title>CloudSponge Basic Installation</title>
+  <!-- you can delete everything above this comment, it's just here to make the helper pretty. -->
+
+  <script type="text/javascript">
+    // this is the main CloudSponge JavaScript snippet, don't edit it.
+    (function(u){
+      var d=document,s='script',a=d.createElement(s),m=d.getElementsByTagName(s)[0];
+      a.async=1;a.src=u;m.parentNode.insertBefore(a,m);
+    })('//api.cloudsponge.com/widget/CLOUDSPONGE_EXAMPLE_KEY.js');
+  </script>
+
+  <script type="text/javascript">
+    // this is where you can configure the behavior and style of the widget
+    // http://www.cloudsponge.com/developer/#the-contact-importer-widget
+    window.csPageOptions = {
+      textarea_id: 'contact_list',
+      mobile_render: true,
+      inlineOauth: 'mobile',
+      selectAccount: true,
+      include: ["email"],
+      sources: ['gmail','yahoo','windowslive','icloud','aol','linkedin']
+    };
+  </script>
+</head>
+<body>
+  <div class="container">
+    <h1>Basic Integration</h1>
+    <p>The simplest way to integrate the CloudSponge widget is to add an anchor tag with the <code>cs_import</code> class somewhere on your page.</p>
+
+    <!-- Any link with a class="cs_import" will start the import process -->
+    <a class="cs_import">Add from Address Book</a><br />
+
+    <!-- This textarea will be populated with the contacts returned by CloudSponge -->
+    <textarea placeholder="Type email addresses separated by commas or select them from your address book by clicking the link above." id="contact_list" style="width:450px;height:82px"></textarea>
+  </div>
+</body>
+</html>
diff --git a/deep-links.html b/deep-links.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
+  <title>CloudSponge Deep Link Installation</title>
+  <!-- you can delete everything above this comment, it's just here to make the helper pretty. -->
+
+  <script type="text/javascript">
+    // this is the main CloudSponge JavaScript snippet, don't edit it.
+    (function(u){
+      var d=document,s='script',a=d.createElement(s),m=d.getElementsByTagName(s)[0];
+      a.async=1;a.src=u;m.parentNode.insertBefore(a,m);
+    })('//api.cloudsponge.com/widget/CLOUDSPONGE_EXAMPLE_KEY.js');
+  </script>
+
+  <script type="text/javascript">
+    // this is where you can configure the behavior and style of the widget
+    // http://www.cloudsponge.com/developer/#the-contact-importer-widget
+    window.csPageOptions = {
+      textarea_id: 'contact_list',
+      mobile_render: true,
+      inlineOauth: 'mobile',
+      selectAccount: true,
+      include: ["email"],
+      sources: ['gmail','yahoo','windowslive','icloud','aol','linkedin'],
+      // set skipSourceMenu to true when using deep links for a more consistent UX
+      skipSourceMenu:true, // suppresses the source menu unless linked to directly
+      // delay making the links that launch a popup clickable
+      // until after the widget has initialized completly. a popup window must
+      // be opened in an onclick handler, so we don't support queueing these actions
+      afterInit:function() {
+        var i, links = document.getElementsByClassName('delayed');
+        for (i = 0; i < links.length; i++) {
+          // make the links that launch a popup clickable by setting the href property
+          links[i].href = "#";
+        }
+        // if this is not a mobile browser, we can show and enable the desktop-only links
+        if (!cloudsponge.mobile) {
+          links = document.getElementsByClassName('desktop-only');
+          for (i = 0; i < links.length; i++) {
+            // show it
+            links[i].style.display = "";
+            // make it clickable
+            links[i].href = "#";
+          }
+        }
+      }
+    };
+  </script>
+</head>
+<body>
+  <div class="container">
+    <h1>Deep Link Integration</h1>
+    <p>You can skip the main menu and let your users go straight to the contact source that they want by adding these deep links to your page.</p>
+    <p>Most people replace these text links with graphics. You can <a href="http://www.cloudsponge.com/img/developer/icon-set.zip">download some icons here</a> if you don't have your own set.</p>
+
+    <!-- Any link with a class="cs_import" will start the import process -->
+    <a class="deep-link delayed" onclick="return cloudsponge.launch('gmail');">Gmail</a><br />
+    <a class="deep-link delayed" onclick="return cloudsponge.launch('yahoo');">Yahoo</a><br />
+    <a class="deep-link delayed" onclick="return cloudsponge.launch('windowslive');">Outlook.com</a><br />
+    <a class="deep-link delayed" onclick="return cloudsponge.launch('icloud');">iCloud</a><br />
+    <a class="deep-link delayed" onclick="return cloudsponge.launch('aol');">AOL</a><br />
+    <a class="deep-link desktop-only" style="display: none;" onclick="return cloudsponge.launch('linkedin');">LinkedIn</a><br />
+    <a class="deep-link desktop-only" style="display: none;" onclick="return cloudsponge.launch('addressbook');">OS X Contacts</a><br />
+    <a class="deep-link desktop-only" style="display: none;" onclick="return cloudsponge.launch('outlook');">Outlook</a><br />
+    <br />
+
+    <!-- This textarea will be populated with the contacts returned by CloudSponge -->
+    <textarea placeholder="Type email addresses separated by commas or select them from your address book by clicking the link above." id="contact_list" style="width:450px;height:82px"></textarea>
+  </div>
+</body>
+</html>