Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
CloudSponge+Wix.com

Integrate CloudSponge in Wix.com

The goal of this document is to provide a simple guide to help Wix.com users to embed the CloudSponge widget.

Wix platform do not support direct JavaScript on pages, only in an iframe. So we've created a sample Wix page to display how embed the CloudSponge widget.

In the follow steps, we'll reproduce the instructions in a new Wix page to embed the CloudSponge widget.

1. Add an iframe to your page

Like seen on this site:

1. Log in to your Wix account.
2. Click on "Edit Site".
3. At the left pane, click in the App Market icon.
4. In the search input, search for "iframe".
5. Select "HTML iFrame/Embed".
6. Click on "Add to site".

2. Edit the iframe content

Click in the iframe and select Settings.

At Mode select HTML code.

Paste the following CloudSponge iframe sample, replacing [YOUR_DOMAIN_KEY] by your CloudSponge domain_key:

<!DOCTYPE HTML>
<html>
<body>

<style type="text/css">
div.cs_container { padding:  300px 50px 0px; }
a.cs_import { color: white; display:block;}
</style>

<div class='cs_container'>

<!-- Any link with a class="cs_import" will start the import process -->
<a class="cs_import">Add from Address Book</a>

<!-- This textarea will be populated with the contacts returned by CloudSponge -->
<textarea id="contact_list" style="width:450px;height:82px"></textarea>

<!-- Include these scripts at the bottom of your page to import address books with CloudSponge -->
<script>
var csPageOptions = {
  textarea_id:"contact_list",
  inlineOauth: false,
};
(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/[YOUR_DOMAIN_KEY].js');
</script>

</div>
</body>
</html>

Click on Update to reflect changes on page. You can close the iFrame settings.

3. Resize the iframe

Now you need to resize the iframe in order it can display the CloudSponge widget properly.

In this sample we're using 980px x 715px.

4. Save and Publish

At the top right menu, click on Save. Then publish your content clicking on Publish.

5. Customize the iframe

After check the results, you can resize the iframe and edit the CSS code inside it in order to match your needs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment