Integrations

Nectar provides integrations for popular third-party services right out-of-the-box.

AlaSQL

AlaSQL is a JavaScript Database which handles both Relational Data and Nested JSON Data and allows to export, store and import data from LocalStorage, IndexedDB and Excel.

https://alasql.org

Disqus

Disqus is a global comment system that improves discussion on websites and connects conversations across the web.

1. Create an account on Disqus: https://disqus.com/profile/signup/?next=/admin/create/

2. After creating the account below screen will appear. Fill out the details and click on 'Create Site'. Copy the shortname.disqus.com value.

3. Open partials/integrations/disqus.html

4. Inside LazyLoad.js(['https://pmsgz.disqus.com/embed.js']);

Replace pmsgz with your unique shortname.

5. Inside loadDisqusComments: function() {

this.page.identifier and this.page.url must be unique for each page on which you want to show comments.

Embedly

Embedly provides an easy way to embed content, videos and rich media from third party websites.

It supports embedding content from 650+ providers.

https://embed.ly

Facebook Comments

Facebook Comments allows the users to comment on content such as articles on your site using their Facebook account.

1. Create a Facebook App on https://developers.faceook.com
2. Add a Product Account Kit

3. Copy the Facebook App ID

4. Open assets/custom/js/config.js

5. Inside window.config.facebook = { appId: 'ENTER_APP_ID_HERE' };

Check the official documentation here: https://developers.facebook.com/docs/plugins/comments/

Google AdMob

Earn revenue from your mobile app by using Google AdMob.

It supports Banner Ads, Interstitial Ads and Rewarded Video Ads.

https://admob-plus.github.io

Google Maps

Google Maps is a mapping service which helps you seamlessly integrate satellite imagery, street maps, 360° panoramic views of geographical regions and sites around the world.

https://cloud.google.com/maps-platform

Google Sheets

Save your custom form data into the Google Spreadsheet and get notified by email.

Setting up the Google Spreadsheet

1. Go to https://docs.google.com/spreadsheets
2. Create a new blank spreadsheet

3. Place the names of each form field in first row. The name of the cells in the spreadsheet must match the name of the form inputs. The names are case-sensitive.

Configuring the Google Script

As we have set up our Google Spreadsheet with our form fields, we will write the script that will allow us to send the form data to it.

1. From the spreadsheet we just created, go to the 'Tools' menu and select 'Script editor'.

2. This will open a new Google Script that will look something like this:

3. Copy the following code and paste into the editor.

var SHEET_NAME = 'Sheet1'; /* Sheet name where submitted form data is to be stored */
var RECEIVER_EMAIL = '[e-mail]'; /* Email address at which submitted form will be sent */

var SCRIPT_PROP = PropertiesService.getScriptProperties(); /* New property service */

function doGet(e) {
  return handleResponse(e);
}

function handleResponse(e) {

  var lock = LockService.getPublicLock(); /* This prevents concurrent access write to data */
  lock.waitLock(30000); /* Wait for 30 seconds */

  try {

    var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty('key')); /* Set where we will write the data */
    var sheet = doc.getSheetByName(SHEET_NAME);

    var headerRow = 1; /* Row on which header is present */
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow() + 1; /* Get next row */
    var row = [];

    /* Loop through the header columns */
    for (i in headers) {
        if (headers[i] === 'timestamp') { /* If timestamp column is present */
          row.push(new Date());
        }
        else {
            row.push(e.parameters[headers[i]]); /* Use header name to get form data */
        }
    }

    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]); /* Save row data into the sheet row */

    /* Send Mail */
    var htmlBody =
            '<table>' +
                '<tr>' +
                    '<td>Name</td>' +
                    '<td>' + e.parameters.name + '</td>' +
                '</tr>' +
                '<tr>' +
                    '<td>Email</td>' +
                    '<td>' + e.parameters.email + '</td>' +
                '</tr>' +
            '</table>';

    MailApp.sendEmail(
        RECEIVER_EMAIL,
        'Email Subject', /* Subject */
        'Email Body',
        {
            htmlBody: htmlBody
        }
    );

      /* Return if success */
      return ContentService
          .createTextOutput(JSON.stringify({ "result": "success", "row": nextRow }))
          .setMimeType(ContentService.MimeType.JSON);

  }
  catch(error) { /* Return if error */
      return ContentService
          .createTextOutput(JSON.stringify({ "result":"error", "message": error }))
          .setMimeType(ContentService.MimeType.JSON);
  }
  finally {
      lock.releaseLock(); /* Release lock */
  }
}

function setup() {
  var doc = SpreadsheetApp.getActiveSpreadsheet();
  SCRIPT_PROP.setProperty('key', doc.getId());
}

4. Save the script and give it an appropriate name. Then go to the 'Run' menu, then 'Run function' and select 'setup'.

You might be asked to give Google Scripts to use your Google account.

When you click 'Review Permissions', you might be prompted with this:

5. Once you have given your authorization, go to the 'Publish' menu and select 'Deploy as web app'.

6. You will then be presented with these options with which you have to customize the script.

The last two of these three options are extremely important to set correctly or you won’t be able to access your script with an AJAX request. You must execute the app as yourself 'Me' and you must give 'Anyone, even anonymous' access to the app. Without these settings your script will reject any request from a different server, like your form’s AJAX request, because it won’t be configured to allow for cross-origin resource sharing (CORS).

7. Once you have configured these options, go ahead and click 'Deploy'.

8. You will be prompted with the following dialog. Copy the URL.

9. Use the copied URL in your HTML form action attribute. This URL will be used to send the form via AJAX

Gravatar

Gravatar — A Globally Recognized Avatar is a widely used service where you create your public profile and then it can be used anywhere via REST API just using the email address.

https://en.gravatar.com/site/implement

MailChimp

MailChimp is a marketing automation platform and an email marketing service where you can create and send emails, manage subscribers and mailing lists.

Configure your subscribeUrl, userId and audienceId inside config.js file.

In your MailChimp account:

1. Go to Audience -> Signup forms -> Embedded Forms

2. In the embedded HTML code, find the <form action=""> attribute.

3. It looks something like this:

4. https://gmail.us20.list-manage.com/subscribe/post?u=61e096fdff69bc5a03377380c&id=edf9a19615"

5. Here, the URL without query parameters is your subscribeUrl

6. In the subscribeUrl, replace post with post-json

7. u is your userId

8. id is your audienceId

9. The <input name="" /> attribute of MailChimp embedded HTML form and your app form must match.

QR Code

Generate QR Codes in your app.

https://www.npmjs.com/package/qrcode-generator

RSS Feed

Display up-to-date RSS feeds in your app.

https://www.npmjs.com/package/rss-parser