--- title: Low-Code Integration Designer description: When you build an integration, you can build it in the low-code designer, or as a TypeScript project in your favorite IDE using the Code-Native SDK. This article covers how to build an integration wit --- [Skip to content](https://support.resnet.ai/migration/low-code-integration-designer#main-content) English Show submenu for translations ![](https://support.resnet.ai/hs-fs/hubfs/primary_logo%20(1).jpg?width=6782&height=2762&name=primary_logo%20(1).jpg) Open main navigation Close main navigation - English Show submenu for translations - Contact us Contact us How can we help you? - There are no suggestions because the search field is empty. 1. [SUPPORT CENTER](https://support.resnet.ai/migration?hsLang=en) 2. [Workflow Automation](https://support.resnet.ai/migration/workflow-automation?hsLang=en) 3. [Build Integrations](https://support.resnet.ai/migration/workflow-automation?hsLang=en#build-integrations) # Low-Code Integration Designer When you build an integration, you can build it in the low-code designer, or as a TypeScript project in your favorite IDE using the [Code-Native SDK](https://prismatic.io/docs/integrations/code-native/). This article covers how to build an integration with the low-code designer. After [creating a new integration](https://prismatic.io/docs/integrations/low-code-integration-designer/#creating-a-new-integration) or selecting one from your list of integrations, you will find yourself in the low-code **integration designer**. Here, you can build, test, and publish integrations. The integration designer contains four important features: 1. Several configuration menus let you edit your integration's name, description, and other metadata, publish a version of your integration, add it to your integration marketplace, deploy an instance to a customer, and more. 2. The step configuration drawer lets you configure steps of your integration, change runtime/webhook configuration, etc. 3. The testing drawer lets you [run tests of your integration](https://prismatic.io/docs/integrations/low-code-integration-designer/testing/), supply your integration with sample payloads, and see results of your integration test runs. 4. The majority of the page is taken up by the integration editor pane. Here, you can add steps to your integration, create branches and loops, and generally arrange the flow of your integration. You can also create multiple **flows** - each flow has a [trigger](https://prismatic.io/docs/integrations/triggers/) and series of steps to be executed. ![Prismatic integration designer highlighting configuration drawer, testing drawer, version history drawer, and integration editor pane](https://prismatic.io/docs/img/integrations/low-code-integration-designer/integration-designer.png) #### Creating a new integration To create a new integration in the web app, click **Integrations** from the left-side menu, and then click the **+ Add Integration** button in the upper-right. When you create a new integration you have a few options: - You can create a **blank** integration from scratch by selecting **Quickstart**. - Behind the scenes, integrations are saved as [YAML definitions](https://prismatic.io/docs/configure-prismatic/integrations-multiple-regions/#exporting-an-integrations-yaml-definition). You can load a YAML file from your clipboard or from a file by selecting **Import**. - You can start from an existing [template](https://prismatic.io/docs/integrations/low-code-integration-designer/#integration-templates) - you can create your own template, or you can select a Prismatic-built example template. ![Configure a new integration](https://prismatic.io/docs/img/integrations/low-code-integration-designer/configure-new-integration.png) You will be prompted to give your integration a **name** and to select a trigger for the first flow of your integration. The trigger is what will cause one of your integration's flows to run, and you can change your trigger at any time. ![Add integration in Prismatic app](https://prismatic.io/docs/img/integrations/low-code-integration-designer/new-integration-name.png) #### Assigning an icon to an integration Integrations can be assigned icons, to make them more presentable in the [integration marketplace](https://prismatic.io/docs/embed/marketplace/). To assign an icon to an integration from the integration designer by clicking the icon to the left of your integration's name: ![Add icon to integration in Prismatic app](https://prismatic.io/docs/img/integrations/low-code-integration-designer/add-icon.png) #### Assigning labels to an integration You can assign any number of labels to an integration from within the integration designer by opening the **Integration details** menu: ![Assign labels to integration in Prismatic app](https://prismatic.io/docs/img/integrations/low-code-integration-designer/labels.png) #### Categorizing integrations Integrations can be assigned a "category" for easy sorting and filtering. For example, you might have a dozen "ERP" integrations, a few "Inventory Management" integrations, etc. Assigning each integration a category allows your team, as well as your customers in the [integration marketplace](https://prismatic.io/docs/embed/marketplace/) to view integrations sorted by category. You can set a category for an integration by clicking the **Integration details** button on the top-left of the integration designer: ![Set category for integration in Prismatic app](https://prismatic.io/docs/img/integrations/low-code-integration-designer/edit-integration-category.png) #### Publishing an integration By **publishing** an integration, you mark it ready for deployment to customers. To publish an integration, first open the **Version history** tab on the left side of the page. If you have unpublished changes you'll see an **Unpublished Draft** listed among the integration's versions. Type a note about the changes you made to the integration, and then click **Save & Publish** to release a new version of your integration: ![Publish integration in Prismatic app](https://prismatic.io/docs/img/integrations/low-code-integration-designer/version-history.png) Integration versions can be marked **Available** or **Unavailable** by toggling the blue toggles to the right of integration versions. Marking an integration version **Unavailable** prevents that version from being deployed as an [instance](https://prismatic.io/docs/instances/) to a customer. #### Integration templates Some of your integrations will look similar to one another. For example, if you are importing opportunities and accounts from a dozen CRM vendors, the steps that fetch data will be unique, but the steps that send data to your app will always look the same. Rather than developing those common steps over and over, it saves time to create an integration template that you and your team can start from when you build additional similar integrations. To turn your integration into a template, first [publish](https://prismatic.io/docs/integrations/low-code-integration-designer/#publishing-an-integration) a version of your integration. Then, open the **Integration details** modal and select **Available as Template**. ![Create a new template of an integration](https://prismatic.io/docs/img/integrations/low-code-integration-designer/available-as-template.png) You can choose if the template is just for org users, or if you offer [embedded workflow builder](https://prismatic.io/docs/embed/workflow-builder/) you can make the template available to customer integration builders. #### Integration attachments Your team can save and share integration-related documents alongside an integration by clicking on the **Documentation & attachments** button on the left side of the integration designer. ![Add attachments to integration in Prismatic app](https://prismatic.io/docs/img/integrations/low-code-integration-designer/attachments.png) #### Internal integration documentation It's helpful to share documentation, specs and notes about an integration with your team members. You can add internal (non-customer-facing) notes and documentation to an integration by clicking the **Documentation & attachments** button on the left-hand side of the integration designer. Here, you can share notes, links, and other documentation with your team members. ![Add internal documentation to integration in Prismatic app](https://prismatic.io/docs/img/integrations/low-code-integration-designer/integration-documentation.png) #### YAML definition Behind the scenes, integrations are represented in YAML. You can view the YAML that defines your integration's flows, steps, inputs, connections and config variables by clicking **Integration details** button at the top-left of the integration designer, and selecting **View YAML**. ![YAML for integration in Prismatic app](https://prismatic.io/docs/img/integrations/low-code-integration-designer/yaml-definition.png) If you are exporting the integration and importing it in a different region (US -\> EU, for example), make sure you click a **latest component versions** button, as component versions may not match between regions. - [ResNet For Field](https://support.resnet.ai/migration/resnet-for-field?hsLang=en) - [ResNet For Office](https://support.resnet.ai/migration/resnet-for-office?hsLang=en#main-content) - [Admin](https://support.resnet.ai/migration/resnet-for-office?hsLang=en#admin) - [Home](https://support.resnet.ai/migration/resnet-for-office?hsLang=en#home) - [Assets](https://support.resnet.ai/migration/resnet-for-office?hsLang=en#assets) - [Issues](https://support.resnet.ai/migration/resnet-for-office?hsLang=en#issues) - [Campaigns](https://support.resnet.ai/migration/resnet-for-office?hsLang=en#campaigns) - [Resources](https://support.resnet.ai/migration/resnet-for-office?hsLang=en#resources) - [Field Dispatch Console](https://support.resnet.ai/migration/resnet-for-office?hsLang=en#field-dispatch-console) - [Gamification](https://support.resnet.ai/migration/resnet-for-office?hsLang=en#gamification) - [Routes](https://support.resnet.ai/migration/resnet-for-office?hsLang=en#routes) - [User Groups](https://support.resnet.ai/migration/resnet-for-office?hsLang=en#user-groups) - [Credentials](https://support.resnet.ai/migration/resnet-for-office?hsLang=en#credentials) - [Forms](https://support.resnet.ai/migration/resnet-for-office?hsLang=en#forms) - [Admin Panel](https://support.resnet.ai/migration/resnet-for-office?hsLang=en#admin-panel) - [Filtering](https://support.resnet.ai/migration/resnet-for-office?hsLang=en#filtering) - [Custom Fields](https://support.resnet.ai/migration/resnet-for-office?hsLang=en#custom-fields) - [Integrations](https://support.resnet.ai/migration/integrations?hsLang=en) - [Release Notes](https://support.resnet.ai/migration/release-notes?hsLang=en#main-content) - [Feature Releases](https://support.resnet.ai/migration/release-notes?hsLang=en#feature-releases) - [FAQs](https://support.resnet.ai/migration/faqs?hsLang=en) - [Onboarding](https://support.resnet.ai/migration/onboarding?hsLang=en#main-content) - [Office](https://support.resnet.ai/migration/onboarding?hsLang=en#office) - [Field](https://support.resnet.ai/migration/onboarding?hsLang=en#field) - [Workflow Automation](https://support.resnet.ai/migration/workflow-automation?hsLang=en#main-content) - [Build Integrations](https://support.resnet.ai/migration/workflow-automation?hsLang=en#build-integrations) - [Ready-to-use-components](https://support.resnet.ai/migration/workflow-automation?hsLang=en#ready-to-use-components) - [Example Workflows](https://support.resnet.ai/migration/workflow-automation?hsLang=en#example-workflows) - [Documentation](https://support.resnet.ai/migration/documentation?hsLang=en) [![](https://support.resnet.ai/hs-fs/hubfs/primary_logo%20(1).jpg?width=6782&height=2762&name=primary_logo%20(1).jpg)](https://support.resnet.ai/?hsLang=en) [mailto:email@email.com](mailto:email@email.com) Copyright © 2026, ResNet AI