More flexible embeds

because the layout is based on css media queries (for performance and maintainability reasons), I don’t think they can be set programmatically. I’ll have to think about that some more

2 Likes

We’re trying to embed into a Medium article so that it looks like the embed in this article of yours https://medium.com/glitch/create-without-limits-art-apps-on-glitch-85973d48b4ba (i.e. the ‘app’ view is visible by default, not ‘code’ or ‘both’). Medium uses Embedly, so doesn’t recognize the longer/formal Embed code you provide. It just wants a plain URL and doesn’t recognize that URL if parameters are added after the root.

What is the appropriate syntax so that the app view loads by default using and Embedly embed? (Thanks in advance!)

Jumping in the discussion

I might want to only share the App, not the Code panel, is this doable?

Also, can I choose which file is shown by default?

Confusingly, for Medium you have to use the project’s edit URL as the base - but the embed url parameters still work. For example, to embed with the app view use https://glitch.com/edit/#!/dx?path=README.md&sidebarCollapsed=true&previewSize=100 switching out the project name for yours.

2 Likes

No, not at the moment. I guess for now you can just use an iframe and the app’s publish URL if the platform you’re embedding on supports it.

Yes, whatever file you select in the filetree in the preview when defining the embed is the default selected file when displaying the embed.

1 Like

Works great :slight_smile: Thanks very much!

1 Like

For anyone having trouble embedding on Medium and just getting a hyperlink, I tried copying and pasting Gareth’s link above and editing my project name in on Medium which didn’t work.

You have to paste in the link with your project name already in it or Medium won’t think it’s an embed.

Is there a way to embed different pages? The Embedly integration only accepts glitch.com/*, and if you specify a ?path=public/other-page.html the code panel changes to other-page.html but the displayed page is always index.html. Would it be possible for the Glitch team to change the app preview to read from the path query param, or (perhaps because that would break previous embeds) add another query param that allows us to change the app preview? Perhaps appPreview?

My use case
I’d like to use a single Glitch project as an example with various demos & make a Medium post to accompany it. To do this cleanly, with various small demos, I’d like to add interactive examples as pages of the Glitch project.

I’d love to be able to (as described above) do https://glitch.com/edit/#!/caff?path=public/other-page.html?appPreview=public/other-page.html in order to embed a new example without making a whole new Glitch project.

3 Likes

we’re making some updates now so i’ll look into seeing whether we can do that

Fantastic, thank you!

@pketh

Is there a way to add a handle to the embed iframe to allow users to resize the embedded glitch without having to resize the page? Sometimes I would like to allow users to enlarge the embed either because the text is too small for them or because they want to see a large block of code in the glitch without scrolling.

Thanks

this won’t affect the text size, but when you’re making the embed you can drag the bottom of the embed preview to change the height that they see. Would that address your use case?

Also, if a user on a page uses the browser shortcuts for making the text bigger (eg cmd-+ on a mac), that’ll also make the text in glitch bigger.

I would prefer adding a handle to the bottom right corner so the user can resize it when viewing the glitch rather than me setting dimensions at creation time (we do that already).

@caraya what you’re asking for isn’t a feature that belongs in the Glitch embeds, but that you can build on whatever site you’re embedding it in! You’re probably looking for the resize CSS property—take a look at this little CodePen example I made to see how you can do it too!

1 Like

Will do. Thanks for the tip!

Would it ever be possible to customize or theme the appearance of the Glitch embed window?

1 Like

Specifically what kinds of things were you looking to customize? More embed customization options are something we’ll consider moreso in the future. There’s a chance that deep customization might be premium/paid options, but we’re still exploring that.

This is exactly what I need as well. Has there been any progress on this in the past year?

Re: More flexible embeds

This also would have been useful for us on https://web.dev right now.

I’ve got a Glitch demonstrating related use cases. Each use case is a different HTML page within a single Express-powered Glitch.

When embedding in Live App mode, Glitch doesn’t seem to provide any way for me to specify what page it should show. It always reverts to index.html. The path query parameter only affects what page is shown when your embed shows View Code mode. The workaround I guess is to create a separate Glitch for each use case but that’s a bummer.

Rob Dodson had an interesting idea: Is there any way to pass query parameter information from the Glitch embed URL to my Express server?

1 Like

Do you all have an official documentation page for the supported query parameters? This page is out-of-date. embedPreviewSize is now previewSize.