Display Behavior

The Keep'em widget is intelligent about when to show and when to stay hidden. You don't need to implement this logic — the widget handles it automatically based on the viewer's status.

Decision Logic

When Keepem.identify() is called, the widget checks the viewer's status with the API and decides whether to display:

1. Already completed? → Don't show. They've watched the video.
2. No registration token? → Don't show. The viewer isn't eligible.
3. Otherwise → Show the video modal.

Modal Behavior

When the widget shows, it renders a centered modal overlay with the video player:

• Backdrop — A semi-transparent overlay covers the page behind the modal
• Backdrop click — Clicking outside the modal dismisses it
• Escape key — Pressing Escape dismisses the modal
• Close button — An × button above the modal dismisses it
• Loading state — A spinner is shown while the player iframe loads

Dismissal

When a viewer dismisses the modal (via backdrop click, Escape key, close button, or Keepem.close()), the widget:

1. Removes the modal from the page
2. Fires the dismiss event
3. Notifies the Keep'em API that the viewer dismissed

The API tracks dismissals and can be configured to control re-show behavior (cooldown periods, maximum dismissals) from the dashboard.

Completion

Completion is determined by the event's completion threshold (configured in your dashboard, default: 80%). Once a viewer's progress reaches this threshold, they're marked as completed. The widget will not show for completed viewers on subsequent identify calls.

Size Configuration

Control the modal size with the data-size attribute on the script tag:

<script
  src="https://cdn.keepem.io/assets/embed.min.js"
  data-event="evt_abc123"
  data-key="pk_live_xyz789"
  data-size="lg"
></script>

Lifecycle Events

Use Keepem.on() to react to widget state changes in your application:

Keepem.on('show', () => {
  // Modal appeared — e.g. pause background processes
});

Keepem.on('dismiss', () => {
  // Modal closed — e.g. resume normal app flow
});

Keepem.on('complete', () => {
  // Viewer finished — e.g. unlock features, show success state
});