Skip to content

Commit

Permalink
fix: Add loader script
Browse files Browse the repository at this point in the history
  • Loading branch information
art7cf committed Feb 1, 2024
1 parent 3758b33 commit 1c111fa
Show file tree
Hide file tree
Showing 6 changed files with 1,905 additions and 23 deletions.
26 changes: 22 additions & 4 deletions .github/workflows/production.yaml
Original file line number Diff line number Diff line change
@@ -1,21 +1,39 @@
name: Vercel Production Deployment
name: Production Deployment

env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

on:
push:
branches:
- main

jobs:
Deploy-Production:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2

- name: Cache node_modules
uses: actions/cache@v2
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- name: Install Dependencies
run: npm install

- name: Build React App
run: npm run build

- name: Install Vercel CLI
run: npm install --global vercel@latest

- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
run: vercel deploy --prod --token=${{ secrets.VERCEL_TOKEN }}
58 changes: 50 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,65 @@

# Integration Widget

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

TODO: BADGES
[![Production Deployment](https://github.com/nepflow/integration-widget/actions/workflows/production.yaml/badge.svg?branch=main)](https://github.com/nepflow/integration-widget/actions/workflows/production.yaml)

[Quickstart](#quickstart)[Build Widget](https://get-widget.nepflow.dev/)[Documentation](https://docs.nepflow.dev/)

## Quickstart
[Installation](#installation)[Build Widget](https://get-widget.nepflow.dev/)[Documentation](https://docs.nepflow.dev/)

TODO: ABOUT BUILD AND USE CASES
## Installation

### Use with your existing framework
You cxan use [our online builder](https://get-widget.nepflow.dev) to customize the widget and get an installation code.

- React JS: https://github.com/nepflow/react-integration-widget/
## JavaScript

For apps that have Zapier integration:

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

<script src="https://widget.nepflow.dev/loader-v1.js"></script>
<script>
nepflow.init('integration-widget', {
zapierAppId: '<ZAPIER APP SLUG>',
backgroundColor: '#ffffff',
cardColor: '#f5f5f5',
innerSpace: '24px',
});
</script>
```

For apps that don't have Zapier integration yet:

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

<script src="https://widget.nepflow.dev/loader-v1.js"></script>
<script>
nepflow.init('integration-widget', {
backgroundColor: '#ffffff',
cardColor: '#f5f5f5',
innerSpace: '24px',
onClickService: function(serviceId) {
alert(serviceId + ' clicked!')
}
});
</script>
```

### Or use with your existing framework:

- **React JS**: https://github.com/nepflow/react-integration-widget/

## Parameters

TODO: PARAMETERS
You can pass any of these parameters for your widget:
- **zapierAppId**: Your Zapier app slug.
- **backgroundColor**: The widget's background color.
- **cardColor**: The color for the card components.
- **innerSpace**: The padding inside the widget.
- **verticalAutoResize**: Enables automatic vertical resizing for the iframe.

## Technical Support or Questions

Expand Down
9 changes: 8 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
"preview": "vite preview",
"script:transpile": "babel scripts/loader-v1.js --out-file public/loader-v1.js --presets babel-preset-es2015",
"script:minimize": "terser public/loader-v1.js -o public/loader-v1.js",
"script:compile": "npm run script:transpile && npm run script:minimize"
},
"dependencies": {
"axios": "^1.6.7",
Expand All @@ -24,6 +27,9 @@
"@typescript-eslint/eslint-plugin": "^6.4.0",
"@typescript-eslint/parser": "^6.14.0",
"@vitejs/plugin-react": "^4.2.1",
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"eslint": "^8.0.1",
"eslint-config-standard-with-typescript": "^43.0.1",
"eslint-plugin-import": "^2.25.2",
Expand All @@ -32,6 +38,7 @@
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"terser": "^5.27.0",
"typescript": "*",
"vite": "^5.0.8"
}
Expand Down
1 change: 1 addition & 0 deletions public/loader-v1.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

42 changes: 42 additions & 0 deletions scripts/loader-v1.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
class NepflowWidget {
constructor() {
this.baseUrl = 'http://localhost:5173/';
}

load(elementId, params) {
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)) {
searchParams.append(key, value.toString());
}

// Create the iframe element
const iframe = document.createElement('iframe');
iframe.src = `${this.baseUrl}?${searchParams.toString()}`;
iframe.style.width = '100%';
iframe.style.height = '100%';
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 !== this.baseUrl) {
console.debug('[Nepflow] Received message from unknown origin:', event.origin);
return;
}

console.debug('[Nepflow] Received message:', event.data);
});
}
}

window.nepflow = new NepflowWidget();

0 comments on commit 1c111fa

Please sign in to comment.