@apollosproject/canvas-embeds 2.1.561 → 2.1.562

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.
Files changed (4) hide show
  1. package/README.md +65 -32
  2. package/package.json +1 -1
  3. package/widget/index.css +1 -1
  4. package/widget/index.js +521 -493
package/README.md CHANGED
@@ -63,18 +63,32 @@ To enable the Legacy Modal Mode, add the `data-apollos-modal="true"` attribute t
63
63
  ></script>
64
64
  ```
65
65
 
66
- ### 4. Adding the Embed Divs Navigate to the design section of your Webflow site
67
- and add a `div` element for each embed you plan to use. Currently supported
68
- embeds include: - **Auth**: Handles user authentication. - **FeatureFeed**:
69
- Displays curated content feeds. - **Search**: Enables search functionality with
70
- optional profile modal customization. - **Donation**: Handles donation processing with Stripe integration. Each `div` should include the
71
- `apollos-widget` class to activate the embed functionality. Example: ```html
66
+ ### 4. Add Embed Containers
67
+
68
+ Navigate to your site builder (e.g., Webflow) and add a `div` element for each embed you plan to use. Supported embeds:
69
+
70
+ - Auth — user authentication
71
+ - FeatureFeed — curated content feeds
72
+ - Search — classic Algolia search and profile UI
73
+ - Ask — AI Q&A assistant (separate from Search)
74
+ - Donation — Stripe-powered giving
75
+
76
+ Each `div` must include the `apollos-widget` class.
77
+
78
+ Example:
79
+
80
+ ```html
81
+ <!-- Auth -->
72
82
  <div class="apollos-widget" data-type="Auth" data-church="example_church"></div>
83
+
84
+ <!-- FeatureFeed -->
73
85
  <div
74
86
  class="apollos-widget"
75
87
  data-type="FeatureFeed"
76
88
  data-church="example_church"
77
89
  ></div>
90
+
91
+ <!-- Search (Algolia) -->
78
92
  <div
79
93
  class="apollos-widget"
80
94
  data-type="Search"
@@ -82,6 +96,11 @@ optional profile modal customization. - **Donation**: Handles donation processin
82
96
  data-church="example_church"
83
97
  data-search-profile-size="365px"
84
98
  ></div>
99
+
100
+ <!-- Ask (AI assistant) -->
101
+ <div class="apollos-widget" data-type="Ask" data-church="example_church"></div>
102
+
103
+ <!-- Donation -->
85
104
  <div
86
105
  class="apollos-widget"
87
106
  data-type="Donation"
@@ -104,23 +123,23 @@ optional profile modal customization. - **Donation**: Handles donation processin
104
123
 
105
124
  Use `data-attributes` (or **Custom Attributes** in Webflow) to customize the behavior and appearance of each embed.
106
125
 
107
- | **Attribute** | **Description** |
108
- | -------------------------- | -------------------------------------------------------------- |
109
- | `data-type` | Specifies the type of embed (`Auth`, `FeatureFeed`, `Search`, `Donation`). |
110
- | `data-church` | Sets the church slug (e.g., `bayside`). |
111
- | `data-search-profile-size` | (Optional) Customizes the width of the search profile modal. |
112
- | `data-feature-feed` | (FeatureFeed) Displays content for a specific feed. |
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`). |
126
+ | **Attribute** | **Description** |
127
+ | -------------------------- | ----------------------------------------------------------- |
128
+ | `data-type` | One of: `Auth`, `FeatureFeed`, `Search`, `Ask`, `Donation`. |
129
+ | `data-church` | Church slug (e.g., `bayside`). |
130
+ | `data-search-profile-size` | (Search) Width of the profile modal. |
131
+ | `data-hide-apollos-auth` | (Search) Hides the profile/auth UI. |
132
+ | `data-feature-feed` | (FeatureFeed) ID of the feed to show. |
133
+ | `data-amount` | (Donation) Default donation amount. |
134
+ | `data-frequency` | (Donation) `one-time`, `monthly`, or `yearly`. |
135
+ | `data-campus` | (Donation) Campus for the donation. |
136
+ | `data-fund` | (Donation) Fund for the donation. |
137
+ | `data-message` | (Donation) Message above the form. |
138
+ | `data-width` | (Donation) Width (e.g., `400`, `100%`). |
139
+ | `data-height` | (Donation) Height (e.g., `600`, `100vh`). |
140
+ | `data-display-logo` | (Donation) Show logo (`true`/`false`, default `true`). |
141
+ | `data-title` | (Donation) Custom title (empty hides title). |
142
+ | `data-display-header` | (Donation) Show header (`true`/`false`, default `true`). |
124
143
 
125
144
  Example for a FeatureFeed embed:
126
145
 
@@ -231,15 +250,16 @@ yarn flush
231
250
 
232
251
  #### Supported Embeds and Attributes
233
252
 
234
- | **Embed Type** | **Key Attributes** |
235
- | -------------- | ----------------------------------------- |
236
- | `Auth` | `data-church` |
237
- | `FeatureFeed` | `data-church`, `data-feature-feed` |
238
- | `Search` | `data-church`, `data-search-profile-size` |
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` |
253
+ | **Embed Type** | **Key Attributes** |
254
+ | -------------- | -------------------------------------------------------- |
255
+ | `Auth` | `data-church` |
256
+ | `FeatureFeed` | `data-church`, `data-feature-feed` |
257
+ | `Search` | `data-church`, `data-search-profile-size` |
258
+ | | `data-hide-apollos-auth` |
259
+ | `Ask` | `data-church` |
260
+ | `Donation` | `data-church`, `data-amount`, `data-frequency` |
261
+ | | `data-campus`, `data-fund`, `data-message` |
262
+ | | `data-width`, `data-height` |
243
263
  | | `data-display-logo`, `data-title`, `data-display-header` |
244
264
 
245
265
  #### Path Routing
@@ -248,3 +268,16 @@ For advanced routing options, use:
248
268
 
249
269
  - `data-use-path-router="true"` for enabling path-based routing.
250
270
  - `data-apollos-id-param="true"` for custom ID handling.
271
+
272
+ #### Ask Embed
273
+
274
+ The Ask experience now lives in its own embed. Use `data-type="Ask"` to render the AI assistant separate from Search:
275
+
276
+ ```html
277
+ <div class="apollos-widget" data-type="Ask" data-church="example_church"></div>
278
+ ```
279
+
280
+ Notes:
281
+
282
+ - Ask posts to your Admin app’s `/api/:church/ask` endpoint using a simple POST (no custom headers), so CORS preflights are avoided.
283
+ - In Modal or Container mode, Ask renders within the same shell as other embeds.
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.561",
4
+ "version": "2.1.562",
5
5
  "license": "MIT",
6
6
  "main": "./dist/index.umd.js",
7
7
  "module": "./dist/index.es.js",