Nectar Documentation
DemoBuy Now
  • Introduction
  • Getting Started
    • Requirements
    • Installation
    • Directory Structure
    • Dependencies & Plugins
  • Basics
    • Configuration
    • Routes
    • Layout
    • Navigation
    • Initialization
    • Theming
    • Internationalization
    • Store Management
  • UI & UX
    • Components
      • Accordion
      • Action Sheet
      • Audio
      • Autocomplete
      • Badge
      • Breadcrumb
      • Button
      • Card
      • Chart
      • Checkbox
      • Chip
      • Color Picker
      • Content Block
      • Data Table
      • Date-Time Picker
      • Dialog
      • Dropcap
      • Elevation
      • Embed
      • Empty State
      • Expandable Card
      • Flip Card
      • Floating Action Button
      • Form Input
      • Form Validator
      • Gauge
      • Grid
      • Icon
      • Image
      • Image Compare
      • Image Hotspot
      • Infinite Scroll
      • Keypad
      • Line Divider
      • List Index
      • List View
      • Marquee
      • Menu
      • Menu List
      • Navbar
      • Note
      • Notification
      • Pagination
      • Photo Browser
      • Picker
      • Popover
      • Popup
      • Preloader
      • Progress Bar
      • Pull-to-Refresh
      • Quote
      • Radio
      • Range Slider
      • Rating
      • Ribbon
      • Searchbar
      • Sheet Modal
      • Show More/Less
      • Side Panel
      • Signature Pad
      • Skeleton
      • Smart Select
      • Sortable List
      • Stepper
      • Subnavbar
      • Swipeout
      • Swiper Slider
      • Syntax Highlighter
      • Tab
      • Text Editor
      • Timeline
      • Timer
      • Toast
      • Toggle
      • Toolbar
      • Tooltip
      • Tour Guide
      • Tree View
      • Video
      • Virtual List
    • Screens
      • Splash Screen
  • Advanced
    • Web APIs
      • App Badging API
      • App Shortcuts API
      • Battery Status API
      • Clipboard API
      • Contact Picker API
      • Device Memory API
      • Device Orientation API
      • File API
      • Fullscreen API
      • Geolocation API
      • Get Installed Related Apps API
      • HTML Media Capture API
      • Local Storage API
      • Network Information API
      • Notifications API
      • Online & Offline Status API
      • Page Visibility API
      • Permissions API
      • Picture-In-Picture API
      • Quota Estimation API
      • Screen Orientation API
      • Screen Wake Lock API
      • Server-Sent Events API
      • Session Storage API
      • Vibration API
      • Web Share API
    • Cordova Plugins
      • Battery Status
      • Build Info
      • Camera
      • Contacts Info
      • Device
      • Dialogs
      • Fingerprint Authentication
      • Geolocation
      • In-App Browser
      • Media Capture
      • Network Information
      • Social Sharing
      • Splash Screen
      • SQLite
      • Status Bar
      • Vibration
    • Integrations
      • AlaSQL
      • Disqus
      • Embedly
      • Facebook Comments
      • Google AdMob
      • Google Maps
      • Google Sheets
      • Gravatar
      • Lottie
      • Mailchimp
      • QR Code
      • RSS
      • Telegram Comments
      • WordPress
      • YouTube
  • Publishing
    • Progressive Web App
    • Cordova App
  • Help
    • Changelog
    • Support
    • Customization
  • Tutorials
    • How to Create and Animate an SVG Image Using JavaScript
Powered by GitBook
On this page
  • AlaSQL
  • Disqus
  • Embedly
  • Facebook Comments
  • Google AdMob
  • Google Maps
  • Google Sheets
  • Gravatar
  • MailChimp
  • QR Code
  • RSS Feed
  1. Advanced

Integrations

PreviousVibrationNextAlaSQL

Last updated 2 years ago

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.

Disqus

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

  1. Create an account on Disqus:

  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

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.

Facebook Comments

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

  1. Add a Product Account Kit

  2. Copy the Facebook App ID

  3. Open assets/custom/js/config.js

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

Google AdMob

Earn revenue from your mobile app by using Google AdMob.

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

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.

Google Sheets

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

Setting up the Google Spreadsheet

  1. 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 = 'youremailaddress@provider.com'; /* 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.

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&amp;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.

RSS Feed

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

4. Inside LazyLoad.js(['']);

It supports embedding content from providers.

Create a Facebook App on

Check the official documentation here:

Go to

https://pmsgz.disqus.com/embed.js
650+
https://embed.ly
https://developers.faceook.com
https://developers.facebook.com/docs/plugins/comments/
https://admob-plus.github.io
https://cloud.google.com/maps-platform
https://docs.google.com/spreadsheets
https://en.gravatar.com/site/implement
https://www.npmjs.com/package/qrcode-generator
https://www.npmjs.com/package/rss-parser
https://alasql.org
https://disqus.com/profile/signup/?next=/admin/create/