Embed a Spotify Play Button in individual List Block records

Spotify allows developers to copy and paste an embed code for users to play a specific track or album. This is called the Play Button.

I would like to embed a unique play button into each individual List Block record (using a horizontal drop-down List Block)

Suggestions? Is this something that I would explore on the AirTable or Softr side?

Hey @TomKrumins, we have a field setting called Embed in our List blocks. Try collecting the embedded codes of the mentioned play buttons in your Airtable and connect that column to the Embed field setting in the List block of Softr. If this won’t work, you will need need to use our Custom Code block.

Great, I’ll give this a look. Is there any recommendation for the Field type to use on the AirTable side?

Here’s what the embed looks like (see the blank box)

I’ve tested placing the embed in a Single Line Text, Long Text, and URL field. Same result.

Any advice? I’m a true no-coder, so custom code is outside of my expertise :slight_smile:

Sample Spotify embed

Here’s what worked for me:

  • Copy embed from a Spotify song. It looks like this:
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/7tqhbajSfrz2F7E1Z75ASX?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen=" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
  • Create a field of type “single line text” in a table in Airtable, name the field “Spotify”.
  • Paste the above iframe HTML directly into the “Spotify” value in the first record of the table.
  • In studio, create a page with a list details block in it, and hook the block up to the Airtable table
  • Map the “Spotify” AT field to a list item field in the List Details block. “Text” works fine as the type of that field, or you can make it “Embed”, that seems to work exactly the same as “Text”.

Let me know if you have better luck following these steps.

This is great. Solved the core issue.
I have one added step that would make this fully functional.

AIRTABLE SETUP
Artists table – includes a “single line text” “Spotify” field containing an embed. The embed links to one of the artist’s most popular songs.
Live Music table – links to the artists table. Uses a Lookup field to pull the “Spotify” field’s embed.

SOFTR SETUP
Add the Lookup version of the embed as a list item field either directly to the List Block or to an attached List Details page.

At the moment, using a Lookup produces the same result. An empty box.
Thoughts? Can I achieve the same goal using a Lookup field or another workaround?

FWIW this worked in a List block as well. I.e., I was able to display the Spotify play button in either a Text field or an Embed field in each row of a list of records.

I don’t see why this wouldn’t work as a lookup. The problem may well be related to the way that Airtable guesses at the data type of the data that comes through a Lookup. Let me take a look…

Yeah, that was the issue. What worked for me was to make a lookup field that gets the embed from another table, then make a formula field that looks like this:
"'''" & {HTML (from Spotify Embeds)} & "'''"

I have run into this problem before and used this technique.

Testing that technique now. Will report back.

It’s not quite right - I didn’t notice the first time but some single quotes are coming through into the page.

OK here’s what worked best for me. Instead of the above Airtable formula field, try this:
"" & {HTML (from Spotify Embeds)}

This causes Airtable to decide that this field must be a string type.

You know, now that I think I really understand this situation, I think it’s a bug in Softr that it can’t figure out that this value is supposed to be a string. I’ll ask.

To confirm, the {HTML (from Spotify Embeds)} portion of the formula is pulling the lookup field holding the embed?

Yes.

That did it, thank you!

Huzzah! However, I think this Should Have Just Worked™ and hopefully it can get a little easier in the future.

Hah! If you trademark “Should Have Just Worked” in the no-code space, you’d be making millions. All part of the progress :slight_smile:

This is something we could also improve I think. Lookup fields are not coming to us as a text and that’s part of the issue I think. @Marine.Hovhannisyan perhaps you can share in the team to support lookup values in the embed/rich-text fileds… @dcoletta thanks for your help!

1 Like

Sure, will check it with the team and keep you posted on the resutls!

Hey @AndrewMillson, here is a short video on how Softr works. It will help you become familiar with our app to build your own apps including in them embeds from Spotify :wink: