# Build and Publish an Integration

{% embed url="<https://www.youtube.com/watch?v=PZyzOWA_uJw>" %}

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.

## Integration Overview

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

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/Jm1zQdMWJMUa2PKgOz1M/template%20overview.png" alt=""><figcaption></figcaption></figure>

## Create an Integration Template

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](https://docs.appmixer.com/getting-started/use-app-events) represents the simplest method for sending data to Appmixer.

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/d2kdZjdvEHl4ti5G74DN/image.png" alt=""><figcaption></figcaption></figure>

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.&#x20;

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/HSBg5aZK4T1M9W4TjolH/onapp%20event%20setup.png" alt=""><figcaption></figcaption></figure>

Next, add the `Condition` component to your flow. Do this by clicking `Add Step` on the right side of the `On App Event` component. Then type in "condition" and select it.

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/oIB5IFlBwLGH5U3cznH3/add%20condition.gif" alt=""><figcaption></figcaption></figure>

Configure the `Condition` component to check whether the `hotLead` property from the `OnAppEvent` trigger is set to `true`. Use the "**+**" button next to any configuration field. This feature allows you to reference data from any component earlier in the integration flow (data variables), regardless of its depth in the workflow.

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/SEf7A7rdrBV6oTGDeCS9/condition%20true.gif" alt=""><figcaption></figcaption></figure>

Next, click `Add Step` on the `true` output port of the `Condition` step. Then, find the `Slack - Send Channel Message` component:

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/Pwv78nSBogTTxWPmlSU1/add%20slack.gif" alt=""><figcaption></figcaption></figure>

## Select Configuration Fields to Collect from your End-Users

Our integration template is nearly complete. The next step is to setup the `Slack - Send Channel Message` component. This component includes three configuration fields: *Slack account*, *Slack channel*, and *Message*. 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 will authenticate with their own Slack account, choose their desired Slack channel, and tailor the message to be sent.

To allow end-users to configure fields, click on the magic wand button ![](https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/4ZplNdPp1LSoErdnOmco/image.png) next to each field. This will add the fields to the Configuration *Wizard* (the final product of this setup) for end-user customization:

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/GK4MX28XE1zkvJwwKELL/add%20slack%20to%20wizard.png" alt=""><figcaption></figcaption></figure>

You can make it easier for your users by choosing default values for any field. To do this, simply enter a value into the field. For example, we'll set a default value for the "*Slack message*" field:

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/mId24DvdCvn4CiaHJncC/predefined%20values.png" alt=""><figcaption></figcaption></figure>

Additionally, you have the option to apply data transformations to any data variable. 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.

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/JDpqIWUOJy4LNCwkNm9F/GIF%20Recording%202024-02-20%20at%204.02.38%20PM.gif" alt=""><figcaption></figcaption></figure>

Finally, edit the name of the integration:

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/EiSiYigPNY4vFXAYTzDZ/GIF%20Recording%202024-02-20%20at%204.12.03%20PM.gif" alt=""><figcaption></figcaption></figure>

## Test your Integration

At this point, our integration is prepared for publishing. However, it is important to test it to see that it works as expected. 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.

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/3ohf0icYFxutxxncVEVJ/GIF%20Recording%202024-02-20%20at%204.15.31%20PM.gif" alt=""><figcaption></figcaption></figure>

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 can put yourself in the shoes of your users and test it.

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/FSVa8n3EKpHLIfa2tKD9/GIF%20Recording%202024-02-20%20at%204.30.29%20PM.gif" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/BFKzrQtNs3zd5oEwywo0/GIF%20Recording%202024-02-20%20at%205.30.49%20PM.gif" alt=""><figcaption></figcaption></figure>

Additionally, you can view the activity of your running test integration by navigating to "Test" and then selecting "Insights" from the menu:

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/vR3cfNroRL4bRtrB4Jon/image.png" alt=""><figcaption></figcaption></figure>

## Publish your Integration to your End-Users

Now that your integration is ready and has been thoroughly tested, you are all set to publish it for your end-users.

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/J24AQVHpeQt6Pe6th1F2/GIF%20Recording%202024-02-20%20at%205.46.55%20PM.gif" alt=""><figcaption></figcaption></figure>

Please note, if Appmixer has not yet been [embedded into your product](https://docs.appmixer.com/getting-started/embed), you can use two quick ways of seeing what the final experience looks like:

* Go to `https://YOUR_TENANT.appmixer.cloud/integrations` (replace YOUR\_TENANT with the name of your trial account - the one you see in your browser) to quickly see a preview of what the published template can look like in an embedded integration marketplace.

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/FPa597WHZHQBtxa4kIQi/slash%20integrations.png" alt=""><figcaption></figcaption></figure>

* Alternatively, go to our demo web app, which also allows you to preview how your embedded integration marketplace will appear in your app once the actual embedding is completed.

{% embed url="<https://demo-integrations.appmixer.com>" %}

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/mtrCt6ZcRQNDf57qpR24/image.png" alt=""><figcaption></figcaption></figure>