Image Relay File Selector

The Image Relay file selector allows you to include Image Relay files in your own sites and web applications without requiring you to code against our API. Users are able to view and search Image Relay content for use on your sites with a familiar Image Relay user interface branded with your colors and logo.

You can include the file selector on your site in a few simple steps.

Step 1.  Get Client ID

First, you must get a developer client id. To do this you log on to your Image Relay account and click My Account in the upper right corner. From there, you select the Developers link, and click Register New Application.

From there, you will be asked for the name of your application and a redirect url. For the File Selector, the Callback URI should be the domain of the website where your file selector will be hosted. For local development you can specify http://localhost:80 or whatever port you are using for development. So, for example, if you were hosting your application at www.example.com, you would enter https://www.example.com in the Callback URI field.

Once you have clicked Register, you will see a screen like the following:

The field that you need for the file selector widget is the Client ID field. This will identify you to Image Relay when you add the widget to your page.

Step 2. Insert Image Relay Javascript

Add the following to the HTML of the page where you want to include the file selector.

Step 3. Add Selector Button HTML

Add the HTML snippet below to create a button that will launch the Image Relay file selector.

The data attributes are as follows:
data-client-id: The client ID obtained from Step 1
data-link-type: The type of quick link you would like back from the file selector is either embed or branded. Embed will give you a direct link to the file, suitable for using in image tags, etc; branded will give you a link to the file wrapped in a view that will display details about the file, from which it can then be downloaded.
data-domain: The URL of your Image Relay portal. For, i.e. https://mycompany.imagerelay.com, where my company is replaced by your custom Image Relay URL name.

This will produce the following button on your site:

Alternatively, you can create your own button (or link) with the following markup:

4. Attach event handlers using 

Add some javascript to your site to handle the events from the Image Relay selector.js javascript.

Response JSON

If the user successfully selects an asset, the following response will be returned:

[
  {
    "asset_id": ""
    "url": ""
    "user_id": ""
 }
]

Further Reading:

Customizing the File Selector Button