apollos-web-embeds

v2.0.11

Published

3 days ago

Apollos React embed widgets

Downloads

677

0High
0Medium
0Low

apollosadmin

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 href="https://apollos.site/sdk/index.css" rel="stylesheet" />
<script src="https://apollos.site/sdk/index.js" defer></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.

Webflow embed example

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>

Auth embed attributes

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>

FeatureFeed embed attributes

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 the New Web sdk.$filename route. By including these in the <head> of a 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,

Available Options

| data-type | | ----------- | | Auth | | FeatureFeed |