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|
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:
- 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. 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.
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.