Размещение на странице

Виджет может быть размещён на странице двумя способами.

Простой способ

Просто вставьте на страницу следующий код:

<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>

Виджет появится на странице в том месте, куда был вставлен код. Этот способ хорошо подходит для простых статических страниц.

Продвинутый способ

Подключите на страницу js-файл виджета:

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

Добавьте на страницу div-элемент, внутри которого хотите разместить виджет:

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

Проинициализируйте виджет:

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

Обратите внимание на параметр container — в него передаётся id DOM-элемента, либо сам DOM-элемент. Этот способ подходит для более сложных случаев, когда требуется динамически создать виджет после открытия страницы (по нажатию на кнопку и т.п.).

<!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>