---
title: Embedding Images with Inspector
slug: embedding-images-inspector
description: Discover how to embed Paccurate's Inspector tool with our new responsive embed mode. Integrate pack images faster using packUuid from API responses. Learn the simple iframe setup and optimize your packing workflow today.
image: https://archbee-image-uploads.s3.amazonaws.com/TJI5tEN_yTs0kLVGBF9mT/FuyHgwBsTKbkmiUsqNUps_screenshot-2025-10-28-at-94432-am.png
icon: 🔍
docTags: 
createdAt: 2025-10-29T16:32:34.249Z
---

![](https://api.archbee.com/api/optimize/TJI5tEN_yTs0kLVGBF9mT/Rds2OsubwL377an7aR84_-20251029-162729.png)

Our frequently-used pack Inspector tool has been launched with more friendly UIs and a fully updated, responsive embed mode. With this new embeddable version of Inspector, users are able to integrate our pack images much faster.

## How It Works

When an API request is made to PacAPI, the response contains a property called `packUuid` — this is a unique key that represents the pack’s payload and response. Inspector uses these values to render the packed image. You can see this in use in [manage.paccurate.io](http://manage.paccurate.io) on your activity hompage — links to specific orders send you to [`https://inspector.manage.paccurate.io/config-editor?packUuid=${UUID}`](https://inspector.manage.paccurate.io/config-editor?packUuid=$\{UUID}) Using this same pattern, you can dynamically embed the pack inspector.

:::Iframe{iframeHeight="0" code="<iframe src=&#x22;https://inspector.manage.paccurate.io/config-editor?packUuid=019a2c51-1494-77c9-8f4d-782ea55e0372&embed=true&#x22; width=&#x22;600&#x22; height=&#x22;800&#x22;></iframe>"}

:::



In the example above, we’ve embedded the link [https://inspector.manage.paccurate.io/config-editor?packUuid=019a2c51-1494-77c9-8f4d-782ea55e0372\&embed=true](https://inspector.manage.paccurate.io/config-editor?packUuid=019a2c51-1494-77c9-8f4d-782ea55e0372\&embed=true) as an `iframe` element. The critical components of the url are the inspector main path ([https://inspector.manage.paccurate.io/config-editor](https://inspector.manage.paccurate.io/config-editor?packUuid=019a2c35-d9da-7265-9061-db35cdbbe127\&embed=true)), the query string `?packUuid=` , the UUID generated from the API response (`019a2c35-d9da-7265-9061-db35cdbbe127`) and finally the `&embed=true` URL parameter. This tells inspector to pull up the responsive view which displays the packed box images, along with buttons to click through multi-box orders.

### Components of embedded view

- In the top left, an Order ID is displayed if provided, along with the total number of items and total containers used to pack the order.
- List of boxes is interactive: each carton’s list item activates it’s image.
- Arrow buttons at the bottom cycle through cartons to show packing instructions for each box
- Cube Icon toggles 3D view — boxes can be spun in 3d to see item placement (add `&3d=true` at the end of your embedded link to default to 3D view)
- Full-screen toggle reverts to the Inspector Pack Overview page to see payload, rules etc.
- Responsive design: optimized for portrait or landscape layouts.

Now, instead of having to store image data or build extraneous javascript, any view where you are able to add a web/html view you can simply use the following as a template:

```html
<iframe src="https://inspector.manage.paccurate.io/config-editor?packUuid={{DYNAMIC PACK UUID FROM API RESPONSE}}&embed=true" width="500" height="800"></iframe>
```

The `width` and `height` properties on the embed are configurable and should be adjusted based on available screen real estate.

We hope this simplifies your integration process and gets you packing even faster!