@nepflow/integration-widget

Integration Widget

The widget allows your users to explore 6,000+ Zapier integrations right inside your app.

Learn more about the widget on our website: nepflow.dev

Get started • Live Demo • Build Widget • Documentation • NPM package

Installation

You can use the online builder to customize the widget and get the installation code.

Node.js package

Install the package via NPM or Yarn

npm install @nepflow/integration-widget --save

Import module in your application

import NepflowIntegrationWidget from '@nepflow/integration-widget';

Load from CDN

You can load specific version of package from jsDelivr CDN.

<script src="https://cdn.jsdelivr.net/npm/@nepflow/integration-widget@1/dist/bundle.js"></script>

Configuration

Add element

Create an element that should contain the widget

<div id="integration-widget"></div>

Initialization

Basic usage:

const widget = new NepflowIntegrationWidget(
  'integration-widget', // Element ID
  {
    backgroundColor: '#f5f5f5',
    cardColor: '#fff',
    cardBorderColor: '#fff',
    innerSpace: 24,
    autoVerticalResize: true,
    onCardClick: function(id) {
      alert(id + ' clicked!')
    }
  }
);

If your app is integrated with Zapier, your users can see integration guides and Zapier templates:

const widget = new NepflowIntegrationWidget(
  'integration-widget', // Element ID
  {
    zapierAppId: '<ZAPIER APP SLUG>', // Your Zapier app key
    backgroundColor: '#f5f5f5',
    cardColor: '#fff',
    cardBorderColor: '#fff',
    innerSpace: 24,
    autoVerticalResize: true,
    onCardClick: function(id) {
      console.log('card clicked:', id)
    }
  }
);

You can use customCards parameter to show your native integrations or replacing existing Zapier apps:

const widget = new NepflowIntegrationWidget(
  'integration-widget', // Element ID
  {
    zapierAppId: '<ZAPIER APP SLUG>', // Your Zapier app key
    backgroundColor: '#f5f5f5',
    cardColor: '#fff',
    cardBorderColor: '#fff',
    innerSpace: 24,
    autoVerticalResize: true,
    customCards: [
      // Showing a custom integration in the catalog
      { 
        id: 'custom_integration', 
        name: 'Custom Integration', 
        iconURL: 'https://example.com/foobar.png' 
      },

      // Replacing an existing Zapier app in the catalog
      {
        id: 'gmail', 
        name: 'Gmail', 
        iconURL: 'https://example.com/gmail.png',
        replacedZapierAppId: 'gmail'
      },
    ],
    onCardClick: function(id) {
      alert(id + ' clicked!')
    }
  }
);

Parameters

You can pass any of these parameters for your widget:

Parameter	Description	Type	Default
zapierAppId	Your Zapier app ID or slug	string	#f5f5f5
backgroundColor	The widget's background color (hex)	string	#ffffff
cardColor	The color for the card components (hex)	string	#ffffff
cardBorderColor	Card component border color (hex)	string	#ffffff
innerSpace	The padding inside the widget (px)	number	24
autoVerticalResize	Enables automatic vertical resizing for the iframe	boolean	false
onCardClick	Called when card is clicked	(id: string) => void	-
customIntegrations	Array of custom or native integrations	{ id: string; name: string; iconURL: string; replacedZapierAppId: string; }[]	[]

Technical Support or Questions

If you have questions or need help integrating the editor please contact us instead of opening an issue.

License

Apache License 2.0