Skip to main content

Overview

info

The Tray Embedded bundle is available to Enterprise customers as an optional add-on.

Please contact your sales representative if you wish to activate the bundle.

You can put the power of Tray in the hands of End Users (internal staff or external customers) by templatizing automations and making them available as integrations ready for easy activation:

integration-marketplace

A typical use case for this would be if your service features a range of integrations (or Solutions as we call them) involving your own product and a number of third party services (Zendesk, Slack, Salesforce, Marketo, etc.) and you wish to use Tray Embedded to enable your End Users to:

  1. Very quickly authenticate themselves with each service involved

  2. Enter Config Data which makes any further necessary personal configurations so that the integration works specifically for them (e.g. what Slack channel do they subscribe to, or what Salesforce contact type do they work with)

This can all be done in a properly 'white-labelled' sense - i.e. the fact that you are using Tray Embedded to automate these integrations is invisible to your End Users.

Building Embedded integrations​

Building Tray Embedded integrations is a matter of:

  1. In the Tray Embedded UI, create the workflows, projects and solutions which form the basis of your integrations:

    embedded-diagram

    Workflows contain the intelligence which drives your integration - including the required Tray.io and service connectors, authentications and Config Data.

    A Project can contain multiple workflows, and pulls together the Config Data shared across the workflows.

    A Solution then makes a Project configurable for an End User (via the Config Wizard) by pulling all of the Config Data and Authentications contained in your project and making them available as Config Slots and Authentication Slots. These are populated with Config and Authentication values when the End User runs the Config Wizard, to create their own Solution Instances.

  2. Build your app and make use of the Tray Embedded API to manage:

    • Front End tasks such as displaying available solutions and allowing users to click to activate the Config Wizard

    • Back End tasks such as creating Users and Solution Instances

Graphical overview​

The graphic below gives a quick snapshot of a Tray Embedded application. It shows a setup whereby you have several Solutions available for your End Users and an End User has clicked to activate a Solution which automatically creates Asana tasks for them when Salesforce accounts of a certain type are created.

Note: The Platform Interface depicted in the centre of the graphic is a mock-up of how you might present your Tray Embedded Solutions within your own application. This is not a Tray.io component and the styling and presentation of this is up to you:

embedded-graphical-intro

In the diagram there are 4 'layers':

  1. Your application code behind the UI (in the dark box) which is built using our GraphQL APIs and can use our demo app as a guide. The example shows sample code which would trigger the createSolutionInstance API when a user clicks to configure a Solution for their own use.

  2. Your Application Interface (not a Tray.io component). This represents the main window of your interface where you present the Solutions available for your End Users to configure for their own use (rememember that this is a simple mock-up and how this is configured is entirely up to you! The key point is that you use our APIs to help you display available Solutions and control what happens when an End User clicks to activate them).

  3. The Tray Customizable Configuration Wizard (this is a Tray.io component!) which is activated when an End User clicks to configure a Solution. This is represented in two parts:

    • The Tray Config Wizard URL (in the yellow box) which accepts the ID of the Solution Instance being created and the one-time authorization code for the End User
    • The individual screens (4 in this example) of the Configuration Wizard (these can be customized in our Solution Editor) which allow the End User to create their own authentications for the services involved (Salesforce and Asana in this example) and enter their own Config Data which means the Solution Instance will work for them as an individual.

  4. At the very bottom of the graphic you can also see the Config Data values of $.config.salesforce-acct and $.config.asana-project which link back to the source workflow which specified that these fields would be available in the Config Wizard.

Best Practices​

Prerequisites​

Embedded ID​

You can set your Embedded ID (i.e. your company name or initials) in the Embedded Settings section.

This is required for loading Config Wizard CSS.

It is also passed as a parameter in the url for the Config Wizard:

embedded-id

Master token​

In order to make use of the Tray Embedded APIs, you will need a Master Token.

info

You have to be an admin/owner of the Embedded account to see these!

This is generated in the Tokens section under Settings in your dashboard:

master-token

Solution alerting workflow​

Webhook url for whitelabelling​

Custom services​

You can't create one in an Embedded custom workspace

Have to create it in the Org workspace

Solutions cannot be made in an Embedded Custom workspace

Governance checklist​

The following checklist of key resources can help you to be successful working through your full automation lifecycle:

Direct people to the governance section and highlight the embedded-specific gotchas: