Outseta - membership and client management

The Outseta plugin enables seamless integration between Bookla booking system and Outseta membership platform, allowing you to provide authenticated booking experiences for your customers. This integration automatically links bookings to authenticated users, eliminating the need for customers to re-enter their information.

Overview

The Outseta integration provides:

• Automatic User Authentication: Bookings are automatically associated with authenticated Outseta users
• Streamlined Booking Process: Authenticated users can make bookings without entering personal details
• User Data Synchronization: Option to sync user data between Outseta and Bookla
• Membership-Based Access Control: Control booking access based on user authentication status

Prerequisites

Before setting up the Outseta integration, ensure you have:

1. An active Outseta account with configured authentication
2. A Bookla account with created services and resources
3. Your website or application where the booking component will be embedded

Setting Up Outseta Integration

1. Enable the Outseta Plugin

1. Log in to your Bookla dashboard
2. Navigate to the Plugins section
3. Find Outseta and click Add
4. The Outseta menu item will appear in your sidebar

2. Configure Outseta Connection

1. Click on the Outseta menu item in the sidebar
2. Click Start Connection to begin the setup process
3. Enter your Outseta Domain (e.g., yourcompany.outseta.com)
4. Choose your data storage preference:

• Enable "Store user data in Bookla": Stores first name, last name, and email in Bookla
• Disable: Stores only user ID from Outseta and email

5. Click Connect to complete the setup

3. API Key Configuration

For the integration to work properly, you need to create a specific API key:

1. Go to Developers section in your Bookla dashboard
2. Click Create API Key
3. Name your key (e.g., "Outseta Integration")
4. Important: Enable "Allow authentication by plugins" permission in Client Permissions section
5. Click Create and copy the generated API key

4. Configure Your Booking Component In Framer

When implementing the booking component on your Framer's website:

1. Set the Guest Mode to "No" to require authentication
2. Use Code Override to pass the API key to the booking component (Change to your actual API key):

import { forwardRef, useEffect, useState, type ComponentType } from "react"
import { getOutseta } from "./Outseta.tsx"

const BooklaApiKey = "***"

interface BooklaSettings {
    apiRegion: string
    companyID: string
}

interface ComponentProps {
    bkla?: BooklaSettings
    clientTokens?: { [key: string]: any }
    [key: string]: any
}

interface AuthRequestBody {
    token: string
}

export function withOutseta(
    Component: ComponentType<any>
): ComponentType<ComponentProps> {
    return forwardRef<any, ComponentProps>((props, ref) => {
        const outseta = getOutseta()
        const outsetaToken = outseta?.getAccessToken()
        const [clientTokens, setClientTokens] = useState<
            { [key: string]: any } | undefined
        >(undefined)
        const [isLoadingClientTokens, setIsLoadingClientTokens] =
            useState(false)

        useEffect(() => {
            const authenticateWithBookla = async () => {
                // Check if we have the required data
                if (!outsetaToken || outsetaToken === "" || !props.bkla) {
                    return
                }

                const { apiRegion, companyID } = props.bkla

                // Validate required Bookla settings
                if (!apiRegion || !companyID) {
                    console.error(
                        "Missing required Bookla settings: apiRegion and companyID"
                    )
                    return
                }

                // Set loading state
                setIsLoadingClientTokens(true)

                const apiUrl = `https://${apiRegion}.bookla.com/api`
                const endpoint = `${apiUrl}/v1/companies/${companyID}/plugins/outseta/client/auth`

                const requestBody: AuthRequestBody = {
                    token: outsetaToken,
                }

                try {
                    const response = await fetch(endpoint, {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "x-api-key": BooklaApiKey,
                        },
                        body: JSON.stringify(requestBody),
                    })

                    if (!response.ok) {
                        throw new Error(
                            `HTTP error! status: ${response.status}`
                        )
                    }

                    const data = await response.json()
                    console.log("Bookla authentication successful:", data)

                    // Store the API response as clientTokens
                    setClientTokens(data)
                } catch (error) {
                    console.error("Failed to authenticate with Bookla:", error)
                    setClientTokens(undefined)
                } finally {
                    // Always clear loading state
                    setIsLoadingClientTokens(false)
                }
            }

            authenticateWithBookla()
        }, [outsetaToken, props.bkla])

        // Show loading state while authenticating
        if (isLoadingClientTokens) {
            return (
                <div
                    style={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        padding: "20px",
                    }}
                >
                    Loading...
                </div>
            )
        }

        return <Component ref={ref} {...props} clientTokens={clientTokens} />
    })
}

3. In component settings select "withOutseta"

Troubleshooting

Common Issues:

Booking component shows "Please login to book" for authenticated users:

• Verify the API key has "Allow authentication by plugins" permission enabled
• Check that the Outseta domain is correctly configured
• Ensure the booking component has guest mode disabled

Authentication not working:

• Verify Outseta domain configuration
• Check that post-login URLs are correctly set in Outseta
• Ensure your website is properly configured with Outseta authentication

User data not syncing:

• Verify the "Store user data in Bookla" setting is enabled
• Check that the necessary user fields are available in Outseta