How To Use Canva Embed Code On A Squarespace Website

How To Use Canva Embed Code

Using Canva Embed Code On Squarespace Websites

Canva is an incredible platform that gives you access to thousands of customizable graphic arts templates you can use to help develop your brand. They're perfect for spicing up your blog, adding engaging graphics to your social media, creating a logo, poster, or flyer, give your resume some pop, creating web banner ads, and much more.

Using Canva graphics on your Squarespace website is now easier than ever. You can embed the images directly onto your Squarespace website, and because they are an embedded image, whenever you change an element on Canva, for example changing dates on an event flyer, your Squarespace website is automatically updated. Embeds allow you to easily share content and automatically update not only on Squarespace but across the web. 

You can display fully functional Tweets, share a YouTube video, on embed almost anything on your blog or Squarespace website.  It offers you incredible flexibility and can save you plenty of time when creating and sharing new content.

Here's why and how to use Canva 2.0 and Canva 1.0 embed code on your Squarespace website.

Why Use Canva Embed Code on Your Squarespace Website?

What we love about embeds is that they're easy to start using them. They are flexible, and you can develop them and build up functionality as you go and your technology evolves. Start by allowing users to copy an iframe tag with your website, then you can build up the user experience and performance as needed. One of the significant added benefits – spreading your brand on the web and acquiring more users. Depending on how you implement embeds, you can also enjoy analytics and SEO advantages. 

Click Here To Learn How To Design a Call To Action On Canva

Embeds use will continue to grow as they embrace the concept of being entirely web-based. Because they do not rely on the user's file system, but actually stream directly from the source, embeds offer incredible functionality. The web is moving towards a service provider based platform, for example, Dropbox for file sharing, Instagram for sharing photos, and Canva for graphic design. Each service focuses on doing one task well, and by connecting through these sites, designers and business owners can let each do what they do best.  

Canva Features Scalable IFrames

The magic in embed code comes from the <script> code. This tag runs a script on the embedded website that dynamically inserts the iframe onto any page where it is placed. While this doesn't have any real advantage other than keeping the embed code a bit shorter, by having a script on the embed website we can make the content responsive to the container the embed is on.

Unlike an image which rescales based on the viewing device, iframes don't neatly scale to the dimensions of the content that is within them. To make sure that our image is the right size, we detect the width of the container that the embed is in and then calculate the dimensions of the embed using the ratio of the design.

This is how we can achieve an edge-to-edge image with rounded corners. Every time the container or window is resized, we merely need to recalculate the style, taking advantage of the “data-height-ratio” defined on the HTML e3lement.

Using Canva Embed Code on Your Squarespace Website

Creating a design on Canva gives you incredible control over the elements of your website. Canva embeds provide your visitors with a dose of interactivity. You can convert content into presentations for your readers to engage with or interesting infographics that can be changed in Canva and will update in real-time wherever you have them, on your website, in your Twitter feed or on your social sites. Basically, Canva embeds allow you to transform static designs into engaging, interactive, high-powered content.

Using Canva embed code on your website is simple. Just copy and paste your designs embed code onto your Squarespace site.

Here's how to share the embed code on your design in Canva 2.0:
• Click the Publish button in the top of the editor.
• Select the Embed option in the drop-down menu.
• If you have premium elements in your design, click Pay and Embed, otherwise simply click Embed.
• Choose between the available links depending on where you'd like to embed the design.
• Click the copy button
• Paste the code into your blog or website's HTML view editor, and you're done!

The process is very similar when using Canva 1.0:
• Click the Share button on the upper right-hand corner of your screen.
• The “Share this design” dialog box appears.
• Click Embed.
• The embed code is displayed.
• Click the green Copy button. It will change to “Copied!”
• Paste the code into your blog or website's HTML viewer, and you're done!

In Squarespace, you'll need to paste the embed code into the HTML viewer. Here are the steps:

1. Click on the Code button, this will open the HTML viewer window.
2. Paste the HTML code you copied in Canva by pressing Command/CTRL + V into the Squarespace HTML viewer window.
3. Click “Apply,” and your embed code is inserted into your Squarespace page.

Using Canva as a design tool can add another layer of functionality to your Squarespace website design. It's the perfect way to add design elements that can increase engagement with your content, drive conversions, and provide your visitors with an excellent user experience. Adding Canva embed codes to your website is fast, easy and flexible. Changes made in Canva are updated in real-time meaning you'll spend less time updating your content, freeing up time for core business tasks. It's a win-win proposition!

Tips On Using The Squarespace Website Builder

About Michael Conway

I'm the owner of Means-of-Production, a marketing firm that builds Squarespace websites. I design sites that help you get found online, attract better prospects, and capture leads. If you need help with a Squarespace site that you're working on click here to view my calendar and schedule a call. I am a Squarespace Specialist and Authorized Trainer. Together we can improve your site so that it grows your business.