Placing on a Page

The widget can be placed on a page in two ways.

Simple way

Simply insert the following code into the page:

<script
    charset="utf-8"
    src="https://floors-widget.api.2gis.ru/loader.js"
    id="dg-floors-widget-loader"
></script>
<script charset="utf-8">
    DG.FloorsWidget.init({
        width: '960px',
        height: '600px',
        initData: {
            complexId: '141373143573143',
        },
    });
</script>

The widget will appear on the page where the code was inserted. This method is suitable for simple static pages.

Advanced way

Include the widget's JS file on the page:

<script
    charset="utf-8"
    src="https://floors-widget.api.2gis.ru/loader.js"
    id="dg-floors-widget-loader"
></script>

Add a div element to the page inside which you want to place the widget:

<div id="mywidget"></div>

Initialize the widget:

DG.FloorsWidget.init({
    container: 'mywidget',
    width: '960px',
    height: '600px',
    initData: {
        complexId: '141373143573143',
    },
});

Note the container parameter contains the DOM element Id or the DOM element itself. This method is suitable for more complex cases where it is necessary to dynamically create a widget after opening the page (by pressing a button, etc.).

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FloorsJS API</title>
    <meta name="description" content="Floors widget example" />
    <style>
        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <script charset="utf-8" src="https://floors-widget.api.2gis.ru/loader.js" id="dg-floors-widget-loader"></script>
    <script charset="utf-8">
        DG.FloorsWidget.init({
            width: '100%',
            height: '100%',
            initData: {
                complexId: '141373143573143',
            },
        });
    </script>
</body>

</html>