The simplest way to put Blockly into a webpage is to inject it into an empty'div' tag.
Injection
First, include the core Blockly script and the core blocks set. Note that thepath may vary, depending on where your page is in relation to Blockly:
<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>
Then include the messages for the user's language (in this case English):
<script src="msg/js/en.js"></script>
Add an empty div somewhere in the page's body and set its size:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
Add the structure of the toolbox (see Defining the Toolboxfor more information) anywhere on the page:
<xml id="toolbox" style="display: none">
<block type="controls_if"></block>
<block type="controls_repeat_ext"></block>
<block type="logic_compare"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
Finally, call the following to inject Blockly into an empty div. This scriptshould be at the bottom of the page, or called by the onload event.
<script>
var workspacePlayground = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
</script>
The workspacePlayground variable is not currently used, but it will becomeimportant later when one wants to save the blocks or generate code.If more than one instance of Blockly is injected onto the same page, ensurethat each returned workspace is stored in a different variable.
Test the page in a browser. You should see Blockly's editor filling the div,with seven blocks in the toolbox.Here is a live demo.
