Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Connecting CodePen with Squarespace

CodePen is an online community for sharing software development projects. This guide explores different ways you can use CodePen with Squarespace.

Here's what you can do with this integration: 

Social icon Share button Push content Pull content
Yes No No No
Note: If you're using the Squarespace Developer Platform and are looking for help on using code on your developer site, visit our Developer documentation.

Connect your CodePen account

Before you start using CodePen with Squarespace, you need to connect your account:

  1. In the Home Menu, click Settings.
  2. Click Connected Accounts.
  3. Click Connect Account.
  4. Select CodePen from the Social Accounts menu. 
  5. Go to your CodePen page and copy the URL from your browser's address bar.
  6. Enter a Label and CodePen URL
Note: On some templates, the label may appear when visitors hover over the CodePen social icon.

Add a social icon

You can add a CodePen social icon that links to your CodePen profile: 

  1. In Connected Accounts, click your CodePen account to open CodePen Settings. 
  2. Ensure Show Social Icon is checked. 
  3. Click Save. 
Note: After connecting CodePen to Squarespace in this step, the social icon will automatically display in most templates, but not all of them. You can also add social icons using the Social Links Block. Learn how these icons display in your template in our template guides.
Was this article helpful?
1 out of 2 found this helpful
Connecting CodePen with Squarespace