How can I embed a Jupyter notebook into a Webflow site?

Published on
September 22, 2023

To embed a Jupyter notebook into a Webflow site, you can follow these steps:

  1. Create an HTML embed code for the Jupyter notebook:
  • Open the Jupyter notebook you want to embed.
  • Go to the "File" menu and select "Download as" and then "HTML".
  • Save the HTML file to your local machine.
  1. Upload the HTML file to your Webflow site:
  • Sign in to your Webflow account and go to the Webflow Designer.
  • Select the page where you want to embed the Jupyter notebook.
  • Click on the "+" button to add an element to the page.
  • Choose the "Embed" option from the element menu.
  • In the embed settings, click on the "Upload file" button and select the HTML file you downloaded in step 1.
  1. Configure the embed element:
  • Once the HTML file is uploaded, you will see a preview of the Jupyter notebook.
  • You can resize and position the embed element on your page.
  • You can also customize the appearance and style of the embed element using the Webflow Designer.
  1. Publish your changes:
  • After you have configured the embed element to your liking, click on the "Publish" button to make your changes live on your Webflow site.

By following these steps, you can easily embed a Jupyter notebook into a Webflow site and share your interactive notebooks with your website visitors.