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 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 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 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 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!