This article walks you through the process of Integrations Marketplace creation and also explains its uses. The Integrations Marketplace is a public listing of all apps that your users can create integrations with using Integry or on any other platform. It offers a quick way to give your users access to integrations. Alternatively, you can embed integrations in your app, but that would require you to embed the SDK, which can take lots of time and effort.
We will explain the uses and structure of Integrations Marketplace with the example of Tatango, a SaaS company used for messaging and communication in the US. You can spin up a subdomain such as yourapp.integry.io, or set up the Directory on a custom domain such as integrations.yourapp.com. In that Directory, your end-user can see all of the integrations available by you.
The image above shows all the different integrations that the end-user can set up. When the end-user clicks on any of these integrated apps, they will be greeted by the app's detail page covering the app's integration capabilities as well as screenshots and relevant links, as seen in the picture below.
If the end-user clicks on the 'Use flow' button shown in the above screenshot, they will be taken to the integration setup screen. The end-user also can link this Directory with the app's authentication. This is called Single Sign-On (SSO), which keeps things simple, and you can maintain control of who you authenticate.
1. How to create an Integrations Marketplace
Creating an Integrations Marketplace is a simple process shown below.
Go to Dashboard, click on Deployments as seen on the top of the following screenshot.
Deployments are how we expose integrations to end-users. Integrations can be published either in an Integrations Marketplace or in-app via SDK. There are two options available, the Directory deployment that is for creating your own app, and the SDK deployment, which is the deployment of integrations on an SDK that will be embedded inside your app.
As seen in the image above, select the first option, 'Create Directory Deployment', to start creating an Integrations Marketplace.
2. Basic Information
After selecting the Directory deployment, you will come to its configuration page, which starts with the Basic Info section of your Directory, as shown below.
This is where you can specify the location of the Directory as well as the app's URL. This information will be used to populate your Directory's appearance and default text.
App URL: This is used to generate information about your app.
Directory URL: This is the URL of your subdomain. By default, a free subdomain under Integry.io is given to you, which you can customize as your own domain. You can change both of these URLs.
Next up, when you click on 'Advanced Settings', you get to the following page.
Here you can enable or disable Custom Flows. Custom Flows give your end-users the ability to create their own integrations. It is 'on' by default. The Logo URL defines what happens when the end-user clicks on the app logo. The Login URL helps you set up SSO. Google analytics can also be embedded by just giving the tracking ID of your Google analytics here in the last box, and Integry will be sending visitor traffic information to your instance of Google analytics.
3. Adding a Card
When you click continue you will land on the following page.
Here you can find information on 'Categories and Cards'. The 'Select categories and Cards to show' box will allow you to add flows/cards to your Directory. Cards or flows are apps that you can choose to integrate.
You can search for any card that you have already created and want to add to your Directory. On the right, you can preview how this information will appear on the actual page and how your Directory is becoming. You also have the option to open the preview in a new tab.
We can add the already created integrations to our Directory. When you click on 'Select Categories and Cards to Show', you will see all the flows that you have made so far.
If you click on the 'Add' icon for any card, as shown below, it adds the card to your Directory.
There are many categories under which a card can be added, and it can be added under multiple categories simultaneously.
You can add as many cards as you want and also search for cards that you have not added yet from the search bar, as shown in the screenshot above. Once you have found your required card, you can add it to your Directory by clicking on the 'Add' icon as shown below.
As you can see above that, there are two options; Guided Flow and App.
Guided Flows are the integrations that you have created, while Apps are any matching apps pulled up from the internet by Integry. If you add the app, Integry creates a content card for it so the user can visit it and see what it's linked to. It just gives a landing page for that app, and users might not be able to create an integration with that app through Integry. You can see the apps available for integration under Guided Flows in the screenshot below.
When you click on any of these apps, you can do several things. After clicking on the MailChimp App, the below page appears.
Here as you can see that you can change the name of the card, the summary for that card. You can also change the icon and the card's default color. You can even change the categories under which it appears. You can add in keywords as well, which will appear on the card or product pages.
You can also turn the Product Page button on or off. If you turn it on, that means that a detailed page will come up; otherwise, it will only show the card on the landing view. The Product Page button is turned on in the following picture.
There is also an option to add screenshots, as seen below, which will appear on top of the landing page. Another option to add a description explaining what this card does is also available.
You can also remove any app in the Directory by clicking the cross in front of the app name. The screenshot below shows the cross in front of Sendinblue contacts.
You can also drag and drop a card to any of the categories to add that card to a category.
Similarly, you can add a card in the section directly by clicking add card, as you can see in the screenshot below.
You can search for flows and add them from there as well. The following screenshot shows a flow search bar being selected.
4. Creating a category
You can also create a new category. For example, below, you can see the category called 'Tech sales' being created. You can create this by clicking on the 'New' icon.
You can hide this category by clicking the cross sign in front of it, as seen in the screenshot below.
You can also go to settings by clicking the settings icon highlighted and zoomed in from the previous screenshot below.
In the settings menu, you can select a title/name for that category and set the order of cards.
Three options are available for sorting, which are alphabetical, newest first, and manual. You can set the number of rows of cards to be shown as well; for example, ten rows are set in the picture below.
When you close this window, you get back to the Categories and Cards main page.
5. Directory Appearance
When you click Continue in the previous step, it will generate the whole branding.
Here you generated the Title and the Header text. You can also upload a logo and a favicon which will appear in the Directory.
You will complete the directory creation by clicking done, as shown in the screenshot above. You can click on 'Go to Your Directory' to see the Directory you just created.
When you open this Directory from the Dashboard shown below, you see the exit wizard is no longer there.
You can see Card Page Appearance, Directory Appearance, and Localization appear on the left in the screenshot below.
You can modify multiple sections now.
Under Directory Appearance, when you open Directory Branding, the following window will show up in which you can set Title, Header Text, Logo, and Favicon.
You can change the color of important aspects, as shown below.
You can set the color for background, buttons and links, body text, header text, top menu text, and action text. When you click on 'Customize Directory', you can upload an image instead of the default background color. You can also add a Slideshow.
You can also edit the category panel position as shown below.
You can edit the CTA (call to action) bar settings from here as well, as seen in the screenshot above. It makes a CTA bar at the bottom of your Directory, which is helpful for the end-users who are landing on your page and don't have an account or don't have knowledge about your app. You can add the link for a signup page here and get them signed in.
In the screenshot above, you can add the Title, Description, Button label, and Button link to create a CTA bar.
Finally, you can see social media icons. You can add your Facebook, Twitter, and LinkedIn social media accounts here. These will appear on the bottom, as shown below, once you add them.
6. Card Page Appearance
When you click on 'Card Page Appearance', you can set what will show on the detailed page of a card.
The above screenshot shows what fields you can set under Card Page Appearance.
When you select Keywords, you can choose to make them appear or not on the left side, as seen in the above screenshot.
You can also choose to display the Logo on the side of your app's name from the Card Logo option, as shown in the screenshot above. You can also choose to make screenshots appear or disappear from this page.
Finally, you can choose the links panel location between left and right. The below screen shows the link panel on the left.
Towards the end, there is Localization. This is not implemented right now, but it helps you in implementing multiple languages. You will see the following screen when you click on Localization.
After the successful creation, you will just have to provide the URL of your Integrations Marketplace to your end-users. This can be done by adding it to the Integrations section inside your app. Your end-users will get to your Integrations Marketplace homepage when they click on this URL. An Integrations Marketplace requires integration with your authentication so that the end-users can create integrations. End-users will only be able to view it and not create integrations if they don`t have the authentication.