Allow Published mode/embed

One use case I’ve seen is embedding a kinopio space on a web page:

When displayed like this, I think it makes sense to remove a lot of the UI because people viewing the page will not be logged in and the intent is for them to view only. Here are some thoughts on what to remove:

  • Read-only badge
  • Add/search space buttons
  • Spectator avatars
  • Share button
  • Notifications
  • Sign Up or In button
  • The entire footer (except zoom bar)

And @jordanne had the idea to add the ability to set the default zoom.

Here’s what her space might look like after those changes:

To implement, perhaps it could be accomplished through URL parameters on the space.

  • published=1
  • zoom=60

So like

https://kinopio.club/cat-colony-cat-alogue-gK-d7WRJoF_ViJgoFJSaS?published=1&zoom=60?

2 Likes

would you expect to get this info/an <iframe> snippet from something like Share -> Embed?

the easiest/most-flexible way for me to do this is with the url scheme:

kinopio.club/embed?spaceId=ABC&zoom=100

1 Like

note to self: other ppl have requested this too (but I can’t find the emails)

1 Like

note to self: i notice that it’s quite common for embeds to include a link back to the source page

1 Like

wip what do you think so far?

the space name button is a link to the full space, is that too subtle? I want to keep things minimal so there’s more room content and to allow smaller embeds. cc @jordanne

2 Likes

Yeah, I think that makes a lot of sense from a user’s perspective.

No, not too subtle in my opinion. I really like how the blob logo is part of the button.

2 Likes

this is almost complete and will be shipped next week

2 Likes

I wonder if two other removals might be warranted:

  • connection button if the card has no connections
  • resize control
1 Like

you only see those controls if the space is editable by you, but I can force embed spaces to always be readonly to all

1 Like

Super stoked for this!

2 Likes

Might be a little late, but would the embed code or at least the part that would change with each space be accessible through the API?

2 Likes

don’t currently have a route for this, but the url scheme will be easy to predict on your own by changing the SPACEID

https://kinopio.club/embed/?spaceId=SPACEID&zoom=100

you can also change the zoom level from 40 to 100

2 Likes

live now :rocket:
https://twitter.com/KinopioClub/status/1471157556076756999

2 Likes

@jordanne using the webinspector on your site, this is what it’d look like with the new embed:

I used the following inline-styles on the iframe
Screen Shot 2021-12-15 at 11.43.40 AM

1 Like

Btw, using the embed-style URL works well as a “presentation mode” because it removes much of the chrome. You can’t get to that URL from a Private space (which makes sense since the main use cases are for embedding in a webpage), but it’s trivial to type it in manually (insert /embed).

1 Like

yup, when you embed a private space only you/collaborators will be able to see it. To avoid that confusion for the majority of ppl, pro-users/presenters will need to manually make embed urls

1 Like