[Feature Request] Improve Embed for 3rd Party Apps

Suggestion Box
1

This post is intended to provide a brief summary about using iFrames in Coda Docs and the current limitations specifically related to embedding 3rd party Apps.

It includes an approach for a basic solution as a prompt for discussion about the use case described below. There is limited relevant technical documentation published by Coda for general users, so some assumptions may be inaccurate or misguided.

Using Embed in Docs

Coda uses iframely as the default framework for embedding media in Docs from over 1,900 media publishers using the /embed function

Other content, not supported by iframely, may display by using the Embed​(url, width, height, force​) formula with the setting force: true

Additionally, there are a limited number of third party/partner Apps supported in Coda, that can be embedded using an iFrame, that have been specifically integrated by Coda, to support their unique requirements eg. /miro, etc.

Embed App Problems

Supported media and some private content can be embedded successfully in Docs subject to the known limitations and security restrictions when using iFrames.

However, embedding Apps effectively, may mean the limited default functionality provided via the Embed() formula may be cumbersome, not meet typical user expectations, or not take advantage of some App functionality.

Use Case

A user seeks to select and embed a document or resource from an App hosted on a 3rd party server from within a Coda Doc directly from within the Coda Doc.

Currently, users are typically required to navigate separately to the 3rd Party resource, copy the URL, return to the Coda Doc and paste the URL via /embed or into the Embed() formula.

Current Embed Partner App Solution

The Coda + Miro integration addresses this use case limitation by allowing registered Miro Users to select and embed any of their Miro Boards in an iFrame using the command /miro directly from the Coda Doc.

Embed Miro Board Steps

  1. Registered Miro User enters /miro
  2. Popup window displays Miro Board Picker and passes Coda Doc and User codes as arguments in the URL, eg.

Miro | Online Whiteboard for Visual Collaboration

  1. Miro User creates or selects one of their Miro Boards to embed in Coda
  2. An embed formula is created and inserted that contains a link to the selected Miro Board eg.

Embed(“https://miro.com/app/access-link/ 2aaaaaab605aeda1EYZxmhHiAm2Rg1IlNPJape6wXF81Kccp ”, force: true)

  1. Selected Miro Board is displayed in an iFrame.

Proposed Embed General App Solution

In addition to developing individual partner solutions like /miro, there could be a similar, general solution that may address the above use case for many developers. Combining this approach with the forthcoming release of Custom Templates may provide a durable solution.

A possible solution may be to add /embedApp that will:

  1. Display a dialog for the user to enter the the App URL

image.png

  1. On submit a Popup Window is displayed with the link URL extended with arguments

https://appLink/?parentOrigin=[...]&guid=[...]&action=[...]&clientId=[...]

  1. App facilitates the User Login, activities and resource selection

  2. App returns the resource URL to be included in the Embed() formula

  3. Embedded resource is displayed.

5 Likes