<!DOCTYPE HTML>

<html>
<head>
    <title>WiseMapping - Embedded Sample </title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
    <style>
        body {
            font-family: Arial, Tahoma;
            background: #a9a9a9;
            padding: 10px 30px;
        }

        iframe {
            border: 0;
        }

        #editor {
            width: 100%;
            text-align: center;

        }

        #code {
            border: 1px dashed #f5f5dc;
            padding: 10px;
            background: #838383;
        }
    </style>

    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

</head>
<body>
<div>
    <div id="doc">
        <h1>Embedded editor sample</h1>

        <p>
            This is a simple example of how WiseMapping can be embedded in a page.
            Embedding WiseMapping editor is such simple as copying this line in your page:
        </p>
        <div id="code">&lt;iframe src="embedded.html?confUrl=html/container.json" width="800" height="600"&gt;&lt;/iframe&gt;</div>
        <p>
            The container.json file contains a set of properties that must be configured. Properties:
        </p>
        <ul>
            <li>size: Must match with the size of the iframe</li>
            <li>zoom: Scale to be applied to the map</li>
            <li>readOnly: If the map could be modified.</li>
            <li>persistenceManager: Persistence managers to be used. By default, local browser storage is used.</li>
            <li>mapId: UUID of the map to be loaded.</li>
            <li>container: div element where the mindmap will be embedded..</li>

        </ul>
        <p>
            It's important to point out that embedded.html is a static html page that it's mean to be a template page
            for advanced customization.  In few words, go ahead and modify it.
        </p>

    </div>
    <div id="editor">
        <iframe src="embedded.html?confUrl=html/container.json" width="800" height="400"></iframe>
    </div>
</div>
</body>
</html>