[Deprecated] Client-side iframe integration

This is the deprecated client-side iframe integration guide.

Deprecation warning

This iframe integration has been deprecated in favor of an updated replacement. The new iframe integration using the magic link is more secure and allows for advanced features like customized styling and language.

How it works

To allow your customers to connect online utility accounts, simply display the Nectar utility connection page with a signed magic link. The utility connection page is preferred to allow customers to synchronously validate multi-factor authentication credentials.

The magic link is a publicly accessible url that contains information about the company and site that is signed and encrypted by Nectar. Use the Nectar API's magic link endpoint to generate a signed magic link. Then you can embed this link into your website to display Nectar's utility connection page.

How the Nectar utility connection page appears on your website

How the Nectar utility connection page appears on your website

For information about whitelabeling Nectar's platform or iframe, get in touch with our team.

Iframe Integration

The magic link follows the format:

https://dash.nectarclimate.com/create-datasource/magic-link/<company_id>/<nectar_signed_secret>/connect

  • <company_id> is the id of the company that the utility account needs to be connected to (this typically is the client that your platform is serving). The company ids associated to a company can be queried from the Nectar API
  • <nectar_signed_secret> is an encoded string containing information about the associated company and site that is signed by a 128-bit AES encryption key. Without a valid secret, the magic link will be invalid and utility accounts cannot be connected

Then, simply display the iframe onto your website. Note that the Nectar works only on a desktop view, so similar dimensions are recommended for the iframe via a code block like the one below:

<iframe src="https://dash.nectarclimate.com/create-datasource/magic-link/<company_id>/<nectar_signed_secret>/connect"
        width="1152" height="648"
        style="border:0;">
</iframe>

Edit Connection Credentials

If you'd like to display an iframe allowing users to edit the credentials of an existing utility account connection, you can use the following format:

https://dash.nectarclimate.com/create-datasource/magic-link/<company_id>/<nectar_signed_secret>/edit

  • <company_id> is the id of the company that the utility account needs to be connected to (this typically is the client that your platform is serving). The company ids associated to a company can be queried from the Nectar API
  • <nectar_signed_secret> is an encoded string containing information about the associated company and utility account connection that is signed by a 128-bit AES encryption key. Note that this secret is associated with a specific utility account connection and must be generated from a different endpoint.