-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
258 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| <img alt="Nepflow widget with 6,000+ Zapier integrations" src="https://raw.githubusercontent.com/nepflow/integration-widget/main/web/assets/intro-v3.png" style="max-width: 800px; width: 100%; margin-bottom: 24px;" /> | ||
|
|
||
| # Integration Widget | ||
|
|
||
| The widget allows your users to explore **6,000+ Zapier integrations** right inside your app. | ||
|
|
||
| [](https://github.com/nepflow/integration-widget/actions/workflows/production.yaml) | ||
| [](https://opensource.org/licenses/Apache-2.0) | ||
|
|
||
| [Get started](#getting-started) • [Live Demo](https://demo.nepflow.dev/) • [Build Widget](https://demo.nepflow.dev/) • [Documentation](https://docs.nepflow.dev/) | ||
|
|
||
| ## Getting started | ||
|
|
||
| You can use [the online builder](https://demo.nepflow.dev) to customize the widget and get the installation code. | ||
|
|
||
| ### Use installation script | ||
|
|
||
| If your app is integrated with [Zapier](https://zapier.com/): | ||
|
|
||
| ```html | ||
| <div id="integration-widget"></div> | ||
|
|
||
| <script src="https://widget.nepflow.dev/loader-v1.js"></script> | ||
| <script> | ||
| nepflowWidget.load('integration-widget', { | ||
| zapierAppId: '<ZAPIER APP ID>', // Your Zapier app ID or slug | ||
| backgroundColor: '#f5f5f5', | ||
| cardColor: '#fff', | ||
| cardBorderColor: '#fff', | ||
| innerSpace: 24, | ||
| autoVerticalResize: true | ||
| }); | ||
| </script> | ||
| ``` | ||
|
|
||
| You can use `customIntegrations` parameter to show your native integrations: | ||
|
|
||
| ```html | ||
| <div id="integration-widget"></div> | ||
|
|
||
| <script src="https://widget.nepflow.dev/loader-v1.js"></script> | ||
| <script> | ||
| nepflowWidget.load('integration-widget', { | ||
| zapierAppId: '<ZAPIER APP ID>', // Your Zapier app ID or slug | ||
| backgroundColor: '#f5f5f5', | ||
| cardColor: '#fff', | ||
| cardBorderColor: '#fff', | ||
| innerSpace: '24px', | ||
| autoVerticalResize: true, | ||
| customIntegrations: [ | ||
| // Showing a new integration in the catalog | ||
| { | ||
| id: 'new_integration', | ||
| name: 'New Integration', | ||
| iconURL: 'https://example.com/new_integration.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!') | ||
| } | ||
| }); | ||
| </script> | ||
| ``` | ||
|
|
||
| If your app is not integrated with Zapier yet: | ||
|
|
||
| ```html | ||
| <div id="integration-widget"></div> | ||
|
|
||
| <script src="https://widget.nepflow.dev/loader-v1.js"></script> | ||
| <script> | ||
| nepflowWidget.load('integration-widget', { | ||
| backgroundColor: '#f5f5f5', | ||
| cardColor: '#fff', | ||
| cardBorderColor: '#fff', | ||
| innerSpace: 24, | ||
| autoVerticalResize: true, | ||
| onCardClick: function(id) { | ||
| alert(id + ' clicked!') | ||
| } | ||
| }); | ||
| </script> | ||
| ``` | ||
|
|
||
| ### Use with your existing framework | ||
|
|
||
| - [**React JS**](https://github.com/nepflow/react-integration-widget/) | ||
|
|
||
| ## 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 | | ||
| | verticalAutoResize | 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](https://nepflow.dev/contact-us) instead of opening an issue. | ||
|
|
||
| ## License | ||
|
|
||
| Apache License 2.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,5 @@ | ||
| import load from './utils/load' | ||
| import { IntegrationWidget } from './models/IntegrationWidget' | ||
| import { IntegrationWidgetConfig } from './models/IntegrationWidgetConfig' | ||
|
|
||
| export { load } | ||
| export { IntegrationWidgetConfig }; | ||
| export default IntegrationWidget; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import { IntegrationWidgetConfig } from "./IntegrationWidgetConfig"; | ||
|
|
||
| export class IntegrationWidget { | ||
| private readonly baseUrl: string; | ||
|
|
||
| constructor(elementId: string, params: IntegrationWidgetConfig) { | ||
| this.baseUrl = 'https://widget.nepflow.dev'; | ||
|
|
||
| const widgetElement = document.getElementById(elementId); | ||
| if (!widgetElement) { | ||
| console.error('Integration widget element not found.'); | ||
| return; | ||
| } | ||
|
|
||
| // Create URLSearchParams from the params object | ||
| const searchParams = new URLSearchParams(); | ||
| for (const [key, value] of Object.entries(params)) { | ||
| if (typeof value === 'boolean') { | ||
| searchParams.append(key, value ? 'true' : ''); | ||
| } else if (typeof value === 'object') { | ||
| searchParams.append(key, JSON.stringify(value)); | ||
| } else if (value) { | ||
| searchParams.append(key, value.toString()); | ||
| } | ||
| } | ||
|
|
||
| // Create the iframe element | ||
| const iframe = document.createElement('iframe'); | ||
| iframe.src = `${this.baseUrl}/${params.zapierAppId || ''}?${searchParams.toString()}`; | ||
| iframe.style.width = '100%'; | ||
| iframe.style.height = '100%'; | ||
| iframe.style.minHeight = '500px'; | ||
| iframe.frameBorder = '0'; | ||
|
|
||
| // Append the iframe to the integration-widget element | ||
| widgetElement.innerHTML = ''; | ||
| widgetElement.appendChild(iframe); | ||
|
|
||
| // Handler for messages from the iframe | ||
| window.addEventListener('message', (event) => { | ||
| if (!event.origin.startsWith(this.baseUrl)) { | ||
| console.debug('[Nepflow] Received message from unknown origin:', event.origin); | ||
| return; | ||
| } | ||
|
|
||
| const { action, data } = event.data; | ||
| console.debug('[Nepflow] Received message:', action, data); | ||
|
|
||
| switch (action) { | ||
| case 'setWidgetHeight': | ||
| iframe.style.height = `${data.widgetHeight}px`; | ||
| break; | ||
| case 'handleCardClick': | ||
| if (typeof params.onCardClick === 'function') { | ||
| params.onCardClick(data.serviceId); | ||
| }; | ||
| break; | ||
| } | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,17 @@ | ||
| interface CustomCard { | ||
| id: string; | ||
| name: string; | ||
| iconURL: string; | ||
| replacedZapierAppId: string; | ||
| } | ||
|
|
||
| export interface IntegrationWidgetConfig { | ||
| zapierAppId: string; | ||
| backgroundColor: string; | ||
| cardColor: string; | ||
| cardBorderColor: string; | ||
| innerSpace: number; | ||
| autoVerticalResize: boolean; | ||
| onCardClick: (id: string) => void; | ||
| customCards: CustomCard[]; | ||
| } |
This file was deleted.
Oops, something went wrong.