@apollosproject/canvas-embeds 2.1.415 → 2.1.417
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -5
- package/package.json +5 -2
- package/widget/index.css +1 -1
- package/widget/index.js +353 -303
package/README.md
CHANGED
|
@@ -55,18 +55,19 @@ In the Legacy Modal Mode, embeds are displayed in a modal window on the host web
|
|
|
55
55
|
|
|
56
56
|
To enable the Legacy Modal Mode, add the `data-apollos-modal="true"` attribute to the script tag:
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
```html
|
|
59
59
|
<script
|
|
60
60
|
defer
|
|
61
61
|
src="https://cdn.jsdelivr.net/npm/@apollosproject/canvas-embeds@latest/widget/index.min.js"
|
|
62
62
|
data-apollos-modal="true"
|
|
63
63
|
></script>
|
|
64
|
+
```
|
|
64
65
|
|
|
65
66
|
### 4. Adding the Embed Divs Navigate to the design section of your Webflow site
|
|
66
67
|
and add a `div` element for each embed you plan to use. Currently supported
|
|
67
68
|
embeds include: - **Auth**: Handles user authentication. - **FeatureFeed**:
|
|
68
69
|
Displays curated content feeds. - **Search**: Enables search functionality with
|
|
69
|
-
optional profile modal customization. Each `div` should include the
|
|
70
|
+
optional profile modal customization. - **Donation**: Handles donation processing with Stripe integration. Each `div` should include the
|
|
70
71
|
`apollos-widget` class to activate the embed functionality. Example: ```html
|
|
71
72
|
<div class="apollos-widget" data-type="Auth" data-church="example_church"></div>
|
|
72
73
|
<div
|
|
@@ -81,7 +82,19 @@ optional profile modal customization. Each `div` should include the
|
|
|
81
82
|
data-church="example_church"
|
|
82
83
|
data-search-profile-size="365px"
|
|
83
84
|
></div>
|
|
84
|
-
|
|
85
|
+
<div
|
|
86
|
+
class="apollos-widget"
|
|
87
|
+
data-type="Donation"
|
|
88
|
+
data-church="example_church"
|
|
89
|
+
data-amount="50"
|
|
90
|
+
data-frequency="monthly"
|
|
91
|
+
data-campus="main"
|
|
92
|
+
data-fund="general"
|
|
93
|
+
data-message="Support our mission and make a difference today."
|
|
94
|
+
data-width="500px"
|
|
95
|
+
data-height="700px"
|
|
96
|
+
></div>
|
|
97
|
+
```
|
|
85
98
|
|
|
86
99
|
|
|
87
100
|
|
|
@@ -93,11 +106,21 @@ Use `data-attributes` (or **Custom Attributes** in Webflow) to customize the beh
|
|
|
93
106
|
|
|
94
107
|
| **Attribute** | **Description** |
|
|
95
108
|
| -------------------------- | -------------------------------------------------------------- |
|
|
96
|
-
| `data-type` | Specifies the type of embed (`Auth`, `FeatureFeed`, `Search`). |
|
|
109
|
+
| `data-type` | Specifies the type of embed (`Auth`, `FeatureFeed`, `Search`, `Donation`). |
|
|
97
110
|
| `data-church` | Sets the church slug (e.g., `bayside`). |
|
|
98
111
|
| `data-search-profile-size` | (Optional) Customizes the width of the search profile modal. |
|
|
99
112
|
| `data-feature-feed` | (FeatureFeed) Displays content for a specific feed. |
|
|
100
113
|
| `data-hide-apollos-auth` | (Optional) Hides the Apollos Auth Profile functionality |
|
|
114
|
+
| `data-amount` | (Donation) Sets the default donation amount. |
|
|
115
|
+
| `data-frequency` | (Donation) Sets the donation frequency (`one-time`, `monthly`, `yearly`). |
|
|
116
|
+
| `data-campus` | (Donation) Specifies the campus for the donation. |
|
|
117
|
+
| `data-fund` | (Donation) Specifies the fund for the donation. |
|
|
118
|
+
| `data-message` | (Donation) Custom message to display above the donation form. |
|
|
119
|
+
| `data-width` | (Donation) Sets the width of the donation embed (e.g., `400`, `100%`). |
|
|
120
|
+
| `data-height` | (Donation) Sets the height of the donation embed (e.g., `600`, `100vh`). |
|
|
121
|
+
| `data-display-logo` | (Donation) Controls logo display (`true`/`false`, defaults to `true`). |
|
|
122
|
+
| `data-title` | (Donation) Custom title text (empty string hides title). |
|
|
123
|
+
| `data-display-header` | (Donation) Controls header display (`true`/`false`, defaults to `true`). |
|
|
101
124
|
|
|
102
125
|
Example for a FeatureFeed embed:
|
|
103
126
|
|
|
@@ -111,6 +134,26 @@ Example for a FeatureFeed embed:
|
|
|
111
134
|
></div>
|
|
112
135
|
```
|
|
113
136
|
|
|
137
|
+
Example for a Donation embed:
|
|
138
|
+
|
|
139
|
+
```html
|
|
140
|
+
<div
|
|
141
|
+
class="apollos-widget"
|
|
142
|
+
data-type="Donation"
|
|
143
|
+
data-church="example_church"
|
|
144
|
+
data-amount="50"
|
|
145
|
+
data-frequency="monthly"
|
|
146
|
+
data-campus="main"
|
|
147
|
+
data-fund="general"
|
|
148
|
+
data-message="Support our mission and make a difference today."
|
|
149
|
+
data-width="500"
|
|
150
|
+
data-height="700"
|
|
151
|
+
data-title="Support Our Ministry"
|
|
152
|
+
data-display-logo="true"
|
|
153
|
+
data-display-header="true"
|
|
154
|
+
></div>
|
|
155
|
+
```
|
|
156
|
+
|
|
114
157
|
|
|
115
158
|
|
|
116
159
|
|
|
@@ -119,7 +162,7 @@ Example for a FeatureFeed embed:
|
|
|
119
162
|
|
|
120
163
|
### 6. Understanding Church Slugs
|
|
121
164
|
|
|
122
|
-
Church slugs uniquely identify the organization whose content is displayed. If you
|
|
165
|
+
Church slugs uniquely identify the organization whose content is displayed. If you're unsure of your slug, contact a developer or administrator.
|
|
123
166
|
|
|
124
167
|
> [!NOTE]
|
|
125
168
|
> Replace `[INSERT_CHURCH_SLUG_HERE]` with your church's unique identifier (or **slug**). Contact a developer if you need assistance obtaining a church slug.
|
|
@@ -194,6 +237,10 @@ yarn flush
|
|
|
194
237
|
| `FeatureFeed` | `data-church`, `data-feature-feed` |
|
|
195
238
|
| `Search` | `data-church`, `data-search-profile-size` |
|
|
196
239
|
| | `data-hide-apollos-auth` |
|
|
240
|
+
| `Donation` | `data-church`, `data-amount`, `data-frequency` |
|
|
241
|
+
| | `data-campus`, `data-fund`, `data-message` |
|
|
242
|
+
| | `data-width`, `data-height` |
|
|
243
|
+
| | `data-display-logo`, `data-title`, `data-display-header` |
|
|
197
244
|
|
|
198
245
|
#### Path Routing
|
|
199
246
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apollosproject/canvas-embeds",
|
|
3
3
|
"description": "Apollos React embed widgets",
|
|
4
|
-
"version": "2.1.
|
|
4
|
+
"version": "2.1.417",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "./dist/index.umd.js",
|
|
7
7
|
"module": "./dist/index.es.js",
|
|
@@ -26,6 +26,8 @@
|
|
|
26
26
|
"@phosphor-icons/react": "2.0.15",
|
|
27
27
|
"@segment/analytics-next": "^1.62.0",
|
|
28
28
|
"@sentry/react": "^7.40.0",
|
|
29
|
+
"@stripe/react-stripe-js": "^2.4.0",
|
|
30
|
+
"@stripe/stripe-js": "^2.4.0",
|
|
29
31
|
"@styled-system/theme-get": "^5.1.2",
|
|
30
32
|
"algoliasearch": "^4.17.0",
|
|
31
33
|
"amplitude-js": "^8.21.9",
|
|
@@ -59,7 +61,7 @@
|
|
|
59
61
|
"web-vitals": "^0.2.4"
|
|
60
62
|
},
|
|
61
63
|
"scripts": {
|
|
62
|
-
"build": "vite build && node scripts/build.js",
|
|
64
|
+
"build": "dotenv -- vite build && node scripts/build.js",
|
|
63
65
|
"bump": "yarn build && ./scripts/bump.sh",
|
|
64
66
|
"bump:minor": "yarn build && ./scripts/bump.sh minor",
|
|
65
67
|
"bump:major": "yarn build && ./scripts/bump.sh major",
|
|
@@ -108,6 +110,7 @@
|
|
|
108
110
|
"browserslist": "^4.24.2",
|
|
109
111
|
"cross-env": "^7.0.3",
|
|
110
112
|
"dotenv": "^16.4.5",
|
|
113
|
+
"dotenv-cli": "^8.0.0",
|
|
111
114
|
"dotenv-expand": "^12.0.1",
|
|
112
115
|
"eslint": "^9.24.0",
|
|
113
116
|
"eslint-config-prettier": "^8.8.0",
|