Jump to content

Methods of embedding Mixcloud in Squarespace

Recommended Posts

Hi. I'm looking into setting up a new site, which would in part be a hub for episodes of a radio show. The episodes are long and contain multiple artists, so we're using Mixcloud to host the audio as it deals with licensing (most other platforms will block uploads). I'm curious about what methods people are using to embed Mixcloud episodes/ mixes on Squarespace sites.

I have an existing site on a Squarespace 'Personal Plan' which I can test stuff on. So far, what I've got working is the simple method of using an Embed block and pasting the URL of the Mixcloud episode. It doesn't look desperately elegant, but it seems to function (both on desktop and Android phone). Screenshot attached to show what the player looks like using this method.

Mixcloud has it's own widget which is customizable on the Mixcloud side, and looks a bit nicer - however it uses iFrames, and what Squarespace support have told me is that a Business Plan is required to make this work on a Squarespace site. However, testing the embed of the Mixcloud widget just now on my site (again, this is a Personal Plan) it seems to work fine.

I'm a bit confused since Squarespace just told me iframe is NOT support on a Personal Plan, so why is it working on mine currently?

I'm trying to figure out the best way of doing this, and to verify a method which will work solidly on a Personal Plan and look decent. I don't want to find out down the line that I need to upgrade to a Business Plan with the extra cost attached to that, if you see what I mean.

Any thoughts / info appreciated!
 

Screenshot 2022-01-13 at 11.48.11.png

Link to comment
  • Replies 2
  • Views 913
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

I've just been told that iframes don't work at all on Personal Plans, but they happen to still work on my site because it's a "legacy" Personal Plan. Which is a bit annoying because it means I can't use my existing site to check what will actually work on a new Personal Plan account site

 

Link to comment
39 minutes ago, Dunc1987 said:

I've just been told that iframes don't work at all on Personal Plans, but they happen to still work on my site because it's a "legacy" Personal Plan.

Squarespace offers the lower priced "Personal Plan" for people who aren't monetising their website like a business does.

Personal Plans used to have a 20-page limit to prevent them being used by businesses and, although this still applies to older 'legacy' plans, newer Personal plans do not have page limitations. Instead they are limited by a lack of advanced features. You can see the main feature differences on the pricing page but as far as code is considered, on a current Personal Plan:

  • You cannot add JavaScript anywhere (anything containing '<script>')
  • You cannot add iframes anywhere (anything containing '<iframe')
  • You cannot use Code Injection panels

However, you can

  • Use the Custom CSS panel to add LESS or CSS (styling)
  • Use Embed Blocks to add oEmbed codes
  • Use Code Blocks to add basic HTML and/or CSS

 

We like to know if our posts help. Please consider clicking a 'Like' or 'Thanks' icon below  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.