Feature Request: Embedding

As a visualization author who also maintains an external Web page (e.g. a blog post, news article, course site, personal page), I want to be able to embed visualizations from VizHub into my external Web pages.

This screenshot of an image from Bizmundo/dataviz-final-project gives a nice idea for the embed UI design.

  • Fullscreen works as normal
  • Side-by-side button links into the VizHub viz

Maybe the VizHub logo could be there in the lower left corner.

Hi Curran,
This would be a great feature. Is there a way to package up these Vizhub projects to embed elsewhere?

Right now you can click “export” and get a .zip file with the runnable HTML page and pre-built JavaScript bundle. You can run that export any place you can run a normal HTML page (e. g. using GitHub Pages, or any hosting provider).

To develop the code further outside of VizHub, you’ll need to navigate to the unzipped files, run npm install (first time only) then npm run build to re-generate bundle.js.

The embed feature would be great to have, though, so you could directly embed from VizHub without any additional work.

Great, thanks. I think the embed feature would be very useful. It seems there are many others that allow for this, either embed code or the embed URL.

1 Like

Also consider changing the icon to have the arrow pointing down. This looks like a function to upload a file vs. downloading the file.

2 Likes

You know, I do agree with this. I’ve had this thought before.

Tracking as a separate topic: Feature Request: Down Arrow for Export

FWIW this is what the UI looked like in the original datavis.tech:

image

Actually not too bad. Concise and to the point!

Here’s what the YouTube flow looks like, which is pretty much the gold standard in a way:

image

We would indeed like to have a space like this to configure settings for the embed. One of which would be to toggle whitelabel embeeding (which you can only do on the paid plan).

If whitelabel embedding is not enabled, the embed will show the VizHub logo in perhaps a footer, which might contain the title and author avatar as well. Clicking on the footer will take the viewer into VizHub (similar to YouTube embeds).

We already have an entry point in the desgns for “share”. It looks like this:

image

Preliminary ideas for design tasks here:

  • Interstitial “share” state, which provides
    • an area to copy the link for sharing (and maybe some indication that you can share the link in social media and it will unfurl nicely)
    • (no need to have popups for each social media platform like YouTube does)
    • an option to “embed”, which will go one level deeper in the interface.
  • The “embed” state, which will provide
    • an HTML snippet for the viewer to copy,
    • a preview of what the embed will look like, and
    • an option to toggle whitelabel embedding on and off
      • if not on paid plan, indicate that the feature is only available on paid plans
      • include call to action to upgrade (link to pricing page)

You can preview this in Figma as well of course, but here is the beginnings of the share panel:

and here is the beginnings of the embed panel:

I’m sure some of the details will need adjusting but this can provide a framework for thinking about updates

Whoaah this is so sweet!

an option to toggle whitelabel embedding on and off

I have suggested a third kind of embed type: vizhub page.

If taken up, this could be offered as a choice, something like

Embed…

( ) visualization
( ) white label visualization
(O) [static] vizhub page reference

…each of which would either need a short explanation, and/or - as suggested here - a preview after selection.

Here is a mock up:

[Edit: It might be helpful to use the words interactive/static to the descriptions, to help users know what they are getting.]

Elegant mock up! In fact I’m working on this UI today. Here’s an iteration of your idea based on the existing designs: