• • This section is currently only available in english.

• Embedding basics
• Options
• Callbacks
• Full example

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>