Embed a Progress Board on a website

You can embed a Makerble Progress Board in your website

This embed code lets you integrate the progress board into your own website.

Steps

Part 1: Get 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

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

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

• When you add the Embed Code the embedded board is previewed slightly differently

• 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

• Follow the Part 1 instruction to get the Embed Code for your Progress board

• Adjust the Height and Width of the Embedded board using the number of fields

• Then press Embed this board to generate fresh code

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