This page demonstrates a sample configuration of the widget that imitates the UX that Yelp has built using the REST API. We’ll use deep links to launch the widget on the page, CSS overrides to hide the overlay and widget pages that we don’t want to display, and some more CSS overrides to style the “choose your contacts” page to display inline in the page.

Choose your email account from the following providers

Google Contacts


Yahoo


Outlook


AOL

Show Code

<style>
/* Widgt UI Elements that we want to keep hidden */
#cloudsponge-overlay, /* Hide the widget overlay because we're going to display the UI inline */
#cloudsponge-loading-tab,
.cloudsponge-close-button,
.cloudsponge-back-close,
.cloudsponge-back-button{
  visibility: hidden;
}
#cloudsponge-root-holder #cloudsponge-address-book .cloudsponge-copyright {
  position: inherit;
  margin-top: 30px;
}
/* By default, this element uses fixed positioning on the page. Since we're inline we override it */
#cloudsponge-root-holder #cloudsponge-address-book {
  position: initial;
  margin: initial;
}
/* This can be a px or em value, or we can just make it as big as the container element */
#cloudsponge-root-holder {
  height: 100%;
}
/* The list of contacts will render in this div, we need to make sure it has dimensions for the widget to fill */
#choose-contacts-ui {
  height: 600px;
  width: 700px;
}
</style>
<style>
/* I've separtated out these style, since they are styling the deep links on the page. */
/* These styles are based on Yelp's */
.provider-link{
  display: inline-block;
  margin: 0 10px 0 0;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  cursor: default;
}
.provider-link:hover{
  border-color: #aaa;
  background: #e6e6e6;
  text-decoration: none;
}
.provider-link img {
  display: block;
}
</style>

<!--
  There are 3 UI Elements corresponding to three states of import
    1. Before importing: present the email accounts for the user to start the import
    2. During an import: the #loading-ui is displayed for a bit of visual feedback
    3. After the import: the #choose-contacts-ui is displayed. It's our widget's UI displayed inline on the page.
 -->
<div id="choose-account-ui">
  <div class="section-header">
    <h3>Choose your email account from the following providers</h3>
  </div>

  <div class="field-group">
    <a class="provider-link cloudsponge-launch" data-cloudsponge-source="gmail">
        <img class="u-block mx-auto" src="https://www.cloudsponge.com/wp-content/uploads/2021/07/btn_google_light_normal_ios-150x150.png" width="87" height="87"/>
        Google Contacts
    </a>
    <a class="provider-link cloudsponge-launch" data-cloudsponge-source="yahoo">
        <img class="u-block" src="https://s3-media2.fl.yelpcdn.com/assets/2/www/img/354a13792a10/find_friends/yahoo.png">
        Yahoo
    </a>
    <a class="provider-link cloudsponge-launch" data-cloudsponge-source="windowslive">
        <img class="u-block" src="https://s3-media3.fl.yelpcdn.com/assets/2/www/img/8c7778e794ba/find_friends/outlook.png">
        Outlook
    </a>
    <a class="provider-link cloudsponge-launch" data-cloudsponge-source="aol">
        <img class="u-block" src="https://s3-media2.fl.yelpcdn.com/assets/2/www/img/034c18fccab1/find_friends/aol.png">
        AOL
    </a>
  </div>
</div>

<div id="loading-ui" style="display:none">
  <p>Loading...</p>
</div>

<!-- Any UI elements will display in this div, specified by the rootNodeSelector option -->
<div id="choose-contacts-ui" style="display:none">
  <div class="section-header">
    <h3>Invite your contacts to join Your Site</h3>
  </div>
</div>

<!-- Include the script anywhere on your page -->
<script src="https://api.cloudsponge.com/widget/localhost-only.js"></script>
<script>
// set any options here, for this example, we'll simply populate the contacts in the textarea above
cloudsponge.init({
  // this puts the widget UI inside a div on your page, make sure this element has a height and width
  rootNodeSelector: '#choose-contacts-ui',
  // // since we're using deep links, we are going to suppress the widget's display of sources
  skipSourceMenu: true,

  // callbacks let your page respond to important widget events
  afterLaunch: function(){
    // display a Loading... message
    document.getElementById('loading-ui').style.display = "block";
  },
  afterClosing:function(){
    // reset the page's UI state so that another import is possible
    document.getElementById('loading-ui').style.display = "none";
    document.getElementById('choose-account-ui').style.display = "block";
    document.getElementById('choose-contacts-ui').style.display = "none";
  },
  // called before the widget renders the UI with the address book
  beforeDisplayContacts: function(){
    document.getElementById('loading-ui').style.display = "none";
    // hide the Choose account UI and display the Choose contacts UI
    document.getElementById('choose-account-ui').style.display = "none";
    document.getElementById('choose-contacts-ui').style.display = "block";
  },
  // called after the user submits their contacts
  afterSubmitContacts: function(contacts, source, owner) {
    // The user has successfully shared their contacts
    // here's where you can send the user to the next step
  }
});
</script>