Установка встраиваемого SDK

Настройка контейнера на сайте

Для использования SDK необходимо подготовить контейнер, в котором будет отрисовываться iframe. Убедитесь, что контейнер уже присутствует в DOM-дереве.

Настройка SDK

Добавьте следующий тег на ваш сайт:

<script src="https://embedded.nodul.ru/static/sdk/0.1.5.js"></script>

После выполнения этого скрипта класс LatenodeEmbeddedSDK будет добавлен в глобальный объект window.

Методы SDK

configure

Метод позволяет отрисовать iframe. Для этого необходимо вызвать метод на экземпляре класса LatenodeEmbeddedSDK.

const latenodeSDK = new LatenodeEmbeddedSDK();
latenodeSDK.configure({
  token: 'USER_JWT_TOKEN',
  container: 'lowCodeDivContainer',
  ui: {
  "scenarios": {
    "hideEmptyScenariosGreetings": false,
    "hideExploreAppsButton": true,
    "logo": {
      "src": "YOUR_LOGO_URL",
      "style": {
        "width": 150,
        "height": 150,
        "margin": ""
      }
    },
    "activeStateFilterStyle": "",
    "activeStateFilter": {
      "variant": "",
      "selectedBgColor": "",
      "selectedTextColor": "",
      "unselectedBgColor": "",
      "unselectedTextColor": ""
    },
    "foldersPanelWidth": 0,
    "buttons": {
      "createScenario": {
        "iconSvg": "",
        "type": "",
        "padding": "",
        "transparent": false
      },
      "startWithTemplate": {
        "iconSvg": "",
        "type": "",
        "padding": "",
        "transparent": false
      },
      "importScenario": {
        "iconSvg": "",
        "type": "",
        "padding": "",
        "transparent": false
      },
      "addNewScenario": {
        "iconSvg": "",
        "type": "",
        "padding": "",
        "transparent": false
      },
      "addNewFolder": {
        "iconSvg": "",
        "type": "",
        "padding": "",
        "transparent": false
      }
    },
    "reverseMainActionBtnsOrder": false,
    "paddingTop": "",
    "scenariosTable": {
      "scenarioIconBgColor": "",
      "sortArrow": {
        "activeColor": "",
        "inactiveColor": ""
      }
    },
    "searchInput": {
      "borderRadius": ""
    }
  },
  "scenario": {
    "showGrid": false,
    "nodeTypeList": {
      "requestNewAppURL": "YOUR_REQUESTING_APP_URL",
      "categoriesSideBar": {
        "backgroundColor": ""
      },
      "nodeTypeListNodeBackgroungSvg": "",
      "listTitleFont": {
        "fontSize": "",
        "fontWeight": "",
        "fontFamily": "",
        "color": ""
      },
      "nodeTitleFont": {
        "fontSize": "",
        "fontWeight": "",
        "fontFamily": "",
        "color": ""
      },
      "nodeDescriptionFont": {
        "fontSize": "",
        "fontWeight": "",
        "fontFamily": "",
        "color": ""
      }
    },
    "actionBlock": {
      "buttons": {
        "runOnce": {
          "iconSvg": "",
          "type": "",
          "padding": "",
          "transparent": false
        },
        "deploy": {
          "iconSvg": "",
          "type": "",
          "padding": "",
          "transparent": false
        },
        "save": {
          "iconSvg": "",
          "type": "",
          "padding": "",
          "transparent": false
        },
        "addNode": {
          "iconSvg": "",
          "type": "",
          "padding": "",
          "transparent": false
        },
        "aiNode": {
          "iconSvg": "",
          "type": "",
          "padding": "",
          "transparent": false
        },
        "aiBuilder": {
          "iconSvg": "",
          "type": "",
          "padding": "",
          "transparent": false
        },
        "alignNodes": {
          "iconSvg": "",
          "type": "",
          "padding": "",
          "transparent": false
        },
        "addSticker": {
          "iconSvg": "",
          "type": "",
          "padding": "",
          "transparent": false
        },
        "undo": {
          "iconSvg": "",
          "type": "",
          "padding": "",
          "transparent": false
        },
        "redo": {
          "iconSvg": "",
          "type": "",
          "padding": "",
          "transparent": false
        }
      },
      "mainLineStyle": {
        "background": "",
        "paddingTop": 0,
        "paddingBottom": 0,
        "paddingLeft": 0,
        "paddingRight": 0,
        "boxShadow": "",
        "borderRadius": ""
      },
      "activeSwitchLabelFont": {
        "fontSize": "",
        "fontWeight": "",
        "fontFamily": "",
        "color": ""
      }
    },
    "nodeDataPanel": {
      "operators": {
        "textColor": "",
        "backgroundColor": ""
      },
      "buttons": {
        "newAuthorization": {
          "iconSvg": "",
          "type": "",
          "padding": "",
          "transparent": false
        }
      }
    },
    "scenarioNodeBackgroundSvg": "",
    "templates": {
      "buttons": {
        "cloneThisTemplate": {
          "iconSvg": "",
          "type": "default",
          "padding": "4px 16px",
          "transparent": true
        }
      }
    }
  },
  "main": {
    "hideSideMenu": false,
    "documentationURL": "YOUR_DOCS_URL"
  },
  "theme": {
    "font": {
      "fontFamily": "",
      "load": {
        "googleFontFamily": "",
        "custom": {
          "url": "",
          "format": ""
        }
      }
    },
    "primaryColor": "#2394ae",
    "button": {
      "default": {
        "default": {
          "backgroundColor": "white",
          "textColor": "#2394ae",
          "borderColor": "#2394ae"
        },
        "active": {
          "backgroundColor": "white",
          "textColor": "#1c768b",
          "borderColor": "#1c768b"
        },
        "hover": {
          "backgroundColor": "white",
          "textColor": "#4fa9be",
          "borderColor": "#4fa9be"
        },
        "disabled": {
          "backgroundColor": "white",
          "textColor": "#7bbfce",
          "borderColor": "#7bbfce"
        },
        "borderWidth": "2px",
        "borderRadius": "20px",
        "gap": "",
        "padding": ""
      },
      "primary": {
        "default": {
          "backgroundColor": "#2394ae",
          "textColor": "white",
          "borderColor": "#2394ae"
        },
        "active": {
          "backgroundColor": "#1c768b",
          "textColor": "white",
          "borderColor": "#1c768b"
        },
        "hover": {
          "backgroundColor": "#4fa9be",
          "textColor": "white",
          "borderColor": "#4fa9be"
        },
        "disabled": {
          "backgroundColor": "#7bbfce",
          "textColor": "white",
          "borderColor": "#7bbfce"
        },
        "borderWidth": "2px",
        "borderRadius": "20px",
        "gap": "",
        "padding": ""
      },
      "action": {
        "default": {
          "backgroundColor": "#233849",
          "textColor": "white",
          "borderColor": "#233849"
        },
        "active": {
          "backgroundColor": "#1c2d3a",
          "textColor": "white",
          "borderColor": "#1c2d3a"
        },
        "hover": {
          "backgroundColor": "#4f606d",
          "textColor": "white",
          "borderColor": "#4f606d"
        },
        "disabled": {
          "backgroundColor": "#7b8892",
          "textColor": "white",
          "borderColor": "#7b8892"
        },
        "borderWidth": "2px",
        "borderRadius": "20px",
        "gap": "",
        "padding": ""
      },
      "success": {
        "default": {
          "backgroundColor": "#233849",
          "textColor": "white",
          "borderColor": "#233849"
        },
        "active": {
          "backgroundColor": "#1c2d3a",
          "textColor": "white",
          "borderColor": "#1c2d3a"
        },
        "hover": {
          "backgroundColor": "#4f606d",
          "textColor": "white",
          "borderColor": "#4f606d"
        },
        "disabled": {
          "backgroundColor": "#7b8892",
          "textColor": "white",
          "borderColor": "#7b8892"
        },
        "borderWidth": "2px",
        "borderRadius": "20px",
        "gap": "",
        "padding": ""
      },
      "danger": {
        "default": {
          "backgroundColor": "#bf161f",
          "textColor": "white",
          "borderColor": "#bf161f"
        },
        "active": {
          "backgroundColor": "#991219",
          "textColor": "white",
          "borderColor": "#991219"
        },
        "hover": {
          "backgroundColor": "#cc454c",
          "textColor": "white",
          "borderColor": "#cc454c"
        },
        "disabled": {
          "backgroundColor": "#d97379",
          "textColor": "white",
          "borderColor": "#d97379"
        },
        "borderWidth": "2px",
        "borderRadius": "20px",
        "gap": "",
        "padding": ""
      },
      "subtle": {
        "default": {
          "backgroundColor": "white",
          "textColor": "#2394ae",
          "borderColor": "#2394ae"
        },
        "active": {
          "backgroundColor": "white",
          "textColor": "#1c768b",
          "borderColor": "#1c768b"
        },
        "hover": {
          "backgroundColor": "white",
          "textColor": "#4fa9be",
          "borderColor": "#4fa9be"
        },
        "disabled": {
          "backgroundColor": "white",
          "textColor": "#7bbfce",
          "borderColor": "#7bbfce"
        },
        "borderWidth": "2px",
        "borderRadius": "20px",
        "gap": "",
        "padding": ""
      },
      "text": {
        "default": {
          "backgroundColor": "",
          "textColor": "",
          "borderColor": ""
        },
        "active": {
          "backgroundColor": "",
          "textColor": "",
          "borderColor": ""
        },
        "hover": {
          "backgroundColor": "",
          "textColor": "",
          "borderColor": ""
        },
        "disabled": {
          "backgroundColor": "",
          "textColor": "",
          "borderColor": ""
        },
        "borderWidth": "2px",
        "borderRadius": "20px",
        "gap": "",
        "padding": ""
      }
    },
    "input": {
      "borderRadius": "20px"
    },
    "switch": {
      "checkedBackgroundColor": "",
      "uncheckedBackgroundColor": "",
      "height": "",
      "width": "",
      "padding": ""
    },
    "scenario": {
      "backgroundColor": "#f1f1f1",
      "nodeTypeList": {
        "nodeBackgroundSize": ""
      },
      "historyDrawer": {
        "headerBgColor": "",
        "alert": {
          "backgroundColor": "",
          "borderColor": "",
          "iconColor": "",
          "linkColor": ""
        }
      },
      "unsavedChangesModal": {
        "mainActionBtnColor": ""
      },
      "nodeSettings": {
        "headerBgColor": "#256AF4",
        "bodyBgColor": "#CFD8DB",
        "footerBgColor": "#1A1B20"
      }
    },
    "templates": {
      "tabBtnsColor": "red"
    }
  },
  "translations": {
    "currentLng": "",
    "overrides": {
      "en": {
        "latenode_scenariosPage_allScenariosTitleLabel": "All scenarios"
      }
    }
  }
},
  navigation: {
    handler: ({ route }) => {
      console.log('user navigated to ' + route);
    }
  }
}).then(() => {
 console.log('iframe rendered');
});

Этот метод возвращает Promise, который разрешается после загрузки и отрисовки iframe внутри указанного container.

Параметры конфигурации

auth:
  - field: token
    type: string
    required: true
    description: JWT-токен, сгенерированный для пользователя

embed:
  - field: container
    type: string | HTMLElement
    required: true
    description: ID контейнера или ссылка на DOM-элемент, где будет отрисован iframe

ui:
  scenarios:
    - field: hideEmptyScenariosGreetings
      type: boolean
      required: false
      description: Скрывать приветственное сообщение, когда список сценариев пуст

    - field: hideExploreAppsButton
      type: boolean
      required: false
      description: Скрывать кнопку "Explore Apps"

    - field: logo.src
      type: string
      required: false
      description: URL кастомного логотипа

    - field: logo.style.width
      type: number | string
      required: false
      description: Ширина логотипа (px или CSS значение)

    - field: logo.style.height
      type: number | string
      required: false
      description: Высота логотипа (px или CSS значение)

    - field: logo.style.margin
      type: string
      required: false
      description: CSS margin для логотипа

    - field: activeStateFilterStyle
      type: string
      required: false
      description: Стиль фильтра активного состояния (например, "tabs")

    - field: activeStateFilter.variant
      type: string
      required: false
      description: Вариант фильтра активного состояния

    - field: activeStateFilter.selectedBgColor
      type: string
      required: false
      description: Цвет фона для выбранного фильтра

    - field: activeStateFilter.selectedTextColor
      type: string
      required: false
      description: Цвет текста для выбранного фильтра

    - field: activeStateFilter.unselectedBgColor
      type: string
      required: false
      description: Цвет фона для невыбранного фильтра

    - field: activeStateFilter.unselectedTextColor
      type: string
      required: false
      description: Цвет текста для невыбранного фильтра

    - field: foldersPanelWidth
      type: number
      required: false
      description: Ширина панели папок в px

    - field: buttons.[name].iconSvg
      type: string
      required: false
      description: Иконка для кнопки сценария (inline SVG)

    - field: buttons.[name].type
      type: string
      required: false
      description: Тип кнопки (например, "primary", "text")

    - field: buttons.[name].padding
      type: string
      required: false
      description: CSS padding для кнопки

    - field: buttons.[name].transparent
      type: boolean
      required: false
      description: Флаг прозрачного фона для кнопки

    - field: reverseMainActionBtnsOrder
      type: boolean
      required: false
      description: Обратный порядок основных кнопок действий

    - field: paddingTop
      type: string
      required: false
      description: Отступ сверху области сценариев

    - field: scenariosTable.scenarioIconBgColor
      type: string
      required: false
      description: Цвет фона иконок сценариев

    - field: scenariosTable.sortArrow.activeColor
      type: string
      required: false
      description: Цвет активной стрелки сортировки

    - field: scenariosTable.sortArrow.inactiveColor
      type: string
      required: false
      description: Цвет неактивной стрелки сортировки

    - field: searchInput.borderRadius
      type: string
      required: false
      description: Радиус границы для поля поиска

  scenario:
    - field: showGrid
      type: boolean
      required: false
      description: Показывать сетку фона в редакторе сценариев

    - field: nodeTypeList.requestNewAppURL
      type: string
      required: false
      description: URL для запроса новой интеграции приложения

    - field: nodeTypeList.categoriesSideBar.backgroundColor
      type: string
      required: false
      description: Цвет фона боковой панели в списке типов узлов

    - field: nodeTypeList.nodeTypeListNodeBackgroungSvg
      type: string
      required: false
      description: Кастомный фоновый SVG для списка типов узлов

    - field: nodeTypeList.listTitleFont.[*]
      type: string
      required: false
      description: Свойства шрифта для заголовков списков

    - field: nodeTypeList.nodeTitleFont.[*]
      type: string
      required: false
      description: Свойства шрифта для заголовков узлов

    - field: nodeTypeList.nodeDescriptionFont.[*]
      type: string
      required: false
      description: Свойства шрифта для описаний узлов

    - field: actionBlock.buttons.[name].iconSvg
      type: string
      required: false
      description: Inline SVG иконка для кнопки действия

    - field: actionBlock.buttons.[name].type
      type: string
      required: false
      description: Тип кнопки (primary, text и т.д.)

    - field: actionBlock.buttons.[name].padding
      type: string
      required: false
      description: CSS padding для кнопки действия

    - field: actionBlock.buttons.[name].transparent
      type: boolean
      required: false
      description: Флаг прозрачного фона для кнопки действия

    - field: actionBlock.mainLineStyle.[*]
      type: string | number
      required: false
      description: Настройки CSS стиля для основной линии действий

    - field: actionBlock.activeSwitchLabelFont.[*]
      type: string
      required: false
      description: Свойства шрифта для меток активного переключателя

    - field: nodeDataPanel.operators.textColor
      type: string
      required: false
      description: Цвет текста для операторов в панели данных узла

    - field: nodeDataPanel.operators.backgroundColor
      type: string
      required: false
      description: Цвет фона для операторов в панели данных узла

    - field: nodeDataPanel.buttons.newAuthorization.[*]
      type: string | boolean
      required: false
      description: Свойства кнопки для действия "New Authorization"

    - field: scenarioNodeBackgroundSvg
      type: string
      required: false
      description: Фоновый SVG для узлов сценария

    - field: templates.buttons.cloneThisTemplate.iconSvg
      type: string
      required: false
      description: Иконка для кнопки клонирования сценария (inline SVG)

    - field: templates.buttons.cloneThisTemplate.type
      type: string
      required: false
      description: Тип кнопки (например, "primary", "text")

    - field: templates.buttons.cloneThisTemplate.padding
      type: string
      required: false
      description: CSS padding для кнопки

    - field: templates.buttons.cloneThisTemplate.transparent
      type: string
      required: false
      description: Флаг прозрачного фона для кнопки

  main:
    - field: hideSideMenu
      type: boolean
      required: false
      description: Скрывать главное боковое навигационное меню

    - field: documentationURL
      type: string
      required: false
      description: Кастомная ссылка на документацию

  theme:
    - field: font.fontFamily
      type: string
      required: false
      description: Базовое семейство шрифтов

    - field: font.load.googleFontFamily
      type: string
      required: false
      description: Название семейства Google Font для загрузки

    - field: font.load.custom.url
      type: string
      required: false
      description: URL кастомного шрифта

    - field: font.load.custom.format
      type: string
      required: false
      description: Формат кастомного шрифта (woff2, ttf и т.д.)

    - field: primaryColor
      type: string
      required: false
      description: Основной акцентный цвет

    - field: button.[type].[state].[*]
      type: string
      required: false
      description: Стили кнопок по типу и состоянию

    - field: input.borderRadius
      type: string
      required: false
      description: Радиус границы для полей ввода

    - field: switch.[*]
      type: string | number
      required: false
      description: Свойства стиля элемента переключателя

    - field: scenario.backgroundColor
      type: string
      required: false
      description: Цвет фона области сценария

    - field: scenario.nodeTypeList.nodeBackgroundSize
      type: string
      required: false
      description: Размер фонового изображения узла в сценарии

    - field: scenario.historyDrawer.headerBgColor
      type: string
      required: false
      description: Цвет фона заголовка ящика истории

    - field: scenario.historyDrawer.alert.[*]
      type: string
      required: false
      description: Стили предупреждений в ящике истории

    - field: scenario.unsavedChangesModal.mainActionBtnColor
      type: string
      required: false
      description: Цвет основной кнопки действия в модальном окне несохранённых изменений

    - field: scenario.nodeSettings.headerBgColor
      type: string
      required: false
      description: Цвет фона заголовка всплывающего окна настроек узла

    - field: scenario.nodeSettings.bodyBgColor
      type: string
      required: false
      description: Цвет фона тела всплывающего окна настроек узла

    - field: scenario.nodeSettings.footerBgColor
      type: string
      required: false
      description: Цвет фона нижнего колонтитула всплывающего окна настроек узла

    - field: templates.tabBtnsColor
      type: string
      required: false
      description: Цвет выбранной вкладки

  translations:
    - field: currentLng
      type: string
      required: false
      description: Текущий языковой код (например, "en", "ru")

    - field: overrides.[lng].[key]
      type: string
      required: false
      description: Переопределение строки перевода для конкретного языка

navigation:
  - field: navigation.handler
    type:
      (data: { route: string }) => void
    required: false
    description: Обработчик события навигации внутри iframe. Эта функция будет вызываться каждый раз при изменении маршрута приложения

navigate

Этот метод позволяет выполнять навигацию внутри iframe. Например:

LatenodeSDK.navigate({ to: '/scenarios' });

cleanup

SDK имеет побочные эффекты при работе. Для корректного завершения работы с iframe рекомендуется вызывать метод cleanup, который удалит все зарегистрированные обратные вызовы в window, например:

LatenodeSDK.cleanup();

На этой странице