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.
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.
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.
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
.
Now you have CloudSponge properly configured for your theme, let's create a page to import contacts using the CloudSponge widget.
-
After login in your Drupal instance, click on
Add new content
. -
At the
Add content
dialog, selectBasic Page
. TheCreate Basic page
editor will be loaded. -
At the
Create Basic page
editor, change theText Format
: selectFull HTML
. -
For title, fill it with
CloudSponge
. -
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>
-
Mark as checked the
Provide a menu link
option. -
Click on
Save
.
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.
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.