Lookbook preview embed not configured for external sites

[leighhalliday]

Lookbook preview embed not configured for external sites

[leighhalliday]

Thanks @allmarkedup that's exactly what I was hoping for :) I'll close this issue since for me at least it solves the feature request. If you want to re-open, go for it :) Thanks again!

[allmarkedup]

Hey @leighhalliday 👋

Yes you are correct, using the embeds externally requires some JavaScript to be included on the page - details of that are here: https://lookbook.build/guide/sharing/embeds#javascript but I totally agree it would be nice to be able to access the raw iframe URL too for places where that is not feasible. I'll look at adding that into the embed code panel (and also update the info in there to provide a bit more explanation about it all).

Using a plain iframe without the Lookbook JS does come with some disadvantages however. The iframe URLs are pretty hard to manually edit as they are basically encoded JSON (I actually wanted to change this before the v2 launch as it was not a great design decision but I decided to kick that particular can down the road a bit 🙂) but the main problem is that the iframe won't resize its height as the height of the embedded content changes. This is especially a problem with embeds that have been customised to display inspector panels as changing tabs can often result in a lot of height changes.

Obviously your hands are tied when adding to something like Notion but it's worth bearing in mind.

(I have just noticed this in the Embedly docs: https://docs.embed.ly/reference/provider-height-resizing - unfortunately Lookbook embeds can't be served via Embedly but I'll do some research to see if there is any sort of standard for notifying host pages about iframe content resizing events. This is basically the same technique that the Lookbook embed JS uses, just with a different postMessage format.)

Anyway, as long as people understand the disadvantages of going down the iframe-only route there is no reason not to make the URL a bit more accessible in the UI as you suggest, so that at least it is possible to add them to services like Notion.

Thanks for the suggestion and I'll update here when I've had a chance to add it in :-)

[leighhalliday]

Thank you @allmarkedup !! I'm happy to contribute by working on this if we're on the same page regarding direction!

[allmarkedup]

Thanks @leighhalliday - I missed your comment above but I've actually just got a PR up anyway that reworks the dropdown and displays the embed URL underneath the embed code.

I need to expand the docs a bit to include some info about manually using the embed URL in an iframe (and the downsides of not having automatic resizing etc) so it can be linked to from the dropdown. But in the meantime, is this the sort of thing you were thinking of? Was this the sort of thing you were looking for?