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 covers adding a CodePen icon to your site.

Here's what you can do with this integration: 

Social icon Share button Push content Pull content
Yes No No No
Tip: This integration with CodePen is separate from the Squarespace Developer Platform. For help with Squarespace for developers, 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 CodePen URL and a Label. On some templates, the label may appear when visitors hover over the CodePen social icon.
  7. Click Add.

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. 

After connecting CodePen to Squarespace, 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.

Was this article helpful?
3 out of 8 found this helpful
Connecting CodePen with Squarespace