> ## Documentation Index
> Fetch the complete documentation index at: https://docs.boxpressd.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkins

> Display recent customer checkin activity from Boxpressd.

checkins help showcase real-world activity at your lounge or retail location.

The Boxpressd Sites SDK includes components that make it easy to display recent customer visits and community engagement directly on your website.

All checkin components automatically use the business context resolved by the `BoxpressdProvider`.

<Note>
  checkins are primarily a venue-focused feature. Some components may return no data for business types that do not support checkins.
</Note>

## Available Components

| Component | Description |
| - | - |
| `BoxpressdCheckinsFeed` | Displays a list of recent checkins. |
| `BoxpressdCheckinCard` | Displays a single checkin. |

## BoxpressdCheckinsFeed

The feed component displays recent customer activity for the active venue.

### Example

```tsx id="s3e7ax" theme={null}
import { BoxpressdCheckinsFeed } from "@boxpressd/sites-sdk/checkins"

export default function ActivitySection() {
  return (
    <BoxpressdCheckinsFeed
      limit={10}
    />
  )
}
```

### Props

| Prop | Type | Description |
| - | - | - |
| `limit` | `number` | Maximum number of checkins to display. |
| `layout` | `"list" \| "grid"` | Display layout. |
| `showAvatar` | `boolean` | Display user avatars when available. |
| `showTimestamp` | `boolean` | Display checkin dates. |
| `className` | `string` | Additional CSS classes. |

## List Layout

```tsx id="1eww77" theme={null}
<BoxpressdCheckinsFeed
  limit={10}
  layout="list"
/>
```

## Grid Layout

```tsx id="upivvi" theme={null}
<BoxpressdCheckinsFeed
  limit={6}
  layout="grid"
/>
```

## BoxpressdCheckinCard

Display a single checkin.

This component is useful when building custom activity feeds or combining checkins with other content.

### Example

```tsx id="1axr2f" theme={null}
import { BoxpressdCheckinCard } from "@boxpressd/sites-sdk/checkins"

<BoxpressdCheckinCard
  checkin={checkin}
/>
```

### Props

| Prop | Type | Description |
| - | - | - |
| `checkin` | `BoxpressdCheckin` | checkin data object. |
| `showAvatar` | `boolean` | Display user avatar. |
| `showTimestamp` | `boolean` | Display checkin timestamp. |
| `className` | `string` | Additional CSS classes. |

## checkin Object

```ts id="0k6u34" theme={null}
type BoxpressdCheckin = {
  id: string
  createdAt: string
  note?: string
  rating?: number
  user: {
    id?: string
    displayName: string
    avatarUrl?: string
  }
  venue?: {
    id: string
    name: string
  }
}
```

## Username Normalization

The SDK automatically generates a display name using the following fallback order:

```ts id="k2u3z8" theme={null}
display_name → first_name + last initial → "Boxpressd User"
```

This allows activity feeds to remain user-friendly while respecting privacy settings.

## Example: Homepage Activity Feed

```tsx id="j9lk9x" theme={null}
<section>
  <h2>Recent Lounge Activity</h2>

  <BoxpressdCheckinsFeed
    limit={5}
  />
</section>
```

## Example: Sidebar Widget

```tsx id="m6wq5u" theme={null}
<aside>
  <BoxpressdCheckinsFeed
    limit={5}
    showAvatar={false}
  />
</aside>
```

## Example: Community Section

```tsx id="4ld3mc" theme={null}
<section className="community-feed">
  <h2>See Who's Visiting</h2>

  <BoxpressdCheckinsFeed
    limit={12}
    layout="grid"
  />
</section>
```

## Styling

checkin components inherit Boxpressd theme variables.

```css id="8bkr4i" theme={null}
:root {
  --bxp-primary: #d3a966;
  --bxp-border-radius: 16px;
}
```

## Custom Styling

```tsx id="oeq2km" theme={null}
<BoxpressdCheckinsFeed
  className="recent-checkins"
/>
```

```css id="7twk5g" theme={null}
.recent-checkins {
  margin-top: 2rem;
}
```

## Business Awareness

checkin components automatically use the resolved business context.

```tsx id="n0wq9f" theme={null}
<BoxpressdCheckinsFeed />
```

No venue IDs or business IDs are required.

The SDK automatically determines which venue's activity should be displayed.

## Empty States

Some venues may have little or no recent activity.

Components should gracefully handle empty results.

```tsx id="6n4skw" theme={null}
<BoxpressdCheckinsFeed
  limit={10}
  emptyMessage="No recent checkins yet."
/>
```

## Common Use Cases

### Homepage Social Proof

Show visitors that customers actively visit the location.

```tsx id="s0d4w7" theme={null}
<BoxpressdCheckinsFeed
  limit={5}
/>
```

### Community Page

Create a dedicated community section highlighting customer engagement.

```tsx id="8i8vst" theme={null}
<BoxpressdCheckinsFeed
  limit={20}
  layout="grid"
/>
```

### Lounge Dashboard

Display recent visitor activity.

```tsx id="k3xoq8" theme={null}
<BoxpressdCheckinsFeed
  limit={15}
/>
```

## Privacy Considerations

checkin components are designed for public-facing websites.

The SDK automatically:

* Uses normalized display names
* Avoids exposing sensitive user information
* Respects visibility settings where applicable

Developers should avoid displaying private user data outside of the information returned by the SDK.

## Best Practices

* Keep activity feeds recent and concise.
* Display 5–10 items on homepages.
* Use larger feeds on dedicated community pages.
* Combine checkins with events and reviews for stronger social proof.
* Gracefully hide the section when no activity exists.

## Next Steps

Continue to:

* Sessions
* Reviews
* Events
* Data Fetching → checkins

These guides cover additional engagement and community-focused features.