CloudSponge + Drupal.org

CloudSponge+Drupal.md

Integrate CloudSponge in Drupal.org

Drupal.org users can easily integrate CloudSponge in Drupal.org using the CloudSponge Drupal module.

If for some reason, users cannot use the above module, there is another alternative: use the CloudSponge widget including our simple snipet in a full HTML page. To achieve this, we'll insert the CloudSponge JavaScript library in the default theme.

Compared to Drupal 6, Drupal 7 platform has changed the way to support JavaScript in the pages and introduced several new techniques that allow users to embed JavaScript in Drupal site's pages.

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

1. Check your Default Theme

After login into your Drupal instance, click on Appearance in the top menu. A dialog will be displayed, and the used theme will be displayed as default theme.

We'll use, as example, the Bartik theme as our default theme.

2. Open the template.php to edit

Now we know the used theme, let's localize the template.php file for this theme.

At the Drupal installation folder, there is a /theme folder, with all installed themes. As we're using Bartik as theme, our template file is located at themes/bartik/template.php.

Remember if you're using a different theme than Bartik, just replace the folder name with your theme name.

Open this file (template.php) in a text editor.

3. Add CloudSponge calls to theme

At the beginning of the template.php file, right after the <?php directive, add the following lines, replacing YOUR_DOMAIN_KEY by your CloudSponge account key:

drupal_add_js('//api.cloudsponge.com/widget/YOUR_WIDGET_KEY.js', array('type' => 'external', 'scope' => 'footer'));

Save and close template.php.

4. Create a Page to import contacts

Now you have CloudSponge properly configured for your theme, let's create a page to import contacts using the CloudSponge widget.

1. After login in your Drupal instance, click on Add new content.

2. At the Add content dialog, select Basic Page. The Create Basic page editor will be loaded.

3. At the Create Basic page editor, change the Text Format: select Full HTML.

4. For title, fill it with CloudSponge.

5. Fill Body with the following code:

    <a class="cloudsponge-launch">Add From Address Book</a>
    
    <!-- This textarea will be populated with the contacts returned by CloudSponge -->
    <textarea class="cloudsponge-contacts" style="width:450px;height:82px"></textarea>

6. Mark as checked the Provide a menu link option.

7. Click on Save.

5. Import your Contacts

After save your CloudSponge page, you'll see this entry as a tab in your Drupal site. Click on it.

The CloudSponge page will be displayed with a link (Add from Address Book) and a textarea to receive all imported contacts.

Click on Add from Address Book and check if you can import your contacts.

6. Customize it

Now you can import your contacts, customize this Basic Page content, title and body on Drupal to match your needs.

If you need to embed more JavaScript, you can take a look on this tutorial.