Embedding Images with Inspector
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 on your activity hompage — links to specific orders send you to https://inspector.manage.paccurate.io/config-editor?packUuid=${UUID} Using this same pattern, you can dynamically embed the pack inspector.
In the example above, we’ve embedded the link 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), 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:
<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!