Tray Embedded / Building Integrations / Displaying Solutions

Displaying Solutions

Read first

Make sure you have read the following sections before proceeding:

Introduction

Once you have registered and logged a user into your app, you will need to display the Integrations / Solutions available for them to configure their own 'Solution Instances'.

The above screenshot shows a simple mockup of what this might look like (exactly how you display available Solutions to your End Users is up to you).

In the above case, for an End User (who has already been registered and has an access token) you will need to implement the following:

  1. List the available Integrations / Solutions in your application with the solutions query (master token)
  2. The End User can click to configure any of the available solutions, whereby you:
  3. The Config Wizard can then be activated with the following url: https://embedded.tray.io/external/solutions/${embeddedId}/configure/${solutionInstanceId}?code=${authorizationCode}
You can remove the tray.io domain and whitelabel the Config Wizard url. If you have done so then embedded.tray.io will be replaced with e.g. acme.integration-configuration.com

In the above url remember that embeddedId is set in the People and settings section of the dashboard

Key Data

  • id is the unique id of the Solution, and is required when creating a Solution Instance for an End User
  • title is the title of the Solution as named in the Tray Embedded UI, and can be displayed in your application
  • tags which have been set in the Tray Embedded UI can be used to categorize and filter Solutions in your application
  • customFields can be used to add any custom fields, such as an icon url for your Solution

Viewing Solutions in the UI

The Solutions you have created for your End Users can be found in the Solutions section of the Tray Embedded dashboard:

APIs connected to Solutions

  • The GraphQL solutions query is used to list the Solutions available

Tagging Solutions

In Solution settings, it is possible to use tags to categorize Solutions:

One use for this is that you may wish to group users into basic and advanced product users, using tags in the Solution editor:

tags is then one of the node fields that can be returned for each result from the solutions query:

query {
viewer {
solutions {
edges {
node {
id
title
description
tags
}
}
}
}
}

Results are returned in the following format and solutions can then be filtered accordingly for presentation to End Users in your external application:

{
"data": {
"viewer": {
"solutions": {
"edges": [
{
"node": {
"id": "2d38bxxx-xxx-xxx-xxx-xxc68084266",
"title": "Salesforce 1",
"description": "",
"tags": [
"basic"
]
}
},
{
"node": {
"id": "53b10xxx-xxx-xxx-xxx-xxe09038b",
"title": "Salesforce 2",
"description": "",
"tags": [
"advanced"
]
}
}
]
}
}
}
}

Connected topics

The next page in this section is a guide to working with the Config Wizard: