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!
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.
From Your Workspace
To share a plot from your own workspace, go to SHARE on the left-hand side.
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.
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.
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.
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.
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.
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 the div
Simply copy and paste the HTML snippet into your website or HTML application.
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.
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:
You can control the width and the height of the iframe by adding 'width' and 'height' keywords into the HTML.
The graph will autosize in the iframe container.
Customize the iframe
You can add these URL query parameters to further customize the iframe.
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)[http://www.tumblr.com]. 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.
This is how it appears after it's been posted.