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|
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:
- In the Home Menu, click Settings.
- Click Connected Accounts.
- Click Connect Account.
- Select CodePen from the Social Accounts menu.
- Go to your CodePen page and copy the URL from your browser's address bar.
- 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:
- In Connected Accounts, click your CodePen account to open CodePen Settings.
- Ensure Show Social Icon is checked.
- 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.