Allow Published mode/embed

[bentsai]

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

• https://pawcatguide.com/cat-board-of-advisors
• Everything for Cat | Jordanne

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?

[pirijan]

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

[pirijan]

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

[pirijan]

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

[pirijan]

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

[bentsai]

@pirijan

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

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

@pirijan

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

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

[pirijan]

this is almost complete and will be shipped next week

[bentsai]

I wonder if two other removals might be warranted:

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

[pirijan]

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

[kordumb]

Super stoked for this!

[kordumb]

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?

[pirijan]

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

[pirijan]

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

[pirijan]

@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

[bentsai]

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

[pirijan]

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