Embed a Progress Board on a website
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
Make your board public
Copy the embed code
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
Select My Apps in the top menu.
Select Boards.
You arrive on the Boards page.
Click on the lock icon.
In the dropdown options select Everyone.
Now, the share button would be enabled to get the embed code.
Click the Share button.
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
http://Wordpress.org Sites that are self-hosted
http://Wordpress.com Sites that are on the Business subscription
Press the + button in WordPress to add a new block to a page.
Select Shortcode
The Shortcode block appears on the page
Paste the Embed Code from Makerble into this field
Press the Publish button in the top right corner of the page to save the page
Your Makerble Progress board is now displayed on your web page with its own vertical scrollbar
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
Follow the Part 1 instruction to get the Embed Code for your Progress Board
Click the Add Block button
In the popup that appears, select Add Block
Select Embed
This adds an empty block to your page
Click the pencil icon to edit the block
Select Code Snippet in the popup
Click the Embed data button
A text area appears
Paste your board’s Makerble Embed Code into this section
Click elsewhere on the page to close the popup
A preview of your board appears
Use the arrows at the edge to drag and resize the board
Resize the board to the size you want it displayed
You can also resize it vertically
Press Done in the top left corner to save the page
You will see your board displayed
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