Outseta Toolkit

A toolkit for integrating Outseta with Framer. Provides authentication state management, custom property display, and conditional visibility functions.

Features

🔧 Authentication Controls: Show/hide content based on login status, trigger login/register/profile popups and logout action
👤 User Data Display: Automatically populate components with user names, email, avatar, and account info
💳 Access Management: Control component visibility based on subscription plans and add-ons
🔖 Bookmark System: Ready-made bookmark functionality
📚 Lesson Tracking: Ready-made lesson completion tracking and management
📝 Build Your Own: Build overrides for any custom property, user and account properties\

Getting Started

Choose your approach based on your project needs:

Option 1: All-in-One Override File (Recommended)

The all-in-one override file provides all the most common Outseta integration functions in a single file.

Copy the code from Outseta.tsx into a code file in your Framer project.

The file contains all of the functions listed in the Modular Overrides section below, prefixed with the module name for easy navigation in the override selector.

Benefits: Everything in one place, comprehensive functionality, single file to manage Downside: The file is large and may be difficult to navigate

Option 2: Modular Overrides

The modular overrides are a set of focused override files for specific functionality.

For each set of overrides, copy the following code into a code file in your Framer project:

• 🔧 OutsetaAuth.tsx

  • showForAnonymous - Component visible for anonymous users
  • showForAuthenticated - Component visible for authenticated users
  • selectAuthStatusVariant - Selects variants based on auth status
  • selectPrimaryVariantForAuthenticated - Selects primary variant for authenticated users, keeps configured variant for non-authenticated users
  • triggerLogout - Component triggers logout (shows for authenticated users only)

• 🚀 OutsetaEmbeds.tsx

  • popupLoginEmbed - Component opens login embed as popup
  • popupRegisterEmbed - Component opens registration embed as popup
  • popupProfileEmbed - Component opens profile embed as popup

• 👤 OutsetaUser.tsx

  • withFirstName - Display user's first name as component text
  • withLastName - Display user's last name as component text
  • withFullName - Display user's full name as component text
  • withEmail - Display user's email address as component text
  • withAvatar - Display user's avatar/profile image as component image
  • withAccountName - Display account name as component text

• 💳 OutsetaPlans.tsx

  • withPlanUid - Display current plan UID as component text
  • selectPlanUidVariant - Selects variant based on plan UID
  • showForPlan - Generic function to show component when user is on a specific plan (requires plan UID parameter)
  • showForNotPlan - Generic function to show component when user is not on a specific plan (requires plan UID parameter)
  • showForGoldPlan - Component visible for users on specific plan (customizable)
  • showForNotGoldPlan - Component visible for users not on specific plan (customizable)
  • selectPrimaryVariantForGoldPlan - Selects primary variant for users on the Gold plan, keeps configured variant for users not on the Gold plan (customize to your plans)

• 🔌 OutsetaAddOns.tsx

  • withAddOnUids - Display current add-on UIDs as component text
  • showForBoostAddOn - Component visible for users with specific add-on (customizable)
  • showForNotBoostAddOn - Component visible for users without specific add-on (customizable)
  • selectPrimaryVariantForBoostAddOn - Selects primary variant for users with the Boost add-on, keeps configured variant for users without the Boost add-on (customizable)

• 🔖 OutsetaBookmarks.tsx

  • 🚨 REQUIRES a person custom property with system name: Bookmarks
  • showForBookmarked - Component visible if item is bookmarked
  • toggleBookmarked - Toggle bookmark status
  • selectCollectionVariant - Selects Empty State variant when there are no bookmarks, uses primary variant when there are bookmarks

• 📚 OutsetaLessons.tsx

  • 🚨 REQUIRES a person custom property with system name: LessonsCompleted
  • showForCompleted - Component visible if lesson is completed
  • toggleCompleted - Toggle lesson completion status

• 🛠️ OutsetaUtils.tsx

  • dynamicGridHeight - Automatically hides empty grid items
  • ℹ️ NOTE: Use for grids containing items conditionally rendered with showForBookmarked or showForCompleted

Benefits: Smaller files, easier to customize, only include what you need Downside: Multiple files to manage and copy

Create Your Own

For custom properties and advanced use cases, you may create your own overrides. Here are some examples:

Available Comparison Operators

The toolkit supports four comparison operators for custom properties:

• equal - Exact match (case-sensitive by default)
• not-equal - Not an exact match (case-sensitive by default)
• includes - Value is present in an array or string
• not-includes - Value is not present in an array or string

ℹ️ NOTE: Use the flags: ["ignore-case"] option to make comparisons case-insensitive.

import { custom } from "https://cdn.jsdelivr.net/npm/@outseta/toolkit@v0.7/dist/framer/overrides.js";

//// EXAMPLES OF CUSTOM PROPERTIES ////

/*
 ***********************************************************
 ** 🚨 **REQUIRES** an account custom property with system name: Mascot **
 ***********************************************************
 1. Go to CRM > Custom Properties > Account > Add Property
 2. Make sure the system name is "Mascot"
 3. and the control type is "text"
 */

// Display company mascot as component text
export function withCompanyMascot(Component): React.ComponentType {
  return custom.withTextProperty(Component, "Account.Mascot");
}

/*
 ***********************************************************
 ** 🚨 **REQUIRES** a person custom property with system name: CoffeePreference **
 ***********************************************************
 1. Go to CRM > Custom Properties > Person > Add Property
 2. Make sure the system name is "CoffeePreference"
 3. and the control type is "text"
 */

// Component visible when coffee preference is Espresso
export function showForCoffeePreference_Espresso(
  Component
): React.ComponentType {
  return custom.showForProperty(Component, "CoffeePreference", {
    value: "Espresso",
    compare: "equal",
    flags: ["ignore-case"],
  });
}

// Component visible when coffee preference is NOT Espresso
export function showForCoffeePreference_NotEspresso(
  Component
): React.ComponentType {
  return custom.showForProperty(Component, "CoffeePreference", {
    value: "Espresso",
    compare: "not-equal",
    flags: ["ignore-case"],
  });
}

/*
 ***********************************************************
 ** 🚨 **REQUIRES** a person custom property with system name: Skills **
 ***********************************************************
 1. Go to CRM > Custom Properties > Person > Add Property
 2. Make sure the system name is "Skills"
 3. and the control type is "select"
 4. Add the following options: `JavaScript`, `Design`, `Marketing`
 */

// Toggle skill tag
// Selects variant `Active` when slug is present in skills
// Selects variant `Inactive` when slug is not present in skills
// ℹ️ **NOTE:** Requires a `slug` property on the component
export function toggleSkillTag(Component): React.ComponentType {
  return custom.toggleProperty(Component, "Skills", {
    value: "props.slug", // e.g. one of: `JavaScript`, `Design`, `Marketing`,
    trueVariant: "Active",
    falseVariant: "Inactive",
  });
}

// Component visible when user does NOT have JavaScript skill
export function showForNotJavaScriptSkill(Component): React.ComponentType {
  return custom.showForProperty(Component, "Skills", {
    value: "JavaScript",
    compare: "not-includes",
  });
}

/*
 ***********************************************************
 ** 🚨 **REQUIRES** a person custom property with system name: WatchLater **
 ***********************************************************
 1. Go to CRM > Custom Properties > Person > Add Property
 2. Make sure the system name is "WatchLater"
 3. and the control type is "text"
 */

// Selects variant `OnWatchLaterList` when slug is present in watch later
// Selects variant `NotOnWatchLaterList` when slug is not present in watch later
// ℹ️ **NOTE:** Requires a `slug` property on the component
export function selectVariantFromWatchLaterStatus(
  Component
): React.ComponentType {
  return custom.selectVariantForProperty(Component, "WatchLater", {
    value: "props.slug", // e.g. one of: `video1`, `video2`, `video3` etc.
    compare: "includes",
    trueVariant: null, // Use the primary variant
    falseVariant: "props.variant", // Use the configured variant
  });
}

License

MIT License - see LICENSE for details.

Contributing

Contributions welcome. View the contributing guide for more information.

Support

• GitHub Issues
• Outseta Documentation
• Framer Community