Show Sidebar Hide Sidebar

How to Embed Graphs in a Blog or Website

Embed graphs created with Plotly

Step 1

Embed Plotly Graphs in a Blog or Website

When you embed a Plotly graph, it means you’re sharing your graph, your data and the code that describes your graph all in one place. You can embed any Plotly graph. The embedding process is the same whether you're creating graphs from the online workspace or using one of Plotly's APIs. With our interactive features, your readers have a whole new way to engage with your work. When you update a Plotly graph, the graph automatically updates on your blog or website. No need for manual updates!

We’re in Wired Magazine, The Washington Post, and the National Post.

Lego

You can embed a Plotly graph using HTML code or an iframe. These codes are located in Plotly's workspace, your list of files, also called your 'Organize', and your Profile page. It's also possible to share someone else’s graph, so keep reading to find out more. If you’re using wordpress.com, jump to the end of this page.

Step 2

From Your Workspace

To share a plot from your own workspace, go to SHARE on the left-hand side.

Workspace share option

The Share popup will display a link that you can add to a website and you have the option of embedding your plot as an HTML snippet or iframe. You can embed a public plot and everyone will be able to view it. Embedding a private plot means you and your collaborators will be able to see it. If you embed with a secret link, those that have that link will be able to see the plot. When you embed a private plot but don't add any collaborators, only you will be able to view it.

Sharing options

Step 3

From Your Organize

To share your own graph from your Organize, hover over your plot and click on the arrow icon. This will display the same Share popup as in the workspace where you'll find the embed codes.

Share from the Organize

Step 4

From Your Profile

Next is if you'd like to embed from your Profile page. You can get there by typing this URL:'http://plot.ly/~YOURUSERNAME' into your address bar, or by going to your username on the top right-hand side of Plotly's pages and selecting 'Profile' from the dropdown menu. Just like in your Organize, hover over the plot, but this time click on the Share icon to view the same Share popup.

Sharable link

Step 5

Share Another User's Plot

If you happen to be in Plotly's Feed and see a cool graph you want to share, click on the 'Sharing Link' at the bottom right-hand side of the plot.

Embed button

You can also share someone else's graph from their Viewplot, via their Shareable Link. If you don't happen to have this link, but do see their plot (in Plotly's Feed, for example), hover over the plot and click VIEW. Notice the sharing options located in the bottom right corner; click on the '</>' button.

Embed button

Step 6

Embed Grid

We've talked a lot about embedding Plotly graphs, but did you know that you can also embed your grid? Just like your plots, grids can be embedded in iframes.

You can find the embed code by going to your Organize or Profile page and hovering over the saved grid. Grids are saved as 'Private' by default, so it's important that you save your data as 'Public' or 'Private Link'.

Copy the iframe just as you would for the plot and paste it to your website or blog. This is an example of what your grid looks like when it's been embedded.

Embed grid

Step 7

Embed the div

Simply copy and paste the HTML snippet into your website or HTML application.

Final embedding code

If you need an iframe, feel free to use the example below. You’ll have to replace the URL of our graph with your own.

iframe code 1

If you are using a secret link with a private key, update the private link to include '.embed' before the '?share_key' term. Here's an example:

iframe code 2

You can control the width and the height of the iframe by adding 'width' and 'height' keywords into the HTML.

iframe code 3

The graph will autosize in the iframe container.

Step 8

Customize the iframe

You can add these URL query parameters to further customize the iframe.

Options

Step 9

Add the Code to Your Website

Copy the HTML snippet or iframe and paste it into your site's source code. For our example, we'll add a graph to our Plotly blog hosted by tumblr. We're going to add the HTML snippet just the way it is, but sometimes you'll find that the image needs to be resized. We’ve found trial and error is best.

How to embed plotly graphs in websites

This is how it appears after it's been posted.

Live embedded image

Step 10

Embed on WordPress

WordPress doesn’t support our HTML code or iframes, but we’ve come up with an easy solution for you. We developed a WordPress plugin which makes it easy to embed Plotly graphs direct from WordPress's admin.

Don't forget to check out our WordPress blog called Modern Data!

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to our Premium or Enterprise plans.