# Call Preview and Thumbnail

Depending on your call type settings, our system can occasionally generate a preview image (thumbnail) for your call.
You can use this image to show a preview of the call in your app, typically in a lobby, waiting room, etc.

## Get the preview thumbnail

```tsx
const thumbnails = call.state.thumbnails;
const imageUrl = thumbnails.image_url;
console.log(imageUrl);

// or
const subscription = call.state.thumbnails$.subscribe((thumbnails) => {
  const imageUrl = thumbnails.image_url;
  console.log(imageUrl);
});

// and don't forget to unsubscribe
subscription.unsubscribe();
```

## Show the preview thumbnail

Our SDK provides a helper method that takes care of the image loading and error handling for you.

All we need is a reference to an `<img>` element that has the correct dimensions.
We will take the dimensions in consideration, when loading the image, and our CDN will generate the correct image size for you.

```tsx
// render image element in your view layer
<img
  id="my-call-preview-img"
  class="my-call-preview-class"
  alt="Call Preview Thumbnail"
/>;

// in your code
const myCallPreviewImg = document.getElementById("my-call-preview-img");
const cleanup = call.bindCallThumbnailElement(myCallPreviewImg);

// and don't forget to clean up
cleanup();
```


---

This page was last updated at 2026-06-09T08:45:51.547Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/javascript/guides/call-preview-thumbnail/](https://getstream.io/video/docs/javascript/guides/call-preview-thumbnail/).