Embedding content on a detail page

Updated January 03, 2022 17:04

Stacker allows you to embed almost anything into a record detail page - from YouTube videos to Google Maps and Airtable bases.

When editing the layout of your record detail page, you have the option to add embed widgets. These allow you to embed external content in your app.

How to add an embed to your Stacker app

To add an embed to your Stacker app, head to 'Edit layout' in a detail page and pull in an Embed widget. From there you can choose to either embed from a URL, or from a Field.

Here's a quick guide to some of the features you might like to embed in your app:

How to embed from Airtable

To embed a grid view from Airtable you need to get a shareable link, as follows. Please note: this is different from the URL of your Airtable base.

Go to the top of your Airtable base and click on 'Share View'.
Select 'Create a shareable grid view link'
This will open the private links page where you can choose to embed.

You only need the url link i.e. the URL inside the " ".

Now you can either copy this link into your Stacker app, or into a url field in the table where you want the embed to appear. Your grid view from Airtable will then appear in your Stacker app.

How to embed from YouTube

To be able to embed Youtube you need to copy the Video ID found when you click the share button.

You then need to add the Video ID to the end of https://www.youtube.com/embed/

For example: https://youtube.com/embed/Y7dpJ0oseIA

Then add this to your Airtable base as a url field, drag the embed widget and select the correct field. This will now embed the video onto your page.

How to embed Google Maps

Enter the address of the place you want to embed into your app, then go to the Menu section on Google maps.

From the Menu Choose "Share or embed map" Then click on the copy html from the embed tab.

Remove the <iframe> from the link, you only need the url for this to work.

Add this into a url field in your Airtable and embed into your app.

There is currently a bug in Google maps that does not allow you to embed the name of a location. It has to be the address.

For example typing in a location like Eiffel Tower, Paris and embedding that link will not work, you will get an invalid pb as an error message.

You need to copy the address and paste that into the search and copy the embed from there for this to work.

How to embed from Vimeo

To embed a video from Vimeo, click on the share button, you will need only the url from the embed.

Add https://player.vimeo.com/video/76979871 to your Airtable base as a url field, drag the embed widget onto your layout and select the field to embed the video.

How to embed Google Drive Videos

To embed a video from Google Drive, you need to generate a preview link.

If you have the file ID in a column in your Airtable called Video ID, you can use the following formula to create the preview link:

CONCATENATE("[<https://drive.google.com/file/d/>](<https://drive.google.com/file/d/>)",{Video ID},"/preview")

You can then use this field in an embed block on your detail pages for the video to appear in your app.

Remember you can set the height of your videos in the same section where you select the field.

Next steps

‍