Shopify Addon

Quick and easy integration with Shopify.com

This guide will help you to get CloudSponge working in your Shopify store.

Install

The first step is install our extension in your store from the Shopify Ecommerce Plugins page:

Click to Install

Clicking in the above link will automatically create a CloudSponge for your store, and now all public pages will be able to use our widget.

Using our Widget

To use our widget to import contacts, follow these steps:

  1. Login in your Shopify account

  2. Select Online Store in the left menu:

  3. Click on Pages:

  4. At Pages, click on an existing page or add one clicking in the top right Add page button.

  5. After open/create-new page, now click in the Show HTML button like above:

  6. Add the below code to add a link to launch our widget and the textarea to receive the imported contacts:

    <!-- Any link with a class="cs_import" will start the import process -->
    <p><a class="cs_import">Add from Address Book</a></p>
    <!-- This textarea will be populated with the contacts returned by CloudSponge -->
    <textarea id="contact_list" style="width: 450px; height: 82px;"></textarea>

  7. Click on the Save button at the bottom right:

  8. Preview your page clicking in the View button at the top right:

  9. Test it: click in the Add from AddressBook link, and you’ll see our widget in action:

  10. Need help? Comments? Want to customize it? Let us know!

Creating a Google Credential

If you want to provide Gmail importing for your customers, you’ll need to spend 2 minutes to configure a Google API Credential.

After you follow these steps, your users will see your domain in the Google Authentication window instead of ours.

Important: Google requires you to submit a review of your application before they will allow strangers to use approve your OAuth permission requests. The OAuth review may take up to a week, longer if Google has questions about your application. We’ve prepared some background and directions to help you navigate the new process successfully. You can still test out your integration immediately.

  1. Sign into Google Developer Console.
  2. Create a new project, or click on an existing one.
  3. At API Manager > Overview, search by Contacts API and click on it:
  4. If the Enable API button is available:
    1. Click on it to use this API.
    2. Click on “Go to Credentials” button (or “Credentials” link at the left).
  5. At Step “1 - Find out what kind of credentials you need”, fill the questions with the following answers:
    1. Which API are you using: Contacts API.
    2. Where will you be calling the API from: Web server.
    3. What data will be you accessing: User data.
    4. Click on “What credentials do I need?” button.
  6. At Step “2 - Create an OAuth 2.0 client ID”:
    1. Fill Name with your app name.
    2. Fill Authorized redirect URIs with https://api.cloudsponge.com/auth.
    3. Click on Create client ID button.
  7. At Step “3 - Set up the OAuth 2.0 consent screen”:
    1. Check if email address is correct.
    2. Fill Product name shown to users with the app name that will be displayed to your users.
    3. Click on Continue button.
  8. At Step “4 - Download credentials”, click on “Done” button.
  9. Click over your app credentials in order to view details.
  10. Take note of your Client ID, Client secret.
  11. Sign in to your CloudSponge account and add a new Gmail OAuth Credentials.
  12. Enter the Client ID, Client secret and Redirect URI values from Google and click on Save button.

  13. Test a Google import on your site.

NB If you observe a 400 error with a message of “Error: invalid_scope” when you attempt to complete the OAuth flow, then your OAuth account needs to be reviewed before Google will let you request access to people’s address books. This is a new requirement that they introduced on May 11, 2017. We’ve prepared some background and directions for navigating the new review process.

  1. Need help? Comments? Want to customize it? Let us know!