Embed a Progress Board on a website

Owned by Nitin Mishra (Unlicensed)
Last updated: Jul 25, 2023 by Matt Kepple

You can embed a Makerble Progress Board in your own website so that your results are displayed on the webpages of your choice.

How it works

  1. Make your board public

  2. Copy the embed code

  3. Paste the embed code into your website

To further style your Progress Board so that the background image, icons and cards are in line with your brand and your website’s look & feel, read this article on how to customise a Board’s design.

Steps

Part 1: Copy the Embed Code for the Progress board

  1. Select My Apps in the top menu.

  2. Select Boards.

  3. You arrive on the Boards page.

  4. Click on the lock icon.

  5. In the dropdown options select Everyone.

  6. Now, the share button would be enabled to get the embed code.

  7. Click the Share button.

  8. This will show a pop-up for links to embed and share the progress board.

    You can modify height and width according to your requirements.

Part 2: Paste the Embed Code into a webpage on your website

WordPress

Wordpress restricts the use of embedded features to

  1. Press the + button in WordPress to add a new block to a page.

  2. Select Shortcode

  3. The Shortcode block appears on the page

  4. Paste the Embed Code from Makerble into this field

  5. Press the Publish button in the top right corner of the page to save the page

  6. Your Makerble Progress board is now displayed on your web page with its own vertical scrollbar

  7. If you want the full length of the Progress Board to be displayed, adjust the height on Makerble from the Boards page and then generate a new Embed Code and follow these steps again.

 

Squarespace 7.1

  1. Follow the Part 1 instruction to get the Embed Code for your Progress Board

  2. Click the Add Block button

     

  3. In the popup that appears, select Add Block

     

  4. Select Embed

  5. This adds an empty block to your page

     

  6. Click the pencil icon to edit the block

  7. Select Code Snippet in the popup

     

  8. Click the Embed data button

  9. A text area appears

     

  10. Paste your board’s Makerble Embed Code into this section

     

  11. Click elsewhere on the page to close the popup

  12. A preview of your board appears

     

  13. Use the arrows at the edge to drag and resize the board

     

  14. Resize the board to the size you want it displayed

     

  15. You can also resize it vertically

     

  16. Press Done in the top left corner to save the page

  17. You will see your board displayed

     

  18. You might need to follow Squarespace’s instructions to disable scripts in the preview

Squarespace 7.0

  • However, even though the board is previewed as appearing larger than the blue outline of the board, the board will still display properly on the finished web page

Websites powered by Drupal, Episerver, Joomla, Sitecore, Umbraco, Wagtail, WildApricot, Wix, Weebly, and other CMSs (Content Management Systems) that support embedding

In Part 1: Get the Embed Code for the board

 

In Part 2: Paste the Embed Code into a webpage on your website

  • Use the Embed block option that’s available to you

  • If it looks like the board is taking up too little or too much space on the page (as shown in the example below)

  • You can resize the board by clicking on the Share button on the Board page and in the pop-up, there is an option for adjusting the height and width of the board.

  • Change the Height and Width

  • Then press Embed this board again. This will generate a new code and copy it to your clipboard. Embed this new code into your website