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

$3

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:

``html
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/apollos-web-embeds@latest/widget/index.css?v=1734651805265"
/>
defer
src="https://cdn.jsdelivr.net/npm/apollos-web-embeds@latest/widget/index.js?v=1734651805265"
>

`

$3

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

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

!Webflow embed example

$3

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:

`html



`

!Auth embed attributes

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

`html



`

!FeatureFeed embed attributes

$3

> [!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

$3

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.

$3

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.

$3

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:

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