Feature: More visual options for embedded apps

Easily apply borders and shadows to embedded apps with the revamped embed tab which appears when you share an app, with a live preview. You can also experiment with our new auto-height feature, which adjusts the height of the containing iframe to match the app content.

When you want to embed an app in your website, an HTML snippet needs to be inserted in your page. To access this snippet, you switch to the Embed tab in the window that appears when you share or update an app, copy it to the clipboard and paste it in your page where you want the app to go. (If your app is on an embedded plan, there are no tabs and the entirety of the share window is dedicated to embedding your app.)

Previously, the Share tab was very spartan and only presented the HTML snippet. If you wanted to customize the width or height or add visual flourishes, you had to edit the HTML snippet yourself (or amend your CSS stylesheet).

With this release, we’re completely revamping the Embed tab. Instead of being HTML-centric, there’s now a preview of your embedded app and a sidebar which allows you to change the width and height and customize the border and shadow used for the app:

The preview of the embed tab of the share dialog

You can copy the generated HTML markup by pressing the button labeled Copy HTML to clipboard. To view a sample full HTML document, complete with the HTML markup you need to copy, press the button:

The HTML view of the embed tab of the share dialog

The sidebar also makes it easy to use our new auto-height feature, which resizes the iframe containing your app to make it the same size as your content, and does so while your users are using your app. Learn more about the auto-height feature in a separate post.

The auto-height feature requires your pages which host apps to include a JavaScript library we have developed. If you’re using a content management system like WordPress, you’ll need to jump through some extra hoops to include the library at the end of your page’s <head> element.

Aside from the auto-height feature, there’s nothing here that you couldn’t make happen before, given sufficient knowledge of stylesheets. We hope that the new embed tab both serves to educate beginning website authors on what’s possible when embedding apps and helps beginning and experienced authors alike to more quickly experiement with various options.

To be clear, these new options only scratch the surface of what’s possible. CSS transforms can be used to rotate, scale or skew an element. Want to put a fully-interactive app on the side of a rotating cube? You can. (But maybe you shouldn’t.)

There are also simpler effects the new embed tab doesn’t cover. Try changing border-style: solid; in the generated HTML to border-style: double; to get a double border. There are lots of other possibilities with borders.

« Feature: Auto-height for embedded apps Release: Our July, 2019 update is here »