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.
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".
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.
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.
At the top right menu, click on Save. Then publish your content clicking on Publish.
After check the results, you can resize the iframe and edit the CSS code inside it in order to match your needs.