Build and Publish an Integration
Last updated
Last updated
This tutorial will guide you through the process of creating, testing, and publishing your first integration. Specifically, you will learn how to:
Build an integration template using the Appmixer no-code Studio.
Parametrize your template by adding fields to gather information from your end-users through an easy-to-use web form (Wizard).
Validate your integration's functionality through testing.
Publish your integration to your end-users for immediate use.
Explore a demo of how your integrated marketplace could be presented to your end-users.
In our tutorial, we will demonstrate an integration that processes newly created contacts as external events. This simulates a real-world scenario where you would send these events via HTTP requests from your application code. The integration examines each contact for the presence of a hotLead parameter. If this parameter is set to true, the contact is then forwarded to Slack.
On the Integrations page, click the "Create Integration" button located in the top right corner. Then, select the OnAppEvent trigger from the Trigger selector. Utilizing App Events represents the simplest method for sending data to Appmixer.
Configure the OnAppEvent trigger by setting the Event name to contact-created.Use { "first": "John", "last": "Doe", "hotLead": true } as the Event Data Example. This data sample will enable us to reference the specific data fields later in the integration workflow.
Next, add the Condition component to your flow. Do this by dragging the Controls module from the left palette to the canvas. Then, select the Condition options from the Action panel on the right:
Configure the Condition component to check whether the hotLead property from the OnAppEvent trigger is set to true. It's important to note that you can utilize the "+" button adjacent to any configuration field. This feature allows you to reference data originating from any component earlier in the integration flow, regardless of its depth in the workflow.
Next, drag the Slack module from the left palette to the canvas. Choose the SendChannelMessage action and connect it to the true output port of the Condition component:
Our integration template is nearly complete. The next step involves configuring the Slack.SendChannelMessage component. You may have noticed that this component includes three configuration fields: Slack account, Slack channel, and Message. Importantly, these fields should not be hardcoded by the template creator. Instead, they are intended to be customizable by the end-user. This means the end-user should have the ability to authenticate with their own Slack account, choose their desired Slack channel, and tailor the message to be sent.
You can enhance user convenience by setting default values for any field, facilitating quicker integration activation for your end-users. To do this, simply enter a value into the desired field. For example, we'll set a default value for the "Slack message" field:
Additionally, you have the option to apply data transformations to any data variable incorporated into a field. To do this, click on the desired variable, which will open the Modifiers panel. Here, you can define a sequence of modifiers that will be applied in the specified order once the integration is activated and the data becomes available. For our scenario, we aim to transform the last name of the incoming contact to uppercase.
Finally, it's important to assign a meaningful name to our integration:
At this point, our integration is prepared for publishing. However, before proceeding with that, it's crucial to verify that the integration functions as anticipated. Initially, we should examine the appearance of the final configuration web form (Wizard) as it will be presented to our end-users. Additionally, for improved clarity, we recommend renaming the default "Channel" and "Message" fields within the wizard to "Slack Channel" and "Slack Message," respectively. To do this, click on the "Edit Wizard" button located at the top of the interface. This will allow you to view a live preview of the wizard and make adjustments to the fields via the left navigation panel.
Next, proceed with a live test of the integration. Click the "Start Test" button at the top of the page to initiate the integration within your user context (as the template creator). This action will launch the Wizard in its defined state, allowing you to configure the necessary fields. Once the test integration is activated, you'll have the opportunity to experience the integration's functionality firsthand, just as an end-user would.
With our test currently running, you have the ability to manually initiate the OnAppEvent trigger. This is achieved by sending a custom App event to the active test integration. To do this, click the "Test" button located at the top of the interface, which will open the Test menu. From here, choose "Send App Event." For the Event name, enter "contact-created," and for the Event Data, use an example such as { "first": "John", "last": "Smith", "hotLead": true }. After submitting the event, monitor your Slack channel to verify that the contact information has been successfully posted.
Additionally, you can view the activity of your running test integration by navigating to "Test" and then selecting "Insights" from the menu:
Now that your integration is ready and has been thoroughly tested, you are all set to publish it for your end-users.
Please note, if Appmixer has not yet been embedded into your product, you can utilize our demo web app. This allows you to preview how your embedded integration marketplace will appear in your app once the actual embedding is completed.
To allow end-users to configure fields, click on the magic wand button next to each field. This will add the fields to the Configuration Wizard for end-user customization:
