Frontend API reference
Embedding basics
For embedding LayoutBuddy, always add this line to the head of the HTML-file:
<script type="text/javascript" src="//tool.layoutbuddy.com/embed/"></script>
The most simple way to embed LayoutBuddy is the following:
<div id="layout_container"></div> <script type="text/javascript"> var layoutbuddy = new LayoutBuddy('YOUR_PUBLIC_KEY', 'YOUR_CONFIG_ID'); layoutbuddy.embed('layout_container', 'layoutbuddy'); </script>
Options
Nevertheless, most of the times you will need more options like:
Language:
layoutbuddy.language = 'de_DE';
Load template:
layoutbuddy.initWithId = 'LAYOUT_ID';
Translations:
layoutbuddy.translations = '{"ui.panel.template.Templates": "My-Super-Templates"}';
Hide LayoutBuddy after submitted layout:
layoutbuddy.hideOnSubmit = true;
Callbacks
After submission of layout:
layoutbuddy.onSubmitLayout = function(uid) { alert('Layout has been saved. Your ID: ' + uid); // your code to send this ID to your server to store it goes here };
After changing the layout size:
layoutbuddy.onChangedSize = function(width, height) { // use width and hide to provide custom functionalities };
Full example
A full example could look like this:
<div id="layout_container"></div> <script type="text/javascript"> var layoutbuddy = new LayoutBuddy('YOUR_PUBLIC_KEY', 'YOUR_CONFIG_ID'); layoutbuddy.language = 'de_DE'; layoutbuddy.initWithId = 'LAYOUT_ID'; layoutbuddy.translations = '{"ui.panel.template.Templates": "My-Super-Templates"}'; layoutbuddy.hideOnSubmit = true; layoutbuddy.onSubmitLayout = function(uid) { alert('Layout has been saved. Your ID: ' + uid); // your code to send this ID to your server to store it goes here }; layoutbuddy.embed('layout_container', 'layoutbuddy'); </script>