This article describes how to integrate the Latenode platform into your project using the SDK.

Container Setup Inside the Website

To use the SDK, you need to prepare a container where the iframe will be rendered. Ensure that the container is already present in the DOM tree.

SDK Configuration

Add the following tag to your website:

<script src="https://embedded.latenode.com/static/sdk/0.1.5.js"></script>

Once this script is executed, the LatenodeEmbeddedSDK class will be added to the global window object.

Methods of SDK

configure

The method allows rendering an iframe. To do this, you need to call the method on an instance of the LatenodeEmbeddedSDK class.

const latenodeSDK = new LatenodeEmbeddedSDK();
latenodeSDK.configure({
	allowCookies: true,
  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": 250,
    "buttons": {
      "createScenario": {
        "iconSvg": "",
        "type": "",
        "padding": "",
        "transparent": false
      },
      "startWithTemplate": {
        ... same structure as createScenario ...
      },
      "importScenario": {
        ... same structure as createScenario ...
      },
      "addNewScenario": {
        ... same structure as createScenario ...
      },
      "addNewFolder": {
        ... same structure as createScenario ...
      }
    },
    "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": {
        ... same structure as listTitleFont ...
      },
      "nodeDescriptionFont": {
        ... same structure as listTitleFont ...
      }
    },
    "actionBlock": {
      "buttons": {
        "runOnce": {
          "iconSvg": "",
          "type": "",
          "padding": "",
          "transparent": false
        },
        "deploy": {
          ... same structure as runOnce ... 
        },
        "save": {
          ... same structure as runOnce ...
        },
        "addNode": {
          ... same structure as runOnce ...
        },
        "aiNode": {
          ... same structure as runOnce ...
        },
        "aiBuilder": {
          ... same structure as runOnce ...
        },
        "alignNodes": {
          ... same structure as runOnce ...
        },
        "addSticker": {
          ... same structure as runOnce ...
        },
        "undo": {
          ... same structure as runOnce ...
        },
        "redo": {
          ... same structure as runOnce ...
        }
      },
      "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": {
          ... same structure as default ...
        },
        "hover": {
          ... same structure as default ...
        },
        "disabled": {
          ... same structure as default ...
        },
        "borderWidth": "2px",
        "borderRadius": "20px",
        "gap": "",
        "padding": ""
      },
      "primary": {
        "default": {
          ... same structure as default ...
        },
        "active": {
          ... same structure as default ...
        },
        "hover": {
          ... same structure as default ...
        },
        "disabled": {
          ... same structure as default ...
        },
        "borderWidth": "2px",
        "borderRadius": "20px",
        "gap": "",
        "padding": ""
      },
      "action": {
        "default": {
          "backgroundColor": "#233849",
          "textColor": "white",
          "borderColor": "#233849"
        },
        "active": {
          ... same structure as default ...
        },
        "hover": {
          ... same structure as default ...
        },
        "disabled": {
          ... same structure as default ...
        },
        "borderWidth": "2px",
        "borderRadius": "20px",
        "gap": "",
        "padding": ""
      },
      "success": {
        "default": {
          "backgroundColor": "#233849",
          "textColor": "white",
          "borderColor": "#233849"
        },
        "active": {
          ... same structure as default ...
        },
        "hover": {
          ... same structure as default ...
        },
        "disabled": {
          ... same structure as default ...
        },
        "borderWidth": "2px",
        "borderRadius": "20px",
        "gap": "",
        "padding": ""
      },
      "danger": {
        "default": {
          "backgroundColor": "#bf161f",
          "textColor": "white",
          "borderColor": "#bf161f"
        },
        "active": {
          ... same structure as default ...
        },
        "hover": {
          ... same structure as default ...
        },
        "disabled": {
          ... same structure as default ...
        },
        "borderWidth": "2px",
        "borderRadius": "20px",
        "gap": "",
        "padding": ""
      },
      "subtle": {
        "default": {
          "backgroundColor": "white",
          "textColor": "#2394ae",
          "borderColor": "#2394ae"
        },
        "active": {
          ... same structure as default ...
        },
        "hover": {
          ... same structure as default ...
        },
        "disabled": {
          ... same structure as default ...
        },
        "borderWidth": "2px",
        "borderRadius": "20px",
        "gap": "",
        "padding": ""
      },
      "text": {
        "default": {
          "backgroundColor": "",
          "textColor": "",
          "borderColor": ""
        },
        "active": {
          ... same structure as default ...
        },
        "hover": {
          ... same structure as default ...
        },
        "disabled": {
          ... same structure as default ...
        },
        "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');
});

This method returns a Promise that resolves once the iframe has been loaded and rendered inside the specified container.

Configuration Parameters