apollos-web-embeds v2.1.1

Apollos Embeds

Apollos React Embeds are pre-built components designed for easy integration into third-party websites, such as Webflow. These components provide seamless functionality for features like authentication, content feeds, and banner widgets, ensuring a consistent user experience across all digital platforms.

Using Embeds in Webflow

1. Adding Script Tags

Copy the script tags below and paste them into the Custom Code section of your Webflow dashboard. Scroll down to the Footer Code block and insert the following:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/apollos-web-embeds@latest/widget/index.css?v=1734651805265"
/>
<script
  defer
  src="https://cdn.jsdelivr.net/npm/apollos-web-embeds@latest/widget/index.js?v=1734651805265"
></script>
<script>
  window.process = { env: { NODE_ENV: "production" } };
</script>

2. Adding the Embed Divs

Navigate to the design section of your Webflow site and add a div element for each embed. Currently, we support two main embeds: Auth and FeatureFeed. You will likely need both, so create two separate divs.

3. Adding the apollos-widget Class

Ensure that each embed div has the apollos-widget class. This class is essential for the embed functionality.

4. Adding Custom Attributes

To specify which embed appears in each div and control the displayed church content, use data-attributes (or Custom Attributes in Webflow).

• Auth Embed: Add data-type="Auth" and data-church="[INSERT_CHURCH_SLUG_HERE]". Example for Bayside:

<div class="apollos-widget" data-type="Auth" data-church="bayside"></div>

• FeatureFeed Embed: Add data-type="FeatureFeed" and data-church="[INSERT_CHURCH_SLUG_HERE]". Example for Bayside:

<div class="apollos-widget" data-type="FeatureFeed" data-church="bayside"></div>

5. Church Slugs

!NOTE Replace [INSERT_CHURCH_SLUG_HERE] with your church's unique identifier (or slug). Contact a developer if you need assistance obtaining a church slug.

For Developers

Background

This package was originally located in the apollos-embeds repository and involved significant duplication of frontend code, components, and GraphQL queries. To unify our web frontend development, we created canvas-ui-web as a component library. The apollos-embeds project has been moved into this repository to coexist with our other web platforms.

The original version of web-embeds was heavily dependent on modal presentation. This new package retains selective use of modals while encouraging users to navigate to Apollos microsites, which run on New Web.

How It Works

We bundle this package and its dependencies into the /widget folder, creating index.js and index.css files. These files are then served through jsDelivr. By including these on the webpage, users can access these embeds. Placing an apollos-widget div on the page triggers the web embed functionality.

Local Development

To work on this package locally, ensure you have a valid Feature Feed ID. Use index.html for testing with examples. Keep in mind that embeds from different churches on the same page may cause conflicts, so ensure you only use one church per page. You should be running apollos-cluster as well as this entire repo by running yarn dev.

Sample Embed:

<div
  data-type="FeatureFeed"
  data-church="apollos_demo"
  data-feature-feed="FeatureFeed:caf294f0-cd0e-4486-95e7-fa11bd5fb1c5"
  data-modal="true"
  class="apollos-widget"
></div>

To test changes, open http://localhost:5174 in your browser.

Enabling Caching for Local Development

To test caching in local development, modify the Apollo client configuration by commenting out the x-cache-me-not header in:

../packages/web-shared/client/apollosApiLink.js

'x-cache-me-not': 1,

Busting the jsDelivr Cache for Local Development

If you need to force jsDelivr to fetch the latest version of a file, you can manually purge the cache by accessing the purge subdomain of the file's URL:

Example for Cache Purge:

yarn flush

This command clears the cached version of the file from jsDelivr's CDN.

Available Options