Lookbook preview embed not configured for external sites

[Leigh Halliday]

Describe the bug

The "embed" preview button shares some code that says it is embeddable in lookbook pages or on external pages. I don't believe this embed would work on external pages without the necessary JS to read the custom HTML tag and convert it into an iframe that is "embedded".

<lookbook-embed app="http://localhost:3000/lookbook/" preview="WB::Forms::FormTypographyComponentPreview" scenario="headings"></lookbook-embed>

Perhaps it is just HTML I am not familiar with... but in our scenario I was actually looking for the URL that would be in an iframe, because I wanted to embed this preview within Notion.

To Reproduce

When viewing a preview, click the embed button to get the embed source code.

Expected behavior

Could we have a separate button or section that more easily allows for external pages? I'm guessing that would be an iframe tag or even the URL that you would use with an iframe.

For us at Wrapbook, we're actually looking to embed it into Notion, so what I did (after changing this setting config.lookbook.preview_embeds.policy = "ALLOWALL") is to copy the iframe URL and then do /embed within Notion and paste that iframe URL.

Screenshots

Working in Notion woohoo!

Version numbers

Please complete the following information:

• Lookbook: 2.0.0
• ViewComponent: 3.0.0
• Rails: 7.0.4.3
• Ruby: 3.1.3

Additional context

Add any other context about the problem here.

[Mark Perkins]

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 :-)

[Leigh Halliday]

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

[Mark Perkins]

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?

[Leigh Halliday]

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!