SaaS Onboarding Integration

This guide walks through the most common integration pattern: embedding an onboarding video in your SaaS dashboard that appears for new users and disappears once they've watched it.

The Flow

1. A new user signs up on your platform
2. Your backend registers them for the onboarding video via the Keep'em API
3. When they log into your dashboard, the Keep'em widget loads
4. The widget checks their registration status and shows the video
5. The user watches, asks questions via AI chat, and completes the video
6. On their next login, the widget checks again — they've completed, so nothing appears
7. Your backend receives a completion webhook (optional)

What This Enables

Consistent onboarding — Every user gets the same great experience, regardless of when they signed up or what timezone they're in.

Instant answers — The AI handles common questions ("How do I connect my Stripe account?") at 2 AM without anyone on your team being awake.

Measurable engagement — You know exactly who watched, how much, and what questions they asked. Users who didn't complete the video can be identified for follow-up.

No engineering burden — Once the widget is embedded, the display logic, progress tracking, and chat all happen on Keep'em's side. Your team doesn't maintain any of it.

Integration Steps

1. Register on Signup

In your user signup flow, add an API call to register the new user:

// In your signup handler
const registration = await fetch('https://api.getkeepem.com/v1/events/{eventId}/registrations', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer sk_live_your_secret_key',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    email: newUser.email,
    name: newUser.name,
    externalId: newUser.id
  })
});

2. Embed the Widget

On your dashboard pages, include the widget script and configure it with the current user's identity:

<script src="https://widget.getkeepem.com/v1/widget.js"></script>
<script>
  Keepem.init({
    publishableKey: 'pk_live_your_key_here',
    eventId: 'evt_onboarding',
    viewer: {
      email: currentUser.email,
      name: currentUser.name,
      externalId: currentUser.id
    },
    display: {
      mode: 'popup',
      delay: 2000  // Show after 2 seconds
    }
  });
</script>

3. Handle Completion (Optional)

Configure a webhook to receive completion events:

{
  "event": "viewer.completed",
  "data": {
    "registrationId": "reg_abc123",
    "externalId": "your_internal_user_id",
    "completedAt": "2025-01-15T14:30:00Z"
  }
}

Use this to update the user's onboarding status in your system, trigger the next step in your activation flow, or personalize their experience.